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
_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
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
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.
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables.
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.