CSS Variables

Similar to the core Bootstrap framework, Linear Admin employs CSS custom properties (variables) for managing its color-mode specific attributes. To simplify this process, Linear Admin incorporates a custom SCSS mixin, using an SCSS map to store all the values associated with light and dark modes.

$theme-custom-properties: (
  "border-50": rgba(115, 186, 226, 0.1) rgba(darken($dark-highlight, 18%), 0.1),
  "border-100": rgba(115, 186, 226, 0.2) rgba(darken($dark-highlight, 18%), 0.2),
  "border-200": rgba(115, 186, 226, 0.4) rgba(darken($dark-highlight, 18%), 0.75),
  "border-300": rgba(115, 186, 226, 0.6) rgba(darken($dark-highlight, 18%), 0.99),
  ...
)

The provided example illustrates the generation of CSS variables using an SCSS map. In this map, each property includes two values: the first value corresponds to the default light mode, while the second is for dark mode. The activation of this map is accomplished through the use of the SCSS mixin called generate-custom-properties().

@include generate-custom-propterties($theme-custom-properties);

You can subsequently use these CSS variables in your CSS/SCSS by incorporating them as values.

e.g:

.search {
  border: 1px solid var(--border-100);

  &:focus {
    border-color: var(--border-300);
  }
}

You can locate the main SCSS map responsible for color modes in /src/scss/_theme.scss. Feel free to add new values or modify existing ones according to your template needs.

SCSS

Linear Admin’s CSS is built on SCSS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. On the Bootstrap side, for better custotomization, Linear Admin uses Bootstrap’s SCSS source files and those are further modified and extended in /src/scss/scss/vendors/bootstrap/_variables.scss.

The SCSS files are structured in a modular manner to simplify the process of finding and making style updates.

scss/
  ├── style.scss
  ├── _variables.scss
  ├── _mixins.scss
  ├── _base.scss
  ├── _font.scss
  ├── _form.scss
  ├── _misc.scss
  ├── _code.scss
  ├── _layout.scss
  ├── _pages.scss
  ├── _print.scss
  ├── _header.scss
  ├── _sidebar.scss
  ├── _nav-bar.scss
  ├── _table.scss
  ├── _theme.scss
  └── vendors/
         ├── bootstrap/
         ├── _nouislider.scss
         ├── _jsvectormap.scss
         ├── _quill.scss
         └── ...

style.scss: The primary style file incorporates all the sub-SCSS imports alongside the original Bootstrap styles.

_variables: This file contains all the custom variables used in Linear Admin.

_mixins: This file contains all the custom mixins used in Linear Admin.

vendors: Within this directory, you will find style override files for third-party plugins including Bootstrap.

vendors/bootstrap: Bootstarp source SCSS files and it’s overrides are located here.

Font

Linear Admin uses Roboto Contensed as the default font for both body copy and headings. It’s a google font from https://fonts.google.com/specimen/Roboto+Condensed. For monospace, SFMono-Regular is used.

If you want to change the default font to any other:

1. Copy your new web-font files to /src/fonts/
2. Include the @font-face rule in /src/scss/_font.scss/
3. Update the $font-family-sans-serif SCSS variable in /src/scss/vendors/bootstrap/_variables.scss

Example:

$font-family-sans-serif: 'Nunito';