valueBox not changing color and uncentered

Question

I'm trying to add a value box to my shiny dashboard within a renderUi wrapper. So far, I've only found the valueBox function (although, I'm open to others, as it is very restrictive). However, it doesn't change color (see screenshot), despite me giving it a valid color argument. In addition, the text is not centered.

I'd ideally like to keep my layout with the main panel and side bar as well.

I'll accept any answer if it 1) can get valueBox to be "navy", centered, and with white text or 2) can suggest another function that can accomplish the same goals (with a huge bonus being if I could have more flexibility with the colors).

Reproducible example:

library(shinydashboard)
library(shiny)
ui <- fluidPage(
    
    sidebarLayout(
        sidebarPanel(
            textInput(inputId = "greeting",
                      label = "Say hi!"),
            actionButton(inputId = "submit", 
                         label = "Submit")
            
        ),
        mainPanel(
            valueBoxOutput("total_projects")
            )
    ))
server <- function(input, output) {
    
    data <- tibble(name = c("Justin", "Corey", "Sibley"),
                   grade = c(50, 100, 100))

    
    output$total_projects <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
        num_100s <- data %>% filter(grade == 100) %>% nrow()
        valueBox(value = num_100s, subtitle = "Number of Perfect Scores",
                 color = "navy", width = 3) #setting color argument but it shows up white
        }
    })
}
shinyApp(ui, server)

Note: The value box should be navy.

Answer 1

Does this answer your question? It's centered and navy colored by using shiny UI functions/div/css instead of the valueBox options.

library(shinydashboard)
library(shiny)
library(dplyr)

ui <- fluidPage(
    
    sidebarLayout(
        sidebarPanel(
            textInput(inputId = "greeting",
                      label = "Say hi!"),
            actionButton(inputId = "submit", 
                         label = "Submit")
            
        ),
        mainPanel(
            fluidRow(column(12,align="center",div(valueBoxOutput("total_projects"),style="color:white;"),style="background-color:navy;"))
        )
    ))
server <- function(input, output) {
    
    data <- tibble(name = c("Justin", "Corey", "Sibley"),
                   grade = c(50, 100, 100))
    
    
    output$total_projects <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
            num_100s <- data %>% filter(grade == 100) %>% nrow()
            valueBox(value = num_100s, subtitle = "Number of Perfect Scores",
                     color = "navy", width = 3) #setting color argument but it shows up white
        }
    })
}
shinyApp(ui, server)