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.

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

It’s able to disable it via custom SCSS.

1.top-app-bar {
2    .logo {
3        &:hover {
4            transform: none;
5        }
6    }
7}

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

1.top-app-bar .logo:hover {
2    transform: none;
3}
4
5.top-app-bar .logo:hover {
6    transform: rotate(-5deg) scale(1.1);
7}

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

1$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

PaletteVariable
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

VariableDefault ValueDescription
$code-selecttrueSelect <code> content on click, except code block.
$logo-animationtrueEnable/Disable the default animation for logo.
$table-hovertrueTable hoverable.
$table-borderedtrueBordered table.