Backgrounds

Background Color

Utilities for sets background color.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
bg-transparent	background-color: transparent
bg-white	background-color: #fff

CSS
bg-shade-`{palettes}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
bg-tone-`{palettes}`-`{modifier}`
bg-tint-`{palettes}`-`{modifier}`

Usage

Set basic background color to an element.

<div class="bg-shade-amber-4 ... width-32 height-32">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-shade-amber-4,
    .width-32,
    .height-32;
}

SCSS

Set default background color to <body> tag.

<body class="bg-shade-amber-4">
  ...
</body>

HTML

body {
  @extend
    .bg-shade-amber-4;
}

SCSS

Set auto dark theme enabled to an element with added (dark) prefix.

<div class="bg-gray-2 (dark)bg-charcoal-1 ... width-32 height-32">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-gray-2,
    .\(dark\)bg-charcoal-1,
    .width-32,
    .height-32;
}

SCSS