Background
Category: BasicUse _bg[-*] style classes to independently define section background colors. Supports color schemes including prim, succ, error, etc. Additionally, _bg-stage can be used for the current page's background color scheme (defaults to white).
Basic Usage
Use _bg to add stage color background (white) to elements. Append *-lt suffix to add light background color. This style only modifies the background-color property.
_bg and _bg-lt have the same effect as _bg-stage and _bg-stage-lt.
Color Themes
Solid backgrounds come in dark and light variants. Dark background style classes include: _bg-prim, _bg-error, _bg-succ, _bg-info, _bg-warn, _bg-issue, _bg-text, _bg-brief, _bg-caption, _bg-disable. Append -lt suffix for light backgrounds.
- Output
- HTML
-
- _bg-prim
- _bg-error
- _bg-succ
- _bg-info
- _bg-warn
- _bg-issue
- _bg-text
- _bg-brief
- _bg-caption
- _bg-disable
- _bg-prim-lt
- _bg-error-lt
- _bg-succ-lt
- _bg-info-lt
- _bg-warn-lt
- _bg-issue-lt
- _bg-text-lt
- _bg-brief-lt
- _bg-caption-lt
- _bg-disable-lt
-
Additional Colors
The framework also provides several special colors:
- _bg-stage: Main background color (usually white), changes with dark mode
- _bg-white: Pure white (100%), remains constant
- _bg-black: Pure black (100%), remains constant
- _bg-mask: Mask color with transparency
- _bg-text-sta: Deep black for body text, remains constant
Related Classes
The framework provides a set of background style classes:
| Class Name | Description | Example & Notes |
|---|---|---|
| _bg | Stage color (same as _bg-stage) | <div class="_bg"></div> |
| _bg-prim[-lt] | Primary theme background | -lt suffix for light variant |
| _bg-error[-lt] | Error theme background | - |
| _bg-succ[-lt] | Success theme background | - |
| _bg-info[-lt] | Info theme background | - |
| _bg-warn[-lt] | Warning theme background | - |
| _bg-issue[-lt] | Issue theme background | - |
| _bg-text[-lt] | Text theme background | - |
| _bg-brief[-lt] | Brief theme background | - |
| _bg-caption[-lt] | Caption theme background | - |
| _bg-disable[-lt] | Disabled state background | - |
| _bg-stage | Body background color | White by default, changes with dark mode |
| _bg-mask | Mask color (black) | Remains constant |
| _bg-white | 100% white background | Remains constant |
| _bg-black | 100% black background | Remains constant |
| _bg-text-sta | Static body text background | Remains constant |