Dark Mode

Learn how to use and style your side in dark mode.

Quick Setup

  1. Add your initial stylesheet into the <head> after all other stylesheets. Like:

                
              <!-- CSS Catalyst Template -->
              <!-- bundlecss:theme [@@autopath] @@vars.version -->
              <link rel="preload" href="@@autopath/assets/css/theme.css" data-cs-appearance="default" as="style">
              <link rel="preload" href="@@autopath/assets/css/theme-dark.css" data-cs-appearance="dark" as="style">

              <style data-cs-appearance-onload-styles>
                  * {
                      transition: unset !important;
                  }

                  body {
                      opacity: 0;
                  }
              </style>

  2. Include the cs.theme-appearance.js script right after the open <head> tag:

                
              <script src="@@autopath/assets/js/cs.theme-appearance.js"></script>

  3. Include HTML partial inside your content containing dropdown component for appearance picker:

                
              <!-- Style Switcher -->
              @@include("@@autopath/layouts-components/darkmode-switcher.html", {
                "dropup": "true"
              })
              <!-- End Style Switcher -->

  4. Include HTML partial containing javascrit for dropdown component to pick appearance before the closing </body> tag:

                
              <!-- Style Switcher JS -->
              @@if (layoutBuilder.extend.switcherSupport === true) {
                @@include("@@autopath/partials/layouts-components/darkmode-switcher-js.html")
              }
              <!-- End Style Switcher JS -->

CSThemeAppearance

setAppearance
Parameters Description
appearance Appearance name that appears in the data-cs-appearance attribute inside the <head> tag.
Overview

A method of the CSThemeAppearance class that allows you to change appearance on the fly. This method takes the name appearance as a parameter.

Examples

Sets a dark appearance:

            
              <script>
                CSThemeAppearance.setAppearance('dark')
              </script>

Sets auto appearance (based on your system settings):

            
              <script>
                CSThemeAppearance.setAppearance('auto')
              </script>
getAppearance
Overview

A method of the CSThemeAppearance class that returns the name of the current appearance.

Example

Get current appearance:

            
              <script>
                CSThemeAppearance.getAppearance() // dark
              </script>
getOriginalAppearance
Overview

If the current appearance is set to auto (system settings), then dark/light will be returned from CSThemeAppearance.getAppearance(), but if we need to get the original name of the appearance state, then the CSThemeAppearance.getOriginalAppearance() method will help.

Example

Get current original name of the appearance:

            
              <script>
                CSThemeAppearance.getAppearance() // dark
                CSThemeAppearance.getOriginalAppearance() // auto
              </script>

Images

You can control the display of elements on different appearances with data-cs-theme-appearance attribute.

        
          <!-- Will be displayed on the default appearance -->
          <img src="@@autopath/assets/svg/illustrations/oc-error.svg" alt="Image Description" data-cs-theme-appearance="default">

          <!-- Will be displayed on the dark appearance -->
          <img src="@@autopath/assets/svg/illustrations-light/oc-error.svg" alt="Image Description" data-cs-theme-appearance="dark">

With switcher

ChartJS

For convenience and to save time, we have added the addTheme method.

addTheme
Parameters Description
chart ID ID is required for the chart to which you want to add a theme.
appearance Appearance name that appears in the data-cs-appearance attribute inside the <head> tag.
options Chart options for the specified appearance.
Overview

Allows you to add a chart theme and then apply the theme automatically when the appearance changes using the CSThemeAppearance.setAppearance method.

Examples

Add a dark theme:

            
              <script>
                CSCore.components.CSChartJS.addTheme('referrals-chart', 'dark', {
                  options: {
                    scales: {
                      yAxes: [{
                        gridLines: {
                          color: '#2f3235',
                          zeroLineColor: '#2f3235'
                        },
                        ticks: {
                          fontColor: '#c5c8cc',
                        }
                      }],
                      xAxes: [{
                        gridLines: {
                          color: '#2f3235'
                        },
                        ticks: {
                          fontColor: '#c5c8cc',
                        }
                      }]
                    }
                  }
                })
              </script>

Add a dark theme for matrix chart:

            
              <script>
                CSCore.components.CSChartMatrixJS.addTheme('chartjs-matrix', 'dark', {
                  options: {
                    scales: {
                      xAxes: [{
                        ticks: {
                          "fontColor": '#c5c8cc'
                        }
                      }],
                      yAxes: [{
                        ticks: {
                          "fontColor": '#c5c8cc'
                        }
                      }]
                    }
                  }
                })
              </script>

Events

on-cs-appearance-change
Overview

Event fires on appearances change.

Examples
            
              <script>
                window.addEventListener('on-cs-appearance-change', e => {
                  console.log(e.detail === 'dark' ? '#25282a' : '#fff')
                })
              </script>