Thanks to assets/main/scss/_variables.scss, we have the ability to change the default SCSS variables of theme and Bootstrap.

Why SCSS Variables?#

Although we can override the CSS via assets/main/scss/_custom.scss, this will eventually increase the size of CSS bundle, however the SCSS variable does not in most cases.

For example, there is a default animation for logo on hover.

.top-app-bar .logo:hover {
    transform: rotate(-5deg) scale(1.1);
}

It’s able to disable it via custom SCSS.

.top-app-bar {
    .logo {
        &:hover {
            transform: none;
        }
    }
}

But the previous style which we don’t need still present in CSS bundle, since we just overrided it by the custom SCSS.

.top-app-bar .logo:hover {
    transform: none;
}

.top-app-bar .logo:hover {
    transform: rotate(-5deg) scale(1.1);
}

And the SCSS variables will not generate unused style into CSS bundle.

$logo-animation: false;

Smaller CSS bundle size means better performance, so we recommend using SCSS variables when possible.

Bootstrap SCSS Variables#

You can find the Bootstrap built-in SCSS variables from source code and official documentations.

Theme SCSS Variables#

Palettes#

Palette Variable
Blue $palette-blue
Blue Gray $palette-blue-gray
Brown $palette-brown
Cyan $palette-cyan
Green $palette-green
Indigo $palette-indigo
Orange $palette-orange
Pink $palette-pink
Purple $palette-purple
Red $palette-red
Teal $palette-teal
Yello $palette-yellow

Options#

Variable Default Value Description
$code-select true Select <code> content on click, except code block.
$logo-animation true Enable/Disable the default animation for logo.
$table-hover true Table hoverable.
$table-bordered true Bordered table.