Sass

Styling

Utilize our source Sass files to take advantage of variables, mixins and more. Whenever possible avoid modifying Dashly theme's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so that you can modify and extend it.

To avoid file loss, overrides of your custom styles or any other conflicts during an upgrade process, create or modify your styles with these 2 files within dashly/theme/src/scss/ folder:

• _user-variables.scss - Variables file for customizing or overriding Bootstrap core and Dashly elements/components that have been tied to variables.
• _user.scss - For additional custom styles.

Every Sass variable in Dashly includes the !default flag allowing you to override the variable's default value in your own Sass without modifying either Bootstrap or Dashly's source code. Copy and paste variables as needed, modify their values and remove the !default flag. If a variable has already been assigned then it won't be re-assigned by the default values in Dashly.

You will find the complete list of Dashly's variables in dashly/theme/src/scss/theme/_variables.scss.
Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Dashly's Sass files.

Here's an example that changes the color of the template in the dashly/theme/src/scss/_user-variables.scss file when importing and compiling Dashly via npm:

// Your variable overrides
$primary: #d138f2;
$secondary: #191919;

Variables for Dark mode can be found in the _variables-dark.scss file. You can also override it in your own _user-variables.scss file.

CSS Variables

Bootstrap and Dashly includes many CSS custom properties (variables) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping.

All our custom properties are prefixed with bs- to avoid conflicts with third party CSS. Learn more about CSS variables on Bootstrap.

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables.

Grays

An expansive set of gray variables and a Sass map in dashly/theme/src/scss/theme/_variables.scss for consistent shades of gray across your project.