Configuration

Chrome CSS Tokens

CSS variable contract for chrome backgrounds, controls, and surfaces.

Use these CSS variables to theme papyrium-chrome.

Background ownership

  • --chrome-bg: main chrome root only (.chrome-shell)
  • --chrome-topbar: top bar root only (.chrome-header)
  • --chrome-sidebar: sidebar root only (.chrome-sidebar)

Inner layout wrappers are transparent by default. Distinct inner surfaces should only set a background when they intentionally differ from the root background.

Token reference

  • --chrome-bg: main chrome root background
  • --chrome-topbar: top bar root background
  • --chrome-sidebar: sidebar root background
  • --chrome-surface: standard elevated cards/surfaces
  • --chrome-surface-strong: stronger elevated blocks
  • --chrome-panel: popup/panel surfaces (menus, inline toolbar, mobile toggle)
  • --chrome-border: border color
  • --chrome-text: primary text color
  • --chrome-muted: secondary text color
  • --chrome-accent: active/focus color
  • --chrome-accent-soft: soft selected/active fill
  • --chrome-danger: destructive affordance color
  • --chrome-control-bg: default control background
  • --chrome-control-border: control border/separator
  • --chrome-control-hover: control hover background

Example

papyrium-chrome {
  --chrome-bg: #0b1320;
  --chrome-topbar: #12233f;
  --chrome-sidebar: #101a2d;
  --chrome-surface: #15253f;
  --chrome-surface-strong: #1c2f4f;
  --chrome-panel: #13233d;
  --chrome-border: #2c3f60;
  --chrome-text: #e7eefb;
  --chrome-muted: #9fb0cc;
  --chrome-accent: #6ea8ff;
  --chrome-accent-soft: rgba(110, 168, 255, 0.22);
  --chrome-control-bg: #1a2d4b;
  --chrome-control-border: #314968;
  --chrome-control-hover: #23395c;
}