Theme Settings

Theme Settings

The theme setting are a set of values that are shared across multiple properties or specific to your project such as, sizing units, fonts, and colors.

Theme Setting Usage

Theme settings are shared across multiple CSS properties.

// main.scss
@use "uniform" as * with (
  $config: (
    colors: (
      custom: #B20000,
    )
  )
);

/* main.css */
.bg-custom { background-color: #B20000; }
.color-custom { color: #B20000; }
.border-custom { border-color: #B20000; }
...

Default Theme Settings

Uniform CSS comes pre-set with default theme settings which are applied across its relevant properties. Theme settings are unique in that its values can be accessed using api functions.

// main.scss
@use "uniform" as * with (
  $config: (
    colors: ( ... ),
    screens: ( ... ),
  )
);

Theme Settings Table

The following theme setting definitions apply.

Overriding Theme Settings

To override base theme settings, pass key value pairs to each setting in your configuration. If your key already exists it will override the existing value.

// main.scss
@use "uniform" as * with (
  $config: (
    colors: (
      red: #B20000,
      ...
    ),
    leadings: (
      loose: 1.6,
      ...
    )
  )
);

/* main.css */
.bg-red { background-color: #B20000; }
.color-red { color: #B20000; }
.border-red { color: #B20000; }
.leading-loose { line-height: 1.6 }
...

Disabling Theme Settings

Passing in null will disable default settings. Additionally, you can pass in your own theme settings under the extend setting in your configuration.

// main.scss
@use "uniform" as * with (
  $config: (
    colors: null,
    gradients: null,

    extend: (
      colors: (
        primary: #0054CB
      ),
      gradients: (...),
      opacities: (...)
    )
  )
);