Customize Theme

We recommend customizing FlatDash Admin through .scss files compiled with as described in the Getting Started > Build guide above.

All SCSS files are found in src/sass.

color_lens
Color Override

For changing the theme colors and style we recommend using the user-variables.scss file and setting the same variables found in _variables.scss overiding them.

Chart colors need to be edited in src/js/settings.js

SCSS Breakdown:

  • app.scss - Main File compiled containing in exact order

    • google font:
      @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
    • variables:
      @import './variables';
    • bootstrap:
      @import 'bootstrap/scss/bootstrap';
    • mdk - Interactive web components inspired from Material Design
      @import 'material-design-kit/src/style';
    • components & apps
      @import ...
    • pages
      @import ...
  • vendor-[name] .scss - Are vendor/plugin files individually compiled and loaded where plugins are needed.
Documentation