Design Tokens

Tokens are the variables of the design language: colors, font sizes, spacing, radii, shadows, and animation durations are all named as --lh-* CSS variables, and components consume the names instead of hardcoding values. Re-skinning is just swapping tokens.

Three token layers

Layer	Location	Count	Evaluation time	Overridability
CSS variables · light	`:root` in `styles/theme/common/var.scss`	185	Runtime	✅ Override anywhere
CSS variables · dark	`[data-theme='dark'], .dark` in `styles/theme/common/var-dark.scss`	118	Runtime	✅
SCSS variables	`styles/theme/common/variables.scss`	183	Compile time	⚠️ Source edit + recompile only

Light tokens (var.scss)

:root {
  --lh-primary-color: #2B4C7C;
  --lh-text-primary: rgba(0, 0, 0, 0.88);
  --lh-bg-color: #FAF6F0;
  --lh-border-color: #e5e6eb;
  --lh-radius-base: 6px;
  --lh-spacing-base: 8px;
  // ... 185 entries
}

Dark overrides (var-dark.scss)

[data-theme='dark'],
.dark {
  --lh-bg-color: #2A2520;
  --lh-text-primary: #E8E0D8;
  --lh-border-color: #3A3530;
  // ... 118 entries
}

Dark mode is an override layer, not a separate set: it only writes the 118 tokens that need to flip; the rest keep their light values.

SCSS variables (variables.scss)

$lh-primary-color: #2B4C7C !default;
$lh-border-radius-base: 6px !default;
// ... 183 entries

SCSS variables exist to participate in compile-time computation: color mixing (mix() / shade()), shadow composition (adding multiple shadow layers) — things CSS variables cannot do. The cost is being baked at compile time, so they do not flip automatically in dark mode.

The layered structure of tokens

Tokens fall into three tiers — the first two live in the global theme files, the third in each component’s own stylesheet:

// 1. SCSS variables (variables.scss, compile time)
$lh-primary: #2B4C7C !default;
$lh-text-primary: #2C2C2C !default;

// 2. Global CSS variables (var.scss :root, 190 entries)
--lh-primary-color: #{$lh-primary};
--lh-text-primary: #{$lh-text-primary};
--lh-bg-color: #FAF6F0;

