Concepts

Dark mode

Here is a brief introduction to how to create a dark theme by changing only the palette and colors.

This is not a complete documentation of dark mode. We will add it soon for full understanding and clarity.

Superkube generates css variables for color. So it allows you to automatically change the light and dark color scheme. Or change it using Javascript with just one class for the html tag, without reloading the page.

For Dark mode, you need to create a corresponding $palette-dark palette, which will have alternative colors to the $palette.


$palette-dark: (
    black: {color},
    white: {color},
    primary: (
        base: {color}
    )
);

And use colors from $palette-dark in $colors-dark. For example, here is how to set the color of the text:


$colors-dark: (
    ...
    text: (
        default: palette-dark(white-o, 80)
    )
    ...
);

If the variable $dark-class is null in basis.scss. Then the color scheme will be shown depending on the settings of the operating system.

If you specify a class in the variable $dark-class, for example, this way:


$dark-class: 'dark-ui';

Then using Javascript you can set for html tag this class and colors will be changed to dark theme.


<html class="dark-ui">...</html>