# Dark Theme Provider Examples and Reference

### Default Dark Theme Provider

An example of a default dark theme provider without any extra properties.

    library(dash)
    library(dashDaq)
    library(dashHtmlComponents)

    app <- Dash$new()

    theme <- list(
      'dark' = TRUE,
      'detail' = '#007439',
      'primary' = '#00EA64',
      'secondary' = '#6E6E6E'
    )

    rootLayout <- htmlDiv(list(
      daqBooleanSwitch(
        on = TRUE,
        id = 'darktheme-daq-booleanswitch',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqToggleSwitch(
        id = 'darktheme-daq-toggleswitch',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqColorPicker(
        value = 17,
        id = 'darktheme-daq-colorpicker',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqGauge(
        min = 0,
        max = 10,
        value = 6,
        color = theme[['primary']],
        id = 'darktheme-daq-gauge',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqGraduatedBar(
        value = 4,
        color = theme[['primary']],
        id = 'darktheme-daq-graduatedbar',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqIndicator(
        value = TRUE,
        color = theme[['primary']],
        id = 'darktheme-daq-indicator',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqKnob(
        min = 0,
        max = 10,
        value = 6,
        color = theme[['primary']],
        id = 'darktheme-daq-knob',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqLEDDisplay(
        value = "3.14159",
        color = theme[['primary']],
        id = 'darktheme-daq-leddisplay',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqNumericInput(
        min = 0,
        max = 10,
        value = 4,
        id = 'darktheme-daq-numericinput',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqPowerButton(
        on = TRUE,
        color = theme[['primary']],
        id = 'darktheme-daq-powerbutton',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqPrecisionInput(
        precision = 4,
        value = 299792458,
        id = 'darktheme-daq-precisioninput',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqStopButton(
        id = 'darktheme-daq-stopbutton',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqSlider(
        min = 0,
        max = 100,
        value = 30,
        targets = list("25" = list("label" = "TARGET")),
        color = theme[['primary']],
        id = 'darktheme-daq-slider',
        className = 'dark-theme-control'
      ), htmlBr(),
      daqTank(
        min = 0,
        max = 10,
        value = 5,
        id='darktheme-daq-tank',
        color = theme[['primary']],
        className = 'dark-theme-control'
      ), htmlBr(),
      daqThermometer(
        min = 95,
        max = 105,
        value = 98.6,
        id = 'darktheme-daq-thermometer',
        className = 'dark-theme-control',
        color = theme[['primary']],
      ), htmlBr()
    ))

    app$layout(htmlDiv(
      id = 'dark-theme-container',
      style = list('padding' = '50px'),
      children = list(
        daqToggleSwitch(
          id = 'toggle-theme',
          label = list('Light', 'Dark'),
          value = TRUE
        ),
        htmlBr(),
        htmlDiv(
          id = 'theme-colors',
          children = list(
            daqColorPicker(
              id = 'primary-color',
              label = 'Primary color',
              value = list(hex = '#00EA64')
            ),
            daqColorPicker(
              id = 'secondary-color',
              label = 'Accent color',
              value = list(hex = '#6E6E6E')
            ),
            daqColorPicker(
              id = 'detail-color',
              label = 'Detail color',
              value = list(hex = '#007439')
            )
          )
        ),
        htmlDiv(
          id = 'dark-theme-components',
          children = list(daqDarkThemeProvider(theme = theme,
                                               children = rootLayout)),
          style = list(
            'border' = 'solid 1px #A2B1C6',
            'border-radius' = '5px',
            'padding' = '50px',
            'marginTop' = '20px'
          )
        )
      )
    ))

    app$callback(
      output(id = "dark-theme-components", property = "children"),
      params = list(input(id = "toggle-theme", property = "value"),
                    input(id = "primary-color", property = "value"),
                    input(id = "secondary-color", property = "value"),
                    input(id = "detail-color", property = "value")
                    ),

      turn_dark <- function(dark, p, s, d) {
        if (dark) {
          theme[['dark']] <- TRUE
        } else {
          theme[['dark']] <- FALSE
        }

        if (length(p) > 0) {
          theme[['primary']] <- p$hex

          # When rootLayout child has color property, update to p$hex
          rootLayout <- lapply(
            1:length(rootLayout[[1]]$children),
              function(i) {
                if (length(rootLayout[[1]]$children[[i]]$props$color) > 0) {
                  rootLayout[[1]]$children[[i]]$props$color <- p$hex
                  rootLayout[[1]]$children[[i]]
                } else {
                  rootLayout[[1]]$children[[i]]
                }
              })
        }
        if (length(s) > 0) {
          theme[['secondary']] <- s$hex
        }
        if (length(d) > 0) {
          theme[['detail']] <- d$hex
        }
        return(daqDarkThemeProvider(theme = theme, children = rootLayout))
      }
    )

    app$callback(
      output(id = "dark-theme-components", property = "style"),
      params = list(input(id = "toggle-theme", property = "value"),
                    state(id = "dark-theme-components", property = "style")),

      switch_bg <- function(dark, currentStyle) {

        if (dark) {
          currentStyle[['backgroundColor']] <- '#303030'

        }
        else {
          currentStyle[['backgroundColor']] <- 'white'
          }

        return(currentStyle)

      }
    )

    app$run_server()

Light
Dark
Primary color
hex
Accent color
hex
Detail color
hex
hex
2
.
9
9
8
E
8
TARGET
0
2
4
6
8
10
95
97
99
101
103
105

## DarkThemeProvider Properties

> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.

`children` (unnamed list of unnamed list of or a singular dash component, character or numerics | unnamed list of or a singular dash component, character or numeric; optional): The children of this component.

`theme` (named list; optional): Theme object to override with a custom theme.

`theme` is a named list with keys:

- `dark` (logical; optional): True for Dark mode, FALSE for Light.

- `detail` (character; optional): Color used for UI details, like borders.

- `primary` (character; optional): Highlight color.

- `secondary` (character; optional): Supporting color.