// 3. Component-level variables (the component's own scss, scoped to its BEM root)
.lh-card {
  --lh-card-bg: var(--lh-bg-color, #FAF6F0);
  --lh-card-border-radius: calc(var(--lh-border-radius-base, 2px) + 2px);
}

Key mechanisms:

Tiers 1 and 2 are linked by compile-time interpolation, not a var() chain: the value of --lh-primary-color is baked in at build time from $lh-primary — changing the SCSS variable at runtime has no effect (you must recompile). There is no separate “base palette” tier — no --lh-blue-6 color-step variables exist; semantic tokens are generated directly from the SCSS variables.
Two levers for re-skinning: edit the SCSS variables in variables.scss and recompile (affects every semantic token), or override the :root CSS variables at runtime (what ConfigProvider’s themeVars does — instant, no rebuild).
Tier 3 defaults to tier 2: component-level variables usually default to a var() reference of a global token (with a fallback), keeping them in sync with the theme while still allowing targeted per-component overrides via themeVars.

Semantic domains

The main semantic domains (see the token table below for the complete grouping):

Domain	Typical tokens	Purpose
Primary	`--lh-primary-color` / `-hover` / `-active` / `-bg` / `-border`	The five-piece brand primary set
Text	`--lh-text-primary` / `-secondary` / `-tertiary` / `-disabled`	Four-level text hierarchy
Background	`--lh-bg-color` / `-page` / `-secondary` / `-overlay`	Page / container / overlay
Border	`--lh-border-color` / `-light` / `-dark`	Strokes
Status	`--lh-success-color` / `-warning` / `-error` / `-danger` / `-info`	Five semantic colors
Radius	`--lh-radius-small` / `-base` / `-large` / `-circle`	Four radius steps
Spacing	`--lh-spacing-*`	8px-based scale
Font size	`--lh-font-size-*`	Font-size ramp
Shadow	`--lh-shadow-*`	Shadow elevation
Animation	`--lh-animation-duration-*` / `-timing-function`	Transition pacing
Decoration	`--lh-decoration-color`	Traditional Chinese decoration color

Full token table

主色与衍生语义

令牌	暗色	SCSS 源
`--lh-primary-color`	`#3D649E`	`$lh-primary`
`--lh-primary-color-hover`	`#5078AB`	`$lh-primary-hover`
`--lh-primary-color-active`	`#2B4C7C`	`$lh-primary-active`
`--lh-primary-color-bg`	`color-mix(in srgb, var(--lh-primary-color) 25%, transparent)`	`$lh-primary-light`
`--lh-primary-color-border`	`#2A3A4A`	`$lh-primary-lighter`
`--lh-color-on-primary`	`#fff`	`$lh-on-primary`

状态

令牌	明色	暗色	SCSS 源	备注
`--lh-hover-bg-color`		`rgba(255, 255, 255, 0.08)`	`$lh-hover-bg`
`--lh-selected-color`		`color-mix(in srgb, var(--lh-primary-color) 40%, #fff)`	—

功能色

令牌	暗色	SCSS 源
`--lh-success-color`	`#6FA36E`	`$lh-success`
`--lh-success-color-hover`	`#82B581`	`$lh-success-hover`
`--lh-success-color-active`	`#5B8C5A`	`$lh-success-active`
`--lh-success-color-bg`	`#1A2A1A`	`$lh-success-light`
`--lh-warning-color`	`#D4B76F`	`$lh-warning`
`--lh-warning-color-hover`	`#E0C680`	`$lh-warning-hover`
`--lh-warning-color-active`	`#C4A35A`	`$lh-warning-active`
`--lh-warning-color-bg`	`#2A251A`	`$lh-warning-light`
`--lh-danger-color`	`#C45050`	`$lh-danger`
`--lh-danger-color-hover`	`#D46060`	`$lh-danger-hover`
`--lh-danger-color-active`	`#B23A3A`	`$lh-danger-active`
`--lh-danger-color-bg`	`#2A1A1A`	`$lh-danger-light`
`--lh-info-color`	`#8F8F8F`	`$lh-info`
`--lh-info-color-hover`	`#A0A0A0`	`$lh-info-hover`
`--lh-info-color-active`	`#7A7A7A`	`$lh-info-active`
`--lh-info-color-bg`	`#1A1A1A`	`$lh-info-light`

国风装饰色

令牌	暗色	SCSS 源
`--lh-gold-color`	`#D4A843`	`$lh-gold`
`--lh-gold-color-hover`	`#E8C35C`	`$lh-gold-hover`
`--lh-gold-color-active`	`#B8860B`	`$lh-gold-active`
`--lh-gold-color-bg`	`#2A241A`	`$lh-gold-light`
`--lh-gold-color-border`	`#3A2E1A`	`$lh-gold-lighter`
`--lh-vermilion-color`	`#E85D4A`	`$lh-vermilion`
`--lh-vermilion-color-hover`	`#FF7B6B`	`$lh-vermilion-hover`
`--lh-vermilion-color-active`	`#C43A31`	`$lh-vermilion-active`
`--lh-vermilion-color-bg`	`#2A1A18`	`$lh-vermilion-light`
`--lh-jade-color`	`#7AAE7A`	`$lh-jade`
`--lh-jade-color-hover`	`#9CC89C`	`$lh-jade-hover`
`--lh-jade-color-active`	`#5B8C5A`	`$lh-jade-active`
`--lh-jade-color-bg`	`#1A2A1A`	`$lh-jade-light`
`--lh-decoration-color`	`rgba(212, 168, 67, 0.08)`	`$lh-decoration-color`

文本

令牌	暗色	SCSS 源
`--lh-text-primary`	`#E8E0D8`	`$lh-text-primary`
`--lh-text-regular`	`#C8C0B8`	`$lh-text-regular`
`--lh-text-secondary`	`#A09890`	`$lh-text-secondary`
`--lh-text-placeholder`	`#7A7270`	`$lh-text-placeholder`
`--lh-text-disabled`	`#5A5250`	`$lh-text-disabled`

边框

令牌	暗色	SCSS 源
`--lh-border-color-base`	`#3A3530`	`$lh-border-color-base`
`--lh-border-color-light`	`#302B28`	`$lh-border-color-light`
`--lh-border-color-lighter`	`#2A2520`	`$lh-border-color-lighter`
`--lh-border-color-extra-light`	`#242018`	`$lh-border-color-extra-light`

圆角

令牌	暗色	SCSS 源
`--lh-border-radius-base`	沿用明色	`$lh-border-radius-base`
`--lh-border-radius-small`	沿用明色	`$lh-border-radius-small`
`--lh-border-radius-round`	沿用明色	`$lh-border-radius-round`
`--lh-border-radius-circle`	沿用明色	`$lh-border-radius-circle`

背景

令牌	暗色	SCSS 源
`--lh-bg-color`	`#2A2520`	`$lh-bg-color`
`--lh-bg-color-page`	`#1E1A16`	`$lh-bg-color-page`
`--lh-bg-color-disabled`	`#242018`	`$lh-bg-color-disabled`
`--lh-bg-color-overlay`	`rgba(10, 8, 6, 0.7)`	`$lh-bg-color-overlay`

阴影

令牌	暗色	SCSS 源
`--lh-box-shadow-base`	`0 2px 12px 0 rgba(0, 0, 0, 0.5)`	`$lh-box-shadow-base`
`--lh-box-shadow-light`	`0 2px 4px 0 rgba(0, 0, 0, 0.4)`	`$lh-box-shadow-light`
`--lh-box-shadow-lighter`	`0 0 4px 0 rgba(0, 0, 0, 0.3)`	`$lh-box-shadow-lighter`

字体

令牌	暗色	SCSS 源
`--lh-font-family`	沿用明色	`$lh-font-family`
`--lh-font-size-extra-large`	沿用明色	`$lh-font-size-extra-large`
`--lh-font-size-large`	沿用明色	`$lh-font-size-large`
`--lh-font-size-medium`	沿用明色	`$lh-font-size-medium`
`--lh-font-size-base`	沿用明色	`$lh-font-size-base`
`--lh-font-size-small`	沿用明色	`$lh-font-size-small`
`--lh-font-size-extra-small`	沿用明色	`$lh-font-size-extra-small`
`--lh-font-weight-primary`	沿用明色	`$lh-font-weight-primary`
`--lh-font-weight-bold`	沿用明色	`$lh-font-weight-bold`
`--lh-font-line-height-primary`	沿用明色	`$lh-font-line-height-primary`

组件级 · control

令牌	暗色	SCSS 源
`--lh-control-height-mini`	沿用明色	`$lh-control-height-mini`
`--lh-control-height-small`	沿用明色	`$lh-control-height-small`
`--lh-control-height-medium`	沿用明色	`$lh-control-height-medium`
`--lh-control-height-large`	沿用明色	`$lh-control-height-large`
`--lh-control-height-x-large`	沿用明色	`$lh-control-height-x-large`

间距

令牌	暗色	SCSS 源
`--lh-spacing-xs`	沿用明色	`$lh-spacing-xs`
`--lh-spacing-sm`	沿用明色	`$lh-spacing-sm`
`--lh-spacing-md`	沿用明色	`$lh-spacing-md`
`--lh-spacing-base`	沿用明色	`$lh-spacing-base`
`--lh-spacing-lg`	沿用明色	`$lh-spacing-lg`
`--lh-spacing-xl`	沿用明色	`$lh-spacing-xl`
`--lh-spacing-xxl`	沿用明色	`$lh-spacing-xxl`

层级

令牌	暗色	SCSS 源
`--lh-z-index-normal`	沿用明色	`$lh-z-index-normal`
`--lh-z-index-dropdown`	沿用明色	`$lh-z-index-dropdown`
`--lh-z-index-sticky`	沿用明色	`$lh-z-index-sticky`
`--lh-z-index-fixed`	沿用明色	`$lh-z-index-fixed`
`--lh-z-index-modal-backdrop`	沿用明色	`$lh-z-index-modal-backdrop`
`--lh-z-index-modal`	沿用明色	`$lh-z-index-modal`
`--lh-z-index-popover`	沿用明色	`$lh-z-index-popover`
`--lh-z-index-tooltip`	沿用明色	`$lh-z-index-tooltip`

过渡

令牌	暗色	SCSS 源
`--lh-transition-duration-fast`	沿用明色	`$lh-transition-duration-fast`
`--lh-transition-duration-base`	沿用明色	`$lh-transition-duration-base`
`--lh-transition-duration-slow`	沿用明色	`$lh-transition-duration-slow`
`--lh-transition-function-ease-in-out`	沿用明色	`$lh-transition-function-ease-in-out`

禁用态

令牌	暗色	SCSS 源
`--lh-disabled-bg-color`	`#242018`	`$lh-disabled-bg-color`
`--lh-disabled-text-color`	`#5A5250`	`$lh-disabled-text-color`
`--lh-disabled-border-color`	`#302B28`	`$lh-disabled-border-color`
`--lh-disabled-opacity`	`0.5`	`$lh-disabled-opacity`

组件级 · popover

令牌	暗色	SCSS 源
`--lh-popover-bg-color`	`#2A2520`	`$lh-popover-bg-color`
`--lh-popover-border-color`	`#3A3530`	`$lh-popover-border-color`
`--lh-popover-border-radius`	沿用明色	`$lh-popover-border-radius`
`--lh-popover-padding`	沿用明色	`$lh-popover-padding`
`--lh-popover-title-color`	`#E8E0D8`	`$lh-popover-title-color`
`--lh-popover-content-color`	`#C8C0B8`	`$lh-popover-content-color`
`--lh-popover-arrow-size`	沿用明色	`$lh-popover-arrow-size`

组件级 · popconfirm

令牌	明色	暗色	SCSS 源	备注
`--lh-popconfirm-padding`		沿用明色	`$lh-popconfirm-padding`
`--lh-popconfirm-icon-size`		沿用明色	`$lh-popconfirm-icon-size`

组件级 · drawer

令牌	暗色	SCSS 源
`--lh-drawer-bg-color`	`#2A2520`	`$lh-drawer-bg-color`
`--lh-drawer-border-color`	`#3A3530`	`$lh-drawer-border-color`
`--lh-drawer-header-padding`	沿用明色	`$lh-drawer-header-padding`
`--lh-drawer-body-padding`	沿用明色	`$lh-drawer-body-padding`
`--lh-drawer-footer-padding`	沿用明色	`$lh-drawer-footer-padding`
`--lh-drawer-title-color`	`#E8E0D8`	`$lh-drawer-title-color`
`--lh-drawer-close-size`	沿用明色	`$lh-drawer-close-size`

组件级 · dropdown

令牌	暗色	SCSS 源
`--lh-dropdown-bg-color`	`#2A2520`	`$lh-dropdown-bg-color`
`--lh-dropdown-border-color`	`#3A3530`	`$lh-dropdown-border-color`
`--lh-dropdown-border-radius`	沿用明色	`$lh-dropdown-border-radius`
`--lh-dropdown-padding`	沿用明色	`$lh-dropdown-padding`
`--lh-dropdown-item-height`	沿用明色	`$lh-dropdown-item-height`
`--lh-dropdown-item-padding`	沿用明色	`$lh-dropdown-item-padding`
`--lh-dropdown-item-color`	`#C8C0B8`	`$lh-dropdown-item-color`
`--lh-dropdown-item-hover-bg-color`	`var(--lh-hover-bg-color)`	`$lh-dropdown-item-hover-bg-color`
`--lh-dropdown-divider-color`	`#302B28`	`$lh-dropdown-divider-color`

组件级 · message

令牌	暗色	SCSS 源
`--lh-message-bg`	`#2A2520`	`$lh-message-bg-color`
`--lh-message-border`	`#3A3530`	`$lh-message-border-color`
`--lh-message-color`	`#C8C0B8`	`$lh-message-content-color`
`--lh-message-shadow`	沿用明色	`$lh-message-shadow`

组件级 · notification

令牌	暗色	SCSS 源
`--lh-notification-bg`	`#2A2520`	`$lh-notification-bg-color`
`--lh-notification-border`	`#3A3530`	`$lh-notification-border-color`
`--lh-notification-title-color`	`#E8E0D8`	`$lh-notification-title-color`
`--lh-notification-content-color`	`#C8C0B8`	`$lh-notification-content-color`
`--lh-notification-width`	沿用明色	`$lh-notification-width`
`--lh-notification-gap`	沿用明色	`$lh-notification-gap`
`--lh-notification-shadow`	沿用明色	`$lh-notification-shadow`

组件级 · loading

令牌	明色	暗色	SCSS 源	备注
`--lh-loading-bg`		`rgba(10, 8, 6, 62%)`	`$lh-loading-bg-color`
`--lh-loading-text-color`		`#C8C0B8`	`$lh-loading-text-color`

组件级 · timeline

令牌	暗色	SCSS 源
`--lh-timeline-line`	`#302B28`	`$lh-timeline-line`
`--lh-timeline-dot`	`var(--lh-info-color)`	`$lh-timeline-dot`
`--lh-timeline-timestamp`	`var(--lh-text-secondary)`	`$lh-timeline-timestamp`

组件级 · collapse

令牌	明色	暗色	SCSS 源	备注
`--lh-collapse-border`		`#302B28`	`$lh-collapse-border`

组件级 · rate

令牌	明色	暗色	SCSS 源	备注
`--lh-rate-active`		`var(--lh-warning-color)`	`$lh-rate-active`

组件级 · segmented

令牌	明色	暗色	SCSS 源	备注
`--lh-segmented-bg`		`#242018`	`$lh-segmented-bg`

组件级 · calendar

令牌	明色	暗色	SCSS 源	备注
`--lh-calendar-border`		`var(--lh-border-color-lighter)`	`$lh-calendar-border`

组件级 · affix

令牌	明色	暗色	SCSS 源	备注
`--lh-affix-z-index`		沿用明色	`$lh-affix-z-index`

组件级 · backtop

令牌	明色	暗色	SCSS 源	备注
`--lh-backtop-z-index`		沿用明色	`$lh-backtop-z-index`

组件级 · menu

令牌	暗色	SCSS 源
`--lh-menu-bg`	`#242018`	`$lh-menu-bg`
`--lh-menu-padding`	沿用明色	`$lh-menu-padding`
`--lh-menu-border`	`#302B28`	`$lh-menu-border`
`--lh-menu-height`	沿用明色	`$lh-menu-height`
`--lh-menu-collapse-width`	沿用明色	`$lh-menu-collapse-width`
`--lh-menu-item-height`	沿用明色	`$lh-menu-item-height`
`--lh-menu-item-padding`	沿用明色	`$lh-menu-item-padding`
`--lh-menu-item-color`	`var(--lh-text-primary)`	`$lh-menu-item-color`
`--lh-menu-item-hover-bg`	`#302B28`	`$lh-menu-item-hover-bg`
`--lh-menu-item-active-color`	`var(--lh-selected-color)`	`$lh-menu-item-active-color`
`--lh-menu-item-active-bg`	`var(--lh-primary-color-bg)`	`$lh-menu-item-active-bg`
`--lh-menu-arrow-color`	`var(--lh-text-secondary)`	`$lh-menu-arrow-color`
`--lh-menu-z-index`	沿用明色	`$lh-menu-z-index`

组件级 · table

令牌	暗色	SCSS 源
`--lh-table-bg`	`#242018`	`$lh-table-bg`
`--lh-table-color`	`var(--lh-text-regular)`	`$lh-table-color`
`--lh-table-header-bg`	`#2A2420`	`$lh-table-header-bg`
`--lh-table-header-color`	`var(--lh-text-primary)`	`$lh-table-header-color`
`--lh-table-border`	`#302B28`	`$lh-table-border`
`--lh-table-row-hover-bg`	`#2A2420`	`$lh-table-row-hover-bg`
`--lh-table-stripe-bg`	`color-mix(in srgb, var(--lh-bg-color-page) 60%, transparent)`	`$lh-table-stripe-bg`
`--lh-table-cell-padding`	沿用明色	`$lh-table-cell-padding`

组件级 · layout

令牌	暗色	SCSS 源
`--lh-layout-header-height`	沿用明色	`$lh-layout-header-height`
`--lh-layout-header-bg`	`#242018`	`$lh-layout-header-bg`
`--lh-layout-aside-width`	沿用明色	`$lh-layout-aside-width`
`--lh-layout-aside-bg`	`#242018`	`$lh-layout-aside-bg`
`--lh-layout-main-bg`	`#1C1815`	`$lh-layout-main-bg`
`--lh-layout-border`	`#302B28`	`$lh-layout-border`

组件级 · row

令牌	明色	暗色	SCSS 源	备注
`--lh-row-gutter`		沿用明色	`$lh-row-gutter`

组件级 · tree

令牌	暗色	SCSS 源
`--lh-tree-color`	`#D8D0C8`	`$lh-tree-color`
`--lh-tree-padding`	沿用明色	`$lh-tree-padding`
`--lh-tree-node-height`	沿用明色	`$lh-tree-node-height`
`--lh-tree-node-hover-bg`	`#2A2420`	`$lh-tree-node-hover-bg`
`--lh-tree-node-selected-color`	`var(--lh-selected-color)`	`$lh-tree-node-selected-color`
`--lh-tree-node-selected-bg`	`var(--lh-primary-color-bg)`	`$lh-tree-node-selected-bg`
`--lh-tree-arrow-color`	`var(--lh-text-secondary)`	`$lh-tree-arrow-color`

组件级 · transfer

令牌	暗色	SCSS 源
`--lh-transfer-panel-width`	沿用明色	`$lh-transfer-panel-width`
`--lh-transfer-panel-height`	沿用明色	`$lh-transfer-panel-height`
`--lh-transfer-bg`	`#242018`	`$lh-transfer-bg`
`--lh-transfer-border`	`#302B28`	`$lh-transfer-border`

组件级 · upload

令牌	暗色	SCSS 源
`--lh-upload-bg`	`#242018`	`$lh-upload-bg`
`--lh-upload-border`	`var(--lh-border-color-base)`	`$lh-upload-border`
`--lh-upload-trigger-padding`	沿用明色	`$lh-upload-trigger-padding`

组件级 · anchor

令牌	明色	暗色	SCSS 源	备注
`--lh-anchor-color`		`var(--lh-text-regular)`	`$lh-anchor-color`

组件级 · image

令牌	明色	暗色	SCSS 源	备注
`--lh-image-viewer-mask`		`rgba(0, 0, 0, 80%)`	—

无障碍焦点环

令牌	暗色	SCSS 源
`--lh-focus-color`	`#7FA6D9`	`$lh-primary`
`--lh-focus-ring-width`	沿用明色	—
`--lh-focus-ring-offset`	沿用明色	—

(Data is generated by scripts/gen-docs-data.mjs parsing the three token files, with count assertions: 190 light, 118 dark, 188 SCSS — a mismatch raises an error.)

Overriding tokens

At runtime (recommended)

// ConfigProvider's themeVars (shorthand keys get the --lh- prefix auto-completed)
<lh-config-provider :theme-vars="{ 'primary-color': '#1677ff' }">

Or write CSS at your application entry:

:root {
  --lh-primary-color: #1677ff;
  --lh-primary-color-hover: #4096ff;
  --lh-primary-color-active: #0958d9;
}

See Runtime Customization.

At compile time (SCSS variables)

// Your project entry scss, override before @use
$lh-primary-color: #1677ff;

@use '@lh-ui/share/styles';

!default means “do not override if a value already exists”, so assigning before @use is enough. Note: this only affects the compile-time-baked part; the runtime CSS variables still need to be overridden separately.

Known token gaps

The “control-height token initiative” has landed (adding --lh-control-height-mini/small/medium/large/x-large, with button / select / input-number / cascader / tree-select / date-picker / time-picker / input all switched to the tokens, input changing from padding-derived to fixed height, and the asymmetric padding-top: 16px for has-label, the fixed checkbox-check offset, and the duplicated translate(-50%,-50%) hardcoding in switch all fixed along the way). What remains:

Inconsistent size steps between spinner and icon (small 16 vs 14, medium 24 vs 16, etc.). Changing either side ripples across the whole library (message / notification / loading / every icon). Trigger condition: visual complaints about mixing LhIcon / LhSpinner in the same slot; at that point it gets its own project.
Misaligned size steps: select / switch only have 3 steps, date / time-picker validators are narrowed, tree-select / rate / segmented / pagination have no size, and mini and x-large are barely drawn in the CSS layer (only avatar in the whole library has x-large). This is an API-layer change, decoupled from the height tokens.

Notes

Components must not declare --lh-* on their own: they may only consume via var(--lh-*, fallback) (a red line in the root AGENTS.md). New tokens go in var.scss.
The fallback is mandatory: var(--lh-primary-color, #1677ff) — if a token is missing there is still an acceptable default; verify:styles item 2 (var fallback) enforces this.
Dark completeness: when adding a token, ask “should this flip in dark mode?” If yes, add the override in var-dark.scss; verify:styles item 7 enforces this.
Tokens whose value looks like #{$lh-foo} are baked at compile time: they do not flip automatically in dark mode and must be explicitly re-pointed (see Dark Mode).