https://github.com/nik01010/dashboardThemeSwitcher
Live theme switcher for R Shinydashboard applications
https://github.com/nik01010/dashboardThemeSwitcher
Last synced: 4 months ago
JSON representation
Live theme switcher for R Shinydashboard applications
- Host: GitHub
- URL: https://github.com/nik01010/dashboardThemeSwitcher
- Owner: nik01010
- Created: 2019-03-18T19:27:26.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-07-13T13:45:35.000Z (almost 3 years ago)
- Last Synced: 2024-08-13T07:15:29.729Z (8 months ago)
- Language: R
- Homepage:
- Size: 34.2 KB
- Stars: 13
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- jimsghstars - nik01010/dashboardThemeSwitcher - Live theme switcher for R Shinydashboard applications (R)
README
# dashboardThemeSwitcher
An example of how to create a live theme switcher for R Shinydashboard applications.
## 1. Required packages
- Install the [dashboardthemes](https://github.com/nik01010/dashboardthemes) R package from GitHub.
- Load the package within your application code:
```R
library(dashboardthemes)
```
## 2. Create a Shiny Module
- Copy the below Shiny Module code.
- Create a new script called 'moduleChangeTheme.R' within your project and paste the code inside.
- Source the module within your application using source("./YourDirectory/moduleChangeTheme.R")
```R
# Ui functions ------------------------------------------------------------
uiChangeThemeDropdown <- function(dropDownLabel = "Change Theme", defaultTheme = "grey_light")
{
changeThemeChoices <- c(
"Blue gradient" = "blue_gradient",
"Flat Red" = "flat_red",
"Grey light" = "grey_light",
"Grey dark" = "grey_dark",
"OneNote" = "onenote",
"Poor man's Flatly" = "poor_mans_flatly",
"Purple gradient" = "purple_gradient"
)
ns <- NS("moduleChangeTheme")
dropdown <- tagList(
selectizeInput(
inputId = ns("dbxChangeTheme"),
label = dropDownLabel,
choices = changeThemeChoices,
selected = defaultTheme
)
)
return(dropdown)
}
uiChangeThemeOutput <- function()
{
ns <- NS("moduleChangeTheme")
themeOutput <- tagList(
uiOutput(ns("uiChangeTheme"))
)
return(themeOutput)
}
# Server functions --------------------------------------------------------
serverChangeTheme <- function(input, output, session)
{
observeEvent(
input$dbxChangeTheme,
{
output$uiChangeTheme <- renderUI({
shinyDashboardThemes(theme = input$dbxChangeTheme)
})
}
)
}
```
## 3. Ui changes
In the Ui part of your application:
- Insert the uiChangeThemeOutput() function within the body of the application.
- This will ensure the CSS styles sent by the server part of the application are received and applied in real-time.
```R
...
# Body --------------------------------------------------------------------
body = dashboardBody(
# Custom theme ------------------------------------------------------------
uiChangeThemeOutput(),
# Ui tabs -----------------------------------------------------------------
tabItems(
...
```
- Insert the uiChangeThemeDropdown() function where you want the live theme switcher drop-down to be displayed.
- This will create a drop-down with Id 'dbxChangeTheme', which can be monitored in the server part of the application.
```R
...
# Tab content -------------------------------------------------------------
tabItem(
tabName = "tabThemes",
fluidRow(
column(
width = 12,
# Theme drop-down ---------------------------------------------------------
uiChangeThemeDropdown()
)
...
```
- Alternatively, it's possible to change the default drop-down label and default selected theme by changing the dropDownLabel and defaultTheme parameters respectively.
```R
...
uiChangeThemeDropdown(dropDownLabel = "Your Label", defaultTheme = "onenote")
...
```
## 4. Server changes
In the Server part of your application:
- Call the Shiny Module created above using the callModule() function.
- This will create an ObserveEvent that monitors the 'dbxChangeTheme' drop-box created within the Ui, and dynamically inject CSS styles into the application in real-time.
```R
server <- function(input, output, session) {
...
# Changing theme ----------------------------------------------------------
callModule(module = serverChangeTheme, id = "moduleChangeTheme")
...
}
```