Skip to main content

Night mode

If you use Sass to develop, there is a predefined placeholder selector for night mode, this file is in /scss/helpers/_night.scss, in this file the %dark-mode selector is defined you can create your selectors by extending it.
Here is an example of a dark mode selector:

style.scss
html.dark {
  @extend %dark-mode;
}
// or
html[data-theme="dark"] {
  @extend %dark-mode;
}

Now if the <html> tag has the .dark class or data-theme="dark" attribute, the dark mode will be applied.
Note that you should extend this selector as <html> tag because it changes CSS variables that are defined as the :root.