Color Theme
Color
Authored color vocabulary and coordinated semantic foreground, surface, edge, interaction, and state decisions. QP components often consume these semantic colors directly, so document-level CSS inheritance alone does not establish a complete theme palette. Enum values are authored vocabulary; System values are framework-owned truths; Roots are independent semantic theme decisions. Derived and Inherited variables remain available through Theme search and linked variable families.
Available Values
--qp-color-black
Provides black in the Base authored Color vocabulary.
6 Derived variables; 0 Inherited variables
#000000
--qp-color-blue
Provides the Base blue value in the authored Color vocabulary.
0 Derived variables; 0 Inherited variables
#2563eb
--qp-color-blue-light
Provides the lighter Base blue value in the authored Color vocabulary.
0 Derived variables; 0 Inherited variables
color-mix(in oklch, var(--qp-color-blue), white 82%)
--qp-color-ink
Provides the Base near-black ink value in the authored Color vocabulary.
0 Derived variables; 0 Inherited variables
#111827
--qp-color-ink-dark
Provides the darker Base ink value in the authored Color vocabulary.
0 Derived variables; 0 Inherited variables
color-mix(in oklch, var(--qp-color-ink), black 24%)
--qp-color-ink-soft
Provides the softer Base ink value in the authored Color vocabulary.
0 Derived variables; 0 Inherited variables
color-mix(in oklch, var(--qp-color-ink), white 28%)
--qp-color-mist
Provides the Base pale neutral mist value in the authored Color vocabulary.
0 Derived variables; 0 Inherited variables
#e5e7eb
--qp-color-mist-dark
Provides the darker Base mist value in the authored Color vocabulary.
0 Derived variables; 0 Inherited variables
color-mix(in oklch, var(--qp-color-mist), black 10%)
--qp-color-mist-light
Provides the lighter Base mist value in the authored Color vocabulary.
0 Derived variables; 0 Inherited variables
color-mix(in oklch, var(--qp-color-mist), white 68%)
--qp-color-white
Provides white in the Base authored Color vocabulary.
0 Derived variables; 0 Inherited variables
#ffffff
Roots
--qp-accent-color
Chooses the primary accent color that carries theme identity and interactive emphasis.
1 Derived variable; 17 Inherited variables
var(--qp-color-blue)
--qp-background
Chooses the ordinary component surface color used throughout QP. Coordinate it with primary, strong, muted, and inverse foreground decisions because components consume those semantic colors directly rather than relying only on CSS inheritance.
0 Derived variables; 13 Inherited variables
var(--qp-color-white)
--qp-border-color
Chooses the standard edge color for ordinary bordered surfaces.
1 Derived variable; 12 Inherited variables
var(--qp-color-mist)
--qp-border-color--strong
Chooses the stronger edge color used for emphasized separation.
1 Derived variable; 7 Inherited variables
var(--qp-color-mist-dark)
--qp-focus-color
Chooses the visible focus color used across QP interaction surfaces.
0 Derived variables; 0 Inherited variables
var(--qp-color-blue)
--qp-heading-text-color
Chooses the standard heading foreground consumed directly by QP headings. Coordinate it with the surfaces headings occupy; changing body color does not necessarily change this value.
0 Derived variables; 4 Inherited variables
var(--qp-color-ink-dark)
--qp-lightbox__item-border-color--selected
Chooses the lightbox__item border color selected treatment independently when it requires the Base white vocabulary value.
0 Derived variables; 0 Inherited variables
var(--qp-color-white)
--qp-link-text-color
Chooses the ordinary link color independently from other interactive emphasis.
1 Derived variable; 0 Inherited variables
var(--qp-color-blue)
--qp-surface-background--hover
Chooses the ordinary hover surface used by interactive components. Coordinate it with the corresponding interactive foreground and focus decisions so hover remains visibly distinct and readable.
0 Derived variables; 9 Inherited variables
var(--qp-color-blue-light)
--qp-surface-background--muted
Chooses the subdued supporting surface used by alternate and muted UI. Pair it with foreground colors that remain legible when QP components consume their semantic text variables directly.
0 Derived variables; 6 Inherited variables
var(--qp-color-mist-light)
--qp-text-color
Chooses the ordinary readable foreground consumed directly by QP components. Coordinate it with the document canvas and ordinary surface colors; setting body color alone does not replace this theme decision.
1 Derived variable; 18 Inherited variables
var(--qp-color-ink)
--qp-text-color--inverse
Chooses the foreground for surfaces where the ordinary contrast relationship is reversed, including strong, accent, and overlay contexts that inherit this decision. Coordinate it with those surfaces instead of assuming white or document-level inheritance.
0 Derived variables; 8 Inherited variables
var(--qp-color-white)
--qp-text-color--inverse-muted
Chooses the subdued foreground color used for secondary information on inverse or dark surfaces.
0 Derived variables; 3 Inherited variables
color-mix(in srgb, var(--qp-color-white) 72%, transparent)
--qp-text-color--muted
Chooses the secondary foreground consumed directly for captions, metadata, and supporting content. It must remain legible against the theme’s ordinary and muted surfaces rather than merely appear visually quieter.
0 Derived variables; 7 Inherited variables
var(--qp-color-ink-soft)
--qp-text-color--strong
Chooses the stronger foreground consumed by headings and emphasized component content. Coordinate it with every ordinary and alternate surface on which strong content appears.
0 Derived variables; 15 Inherited variables
var(--qp-color-ink-dark)
Systems
--qp-system-color-highlight
Provides the browser or operating-system highlight color for selected content.
0 Derived variables; 1 Inherited variable
Highlight
--qp-system-color-highlight-text
Provides the browser or operating-system text color for selected content.
0 Derived variables; 1 Inherited variable
HighlightText
--qp-system-color-transparent
Represents complete transparency independently from the authored palette.
0 Derived variables; 7 Inherited variables
transparent