Skip to main content

Styling

Scarlet is styled using SCSS, using grass compiler to compile SCSS into CSS. The reference documentation for each widget provides insight into the CSS classes which they are given.

When the style.scss file is modified, Scarlet will automatically reload and apply the updated styles. If a directory is specified to the --styles-watch-directory flag, any modifications in the given directory will cause the styles to be reloaded. This is useful when a root style.scss file imports other files in the same directory or subdirectories.

For a reference configuration, check out my styles in my configuration.

Creating the SCSS file​

By default, Scarlet will not create a style.scss file and will run using the styling provided by the system GTK theme.

Create a new style.scss file in ~/.config/scarlet

cd ~/.config/scarlet

touch style.scss

Styling guidelines​

Unsetting styles​

If you do not want to use your GTK theme to style your shell, unset all CSS styles as shown below.

/* style.scss */
* {
    all: unset;
}

Imports​

When importing other SCSS files into your main style file, ensure that these files can be found, either with a relative path or on an absolute path. If the path is relative, ensure that the files are in the expected locations. This can mitigate a problem caused by symlinking a style.scss file using home-manager, and is explained in the nix section.