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 Front Template -->
              <!-- bundlecss:theme [@@autopath] @@vars.version -->
              <link rel="preload" href="@@autopath/assets/css/theme.css" data-hs-appearance="default" as="style">
              <link rel="preload" href="@@autopath/assets/css/theme-dark.css" data-hs-appearance="dark" as="style">

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

                  body {
                      opacity: 0;
                  }
              </style>

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

                
              <script src="@@autopath/assets/js/hs.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 -->

HSThemeAppearance

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

A method of the HSThemeAppearance 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>
                HSThemeAppearance.setAppearance('dark')
              </script>

Sets auto appearance (based on your system settings):

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

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

Example

Get current appearance:

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

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

Example

Get current original name of the appearance:

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

Images

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

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

          <!-- Will be displayed on the dark appearance -->
          <img src="@@autopath/assets/svg/illustrations-light/oc-error.svg" alt="Image Description" data-hs-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-hs-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 HSThemeAppearance.setAppearance method.

Examples

Add a dark theme:

            
              <script>
                HSCore.components.HSChartJS.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>
                HSCore.components.HSChartMatrixJS.addTheme('chartjs-matrix', 'dark', {
                  options: {
                    scales: {
                      xAxes: [{
                        ticks: {
                          "fontColor": '#c5c8cc'
                        }
                      }],
                      yAxes: [{
                        ticks: {
                          "fontColor": '#c5c8cc'
                        }
                      }]
                    }
                  }
                })
              </script>

Events

on-hs-appearance-change
Overview

Event fires on appearances change.

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