| version |
alpha |
| name |
LobeHub (Dark) |
| description |
LobeHub's design system — Dark theme. Same semantic token names as the Light theme (DESIGN.md) with dark values. Tokens are themeable (cssVar key `lobe-vars`); components must read the semantic tokens, never hard-code hex. Only colors change between themes — typography, spacing, radius, controls, motion, shapes, components, voice, and the design values are identical to DESIGN.md. |
| themeable |
| primaryColor |
neutralColor |
| default |
options |
|
red |
orange |
gold |
yellow |
lime |
green |
cyan |
blue |
geekblue |
purple |
magenta |
volcano |
|
|
| default |
options |
|
mauve |
slate |
sage |
olive |
sand |
|
|
|
| colors |
| colorPrimary |
colorSuccess |
colorWarning |
colorError |
colorInfo |
colorText |
colorTextSecondary |
colorTextTertiary |
colorTextQuaternary |
colorBgLayout |
colorBgContainer |
colorBgContainerSecondary |
colorBgElevated |
colorBgSpotlight |
colorBorder |
colorBorderSecondary |
colorFill |
colorFillSecondary |
colorFillTertiary |
colorFillQuaternary |
#eeeeee |
#c4f042 |
#ffb224 |
#f4416c |
#60b1ff |
#ffffff |
#aaaaaa |
#6f6f6f |
#555555 |
#000000 |
#0d0d0d |
#070707 |
#1a1a1a |
#2d2d2d |
#202020 |
#1a1a1a |
rgba(255, 255, 255, 0.16) |
rgba(255, 255, 255, 0.1) |
rgba(255, 255, 255, 0.06) |
rgba(255, 255, 255, 0.02) |
|
| elevation |
| boxShadowTertiary |
boxShadowSecondary |
boxShadow |
0 3px 1px -1px rgba(26, 26, 26, 0.06) |
0 8px 16px -4px rgba(0, 0, 0, 0.2) |
0 20px 20px -8px rgba(0, 0, 0, 0.24) |
|
| typography |
| fontFamily |
fontFamilyCode |
fontSizeSM |
fontSize |
fontSizeLG |
fontSizeXL |
lineHeight |
lineHeightSM |
fontSizeHeading1 |
fontSizeHeading2 |
fontSizeHeading3 |
fontSizeHeading4 |
fontSizeHeading5 |
fontWeightStrong |
Geist, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif |
"Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Cascadia Code", Consolas, "HarmonyOS Sans SC", monospace |
12 |
14 |
16 |
20 |
1.5714 |
1.6667 |
38 |
30 |
24 |
20 |
16 |
600 |
|
| spacing |
| XXS |
XS |
SM |
base |
MD |
LG |
XL |
4 |
8 |
12 |
16 |
20 |
24 |
32 |
|
| radius |
| borderRadiusXS |
borderRadiusSM |
borderRadius |
borderRadiusLG |
4 |
6 |
8 |
12 |
|
| controls |
| controlHeightSM |
controlHeight |
controlHeightLG |
28 |
36 |
40 |
|
This is the Dark theme of LobeHub's design system. It is the companion to DESIGN.md (Light) and shares everything but color: the same semantic token names, the same typography, spacing, radius, control, motion, shape, component, and voice rules, and the same four design values (Natural · Meaningful · Certainty · Growth).
Read this file for the dark color values; read DESIGN.md for all the guidance prose, which is theme-independent. As always: consume semantic tokens by name (cssVar.colorText, cssVar.colorBgContainer, …) so components follow the user's theme automatically — never hard-code the hex values below.
Dark uses the same semantic-token model as Light, with the values inverted around a near-black canvas. A few things specific to dark:
- Surfaces lift as they rise. The page canvas
colorBgLayout is pure black (#000000); colorBgContainer (#0d0d0d) sits above it, and colorBgElevated (#1a1a1a) is lighter still for popovers, menus, and modals. Depth reads through getting lighter, the opposite of light theme. Keep colorBgLayout and colorBgContainer distinct — don't flatten the stack.
- Text is solid
gray-scale neutrals, not translucent: colorText #ffffff → colorTextSecondary #aaaaaa → colorTextTertiary #6f6f6f → colorTextQuaternary #555555 (disabled). Rank information with this ramp rather than with color.
- Borders and fills stay translucent white (
colorFill*, rgba(255,255,255,…)), so they layer correctly over any dark surface. Use colorBorderSecondary for the everyday divider and colorBorder for a stronger edge.
colorPrimary is monochrome by default — near-white (#eeeeee) in dark — and only takes on a hue when the user picks a primary color, keeping the default UI calm.- Functional hues shift for dark legibility. Dark draws
colorError from red and colorInfo from blue (Light uses volcano and geekblue), and colorSuccess brightens to lime. This is intentional — read the token, not a fixed hue.
For elevation, motion, shapes, components, typography, layout, voice, and the do's and don'ts, see DESIGN.md — they apply unchanged in dark.