New

Uniform CSS has now been officially released!
Read more


Theme Settings

Set global settings to match your theme.


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.

Setting Description
colors Set of base colors
gradients Set of gradients
lightness-levels Set of lightness levels
opacity-levels Set of opacity-levels
screens Set of breakpoints
positive-sizes Set of positive sizes
negative-sizes Set of negative sizes
range-limits Specify the range limits for size properties
shadows Set of shadows
radiuses Set of radiuses
font-families Set of font-families
font-sizes Set of font-sizes
font-weights Set of font-weights
leadings Set of line-heights
trackings Set of letter-spacings
keyframes Set of keyframes

Overriding Theme Settings

To override base theme settings, pass key value pairs to each setting in your configuration. Passing in a key that already exists 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 all default Uniform settings. If you wish to disable defaults and apply your own, you can do so by applying your own theme settings to the extend map.

// main.scss
@use "uniform" as * with (
$config: (
colors: null,
extend: (
colors: (
mainRed: red,
mainBlue: blue
)
)
)
);
/* main.css */
.bg-mainRed { background-color: red; }
.bg-mainBlue { background-color: blue; }