├── doc
    └── live_theme_switcher.png
├── moduleChangeTheme.R
└── README.md


/doc/live_theme_switcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nik01010/dashboardThemeSwitcher/HEAD/doc/live_theme_switcher.png


--------------------------------------------------------------------------------
/moduleChangeTheme.R:
--------------------------------------------------------------------------------
 1 | # Ui functions ------------------------------------------------------------
 2 |   uiChangeThemeDropdown <- function(dropDownLabel = "Change Theme", defaultTheme = "grey_light")
 3 |   {
 4 |     changeThemeChoices <- c(
 5 |       "Blue gradient" = "blue_gradient",
 6 |       "Flat Red" = "flat_red",
 7 |       "Grey light" = "grey_light",
 8 |       "Grey dark" = "grey_dark",
 9 |       "OneNote" = "onenote",
10 |       "Poor man's Flatly" = "poor_mans_flatly",
11 |       "Purple gradient" = "purple_gradient"
12 |     )
13 | 
14 |     ns <- NS("moduleChangeTheme")
15 |     dropdown <- tagList(
16 |       selectizeInput(
17 |         inputId = ns("dbxChangeTheme"),
18 |         label = dropDownLabel,
19 |         choices = changeThemeChoices,
20 |         selected = defaultTheme
21 |       )
22 |     )
23 | 
24 |     return(dropdown)
25 |   }
26 | 
27 |   uiChangeThemeOutput <- function()
28 |   {
29 |     ns <- NS("moduleChangeTheme")
30 |     themeOutput <- tagList(
31 |       uiOutput(ns("uiChangeTheme"))
32 |     )
33 | 
34 |     return(themeOutput)
35 |   }
36 | 
37 | 
38 |   # Server functions --------------------------------------------------------
39 |   serverChangeTheme <- function(input, output, session)
40 |   {
41 |     observeEvent(
42 |       input$dbxChangeTheme, 
43 |       {
44 |         output$uiChangeTheme <- renderUI({
45 |           shinyDashboardThemes(theme = input$dbxChangeTheme)
46 |         })
47 |       }
48 |     )
49 |   }
50 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # dashboardThemeSwitcher
  2 | 
  3 | 
  4 | An example of how to create a live theme switcher for R Shinydashboard applications.
  5 | 
  6 | <br>
  7 | 
  8 | ![live_theme_switcher](doc/live_theme_switcher.png)
  9 | 
 10 | 
 11 | ## 1. Required packages
 12 | - Install the [dashboardthemes](https://github.com/nik01010/dashboardthemes) R package from GitHub.
 13 | - Load the package within your application code:
 14 | ```R
 15 | library(dashboardthemes)
 16 | ```
 17 | 
 18 | ## 2. Create a Shiny Module
 19 | - Copy the below Shiny Module code.
 20 | - Create a new script called 'moduleChangeTheme.R' within your project and paste the code inside.
 21 | - Source the module within your application using source("./YourDirectory/moduleChangeTheme.R")
 22 | ```R
 23 |   # Ui functions ------------------------------------------------------------
 24 |   uiChangeThemeDropdown <- function(dropDownLabel = "Change Theme", defaultTheme = "grey_light")
 25 |   {
 26 |     changeThemeChoices <- c(
 27 |       "Blue gradient" = "blue_gradient",
 28 |       "Flat Red" = "flat_red",
 29 |       "Grey light" = "grey_light",
 30 |       "Grey dark" = "grey_dark",
 31 |       "OneNote" = "onenote",
 32 |       "Poor man's Flatly" = "poor_mans_flatly",
 33 |       "Purple gradient" = "purple_gradient"
 34 |     )
 35 | 
 36 |     ns <- NS("moduleChangeTheme")
 37 |     dropdown <- tagList(
 38 |       selectizeInput(
 39 |         inputId = ns("dbxChangeTheme"),
 40 |         label = dropDownLabel,
 41 |         choices = changeThemeChoices,
 42 |         selected = defaultTheme
 43 |       )
 44 |     )
 45 | 
 46 |     return(dropdown)
 47 |   }
 48 | 
 49 |   uiChangeThemeOutput <- function()
 50 |   {
 51 |     ns <- NS("moduleChangeTheme")
 52 |     themeOutput <- tagList(
 53 |       uiOutput(ns("uiChangeTheme"))
 54 |     )
 55 | 
 56 |     return(themeOutput)
 57 |   }
 58 | 
 59 | 
 60 |   # Server functions --------------------------------------------------------
 61 |   serverChangeTheme <- function(input, output, session)
 62 |   {
 63 |     observeEvent(
 64 |       input$dbxChangeTheme, 
 65 |       {
 66 |         output$uiChangeTheme <- renderUI({
 67 |           shinyDashboardThemes(theme = input$dbxChangeTheme)
 68 |         })
 69 |       }
 70 |     )
 71 |   }
 72 | ```
 73 | 
 74 | 
 75 | ## 3. Ui changes
 76 | In the Ui part of your application:
 77 | - Insert the uiChangeThemeOutput() function within the body of the application.
 78 | - This will ensure the CSS styles sent by the server part of the application are received and applied in real-time.
 79 | ```R
 80 |   ...
 81 |   # Body --------------------------------------------------------------------
 82 |   body = dashboardBody(
 83 | 
 84 |     # Custom theme ------------------------------------------------------------
 85 |     uiChangeThemeOutput(),
 86 | 
 87 |     # Ui tabs -----------------------------------------------------------------
 88 |     tabItems(
 89 |       ...
 90 | ```
 91 | - Insert the uiChangeThemeDropdown() function where you want the live theme switcher drop-down to be displayed.
 92 | - This will create a drop-down with Id 'dbxChangeTheme', which can be monitored in the server part of the application.
 93 | ```R
 94 |   ...
 95 |   # Tab content -------------------------------------------------------------
 96 |   tabItem(
 97 |     tabName = "tabThemes",
 98 |     fluidRow(
 99 |       column(
100 |         width = 12,
101 | 
102 |         # Theme drop-down ---------------------------------------------------------
103 |         uiChangeThemeDropdown()
104 |       )
105 |       ...
106 | ```
107 | - Alternatively, it's possible to change the default drop-down label and default selected theme by changing the dropDownLabel and defaultTheme parameters respectively.
108 | ```R
109 |   ...
110 |   uiChangeThemeDropdown(dropDownLabel = "Your Label", defaultTheme = "onenote")
111 |   ...
112 | ```
113 | 
114 | 
115 | ## 4. Server changes
116 | In the Server part of your application:
117 | - Call the Shiny Module created above using the callModule() function.
118 | - 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.
119 | ```R
120 |   server <- function(input, output, session) {
121 |     ...
122 |     # Changing theme ----------------------------------------------------------
123 |     callModule(module = serverChangeTheme, id = "moduleChangeTheme")
124 |     ...
125 |   }
126 | ```
127 | 


--------------------------------------------------------------------------------