Skip to main content
This page provides a comprehensive reference of all CSS variables (custom properties) available in the Citizen MediaWiki skin. These variables can be overridden in your custom stylesheets to customize the appearance of your wiki.

​
Color Variables

​
Progressive Color (Primary Accent)

The progressive color is the primary accent color used throughout the theme.
VariableDefault (Light)Description
--color-progressive-oklch__l53.25%Lightness (OKLCH)
--color-progressive-oklch__c0.1679Chroma/saturation (OKLCH)
--color-progressive-oklch__h262.29Hue (OKLCH) - Purple
--color-progressive-hsl__h220Hue (HSL fallback)
--color-progressive-hsl__s60%Saturation (HSL fallback)
--color-progressive-hsl__l50%Lightness (HSL fallback)
--color-progressive(computed)Final progressive color
--color-progressive--hover(computed)Progressive color hover state
--color-progressive--active(computed)Progressive color active state

​
Surface Colors

Surface colors create visual hierarchy and depth.
VariableLight ModeDark ModeDescription
--color-surface-0-oklch__l96%14%Base surface lightness
--color-surface-0-oklch__c0.010.01Base surface chroma
--color-surface-0(computed)(computed)Base background color
--color-surface-1(computed)(computed)Elevated surface level 1
--color-surface-1--hover(computed)(computed)Surface 1 hover state
--color-surface-1--active(computed)(computed)Surface 1 active state
--color-surface-2(computed)(computed)Elevated surface level 2
--color-surface-2--hover(computed)(computed)Surface 2 hover state
--color-surface-2--active(computed)(computed)Surface 2 active state
--color-surface-3(computed)(computed)Elevated surface level 3
--color-surface-4(computed)(computed)Elevated surface level 4

​
Text Colors

VariableLight ModeDark ModeDescription
--color-emphasized-oklch__l5%93%High emphasis text
--color-emphasized-oklch__c0.070.03High emphasis chroma
--color-base-oklch__l20%80%Regular text
--color-base-oklch__c0.090.05Regular text chroma
--color-subtle-oklch__l35%70%De-emphasized text
--color-subtle-oklch__c0.110.07De-emphasized chroma
--color-placeholder-oklch__l40%60%Placeholder text
--color-disabled-oklch__l60%50%Disabled text
VariableDescription
--color-linkDefault link color
--color-link--hoverLink hover state
--color-link--activeLink active state
--color-link-redRed links (non-existent pages)
--color-visitedVisited link color
--color-visited--hoverVisited link hover
--color-visited--activeVisited link active

​
State Colors

VariableLightDarkDescription
--color-destructive__h340340Destructive action hue (red)
--color-destructive__l40%50%Destructive lightness
--color-success__h170170Success state hue (green)
--color-success__l17%35%Success lightness
--color-warning__h4848Warning state hue (orange)
--color-warning__l40%60%Warning lightness
--color-inverted-primary#fff#fffInverted text color
--color-inverted-fixed(computed)(computed)Fixed inverted color

​
Syntax Highlighting Colors

VariableLightDark
--color-syntax-red#e53935#f07178
--color-syntax-orange#f76d47#f78c6c
--color-syntax-yellow#e2931d#ffcb6b
--color-syntax-green#91b859#c3e88d
--color-syntax-cyan#39adb5#89ddff
--color-syntax-blue#6182b8#82aaff
--color-syntax-purple#9c3eda#c792ea
--color-syntax-pink#ff5370#ff9cac

​
Border Variables

VariableDefaultDescription
--border-width-base1pxStandard border width
--border-width-thick2pxThick border width
--border-radius-base4pxBase border radius
--border-radius-medium8pxMedium border radius
--border-radius-large12pxLarge border radius
--border-radius-pill9999pxPill-shaped radius
--border-radius-circle50%Circular radius
--border-radius-sharp0No border radius
--border-color-base(computed)Default border color
--border-color-subtle(computed)Subtle border color
--border-color-muted(computed)Muted border color
--border-color-interactive(computed)Interactive element border
--border-color-progressive--focus(computed)Focus state border
--border-base(computed)Complete border declaration
--border-subtle(computed)Subtle border declaration

​
Spacing Variables

VariableValueDescription
--space-unit1remBase spacing unit
--space-xxs0.25remExtra extra small spacing
--space-xs0.5remExtra small spacing
--space-sm0.75remSmall spacing
--space-md1remMedium spacing
--space-lg1.25remLarge spacing
--space-xl1.5remExtra large spacing
--space-xxl2remExtra extra large spacing

​
Size Variables

VariableValueDescription
--size-icon1.25remStandard icon size
--header-size3.5remHeader height/width
--toolbar-size2.5remToolbar height
--width-layout1080pxMaximum content width
--width-layout--extended1620pxExtended layout width
--width-toc240pxTable of contents width
--width-page1080pxPage content width
--padding-page16px (responsive)Page side padding
--height-sticky-header0px (dynamic)Sticky header height
--header-card-maxheight80vhMaximum header card height
--overflow-gradient-size2remOverflow gradient width

​
Typography Variables

​
Font Families

VariableDefaultDescription
--font-family-baseRoboto, system-ui, sans-serifBase sans-serif font
--font-family-serifRoboto Serif, Georgia, serifSerif font
--font-family-monospaceRoboto Mono, Consolas, monospaceMonospace font
--font-family-overline(computed)Overline/label font

​
Font Sizes

VariableValueDescription
--font-size-x-small(Codex)Extra small text
--font-size-small(Codex)Small text
--font-size-medium(Codex)Body text
--font-size-large(Codex)Large text
--font-size-x-large(Codex)Heading 3
--font-size-xx-large(Codex)Heading 2
--font-size-xxx-large(Codex)Heading 1
--font-size-overline(computed)Label/overline text

​
Font Weights

VariableValueDescription
--font-weight-normal400Regular text
--font-weight-medium500Medium emphasis
--font-weight-semi-bold600Semi-bold
--font-weight-bold700Bold text
--font-weight-overline500Overline weight

​
Line Heights

VariableDescription
--line-height-smallSmall text line height
--line-height-mediumBody text line height
--line-height-largeLarge text line height
--line-height-x-largeHeading 3 line height
--line-height-xx-largeHeading 2 line height
--line-height-xxx-largeHeading 1 line height

​
Transition Variables

VariableValueDescription
--transition-duration-base100msBase transition duration
--transition-duration-medium250msMedium transition duration
--transition-delay-menu100msMenu transition delay
--transition-hover(computed)Hover transition
--transition-menu(computed)Menu transition
--transition-timing-function-easecubic-bezier(...)Ease timing function
--transition-timing-function-ease-incubic-bezier(...)Ease-in timing
--transition-timing-function-ease-outcubic-bezier(...)Ease-out timing

​
Shadow Variables

VariableDescription
--box-shadow-smallSmall shadow
--box-shadow-mediumMedium shadow
--box-shadow-largeLarge shadow
--box-shadow-borderBorder-like shadow
--box-shadow-color-alpha-baseShadow color with alpha
--shadow-opacityShadow opacity (0.03 light, 0.44 dark)

​
Filter Variables

VariableLightDarkDescription
--filter-invertnoneinvert(1) hue-rotate(180deg)Invert filter
--filter-invert-fixedinvert(1) hue-rotate(180deg)Always inverted
--filter-image-brightnessnonenoneImage brightness filter
--backdrop-filter-frosted-glassblur(16px) saturate(140%)Frosted glass effect

​
Opacity Variables

VariableValueDescription
--opacity-glass0.9 (light), 0.8 (dark)Glass effect opacity
--opacity-icon-base(computed)Icon opacity
--opacity-icon-base--hover(computed)Icon hover opacity
--opacity-icon-base--active(computed)Icon active opacity
--backdrop-opacity0.65Backdrop opacity

​
State Modifiers

VariableValueDescription
--delta-lightness-state-base4%Base state lightness change
--delta-lightness-hover-state4%Hover lightness adjustment
--delta-lightness-active-state-4%Active lightness adjustment
--delta-lightness-surface-base-2% (light), 2% (dark)Surface level lightness step

​
Background Colors

VariableDescription
--background-color-progressiveProgressive button background
--background-color-progressive--hoverProgressive button hover
--background-color-progressive--activeProgressive button active
--background-color-destructiveDestructive button background
--background-color-destructive--hoverDestructive button hover
--background-color-destructive--activeDestructive button active
--background-color-iconIcon background
--background-color-icon--hoverIcon hover background
--background-color-icon--activeIcon active background
--background-color-button-quiet--hoverQuiet button hover
--background-color-button-quiet--activeQuiet button active

​
Header Position Variables

These variables control header placement and are set automatically based on configuration.
VariableDescription
--header-directionrow or column
--header-size-inline-startLeft side header size
--header-size-inline-endRight side header size
--header-size-block-startTop header size
--header-size-block-endBottom header size
--header-inset-*Header positioning
--header-border-*-widthHeader border widths
--header-offset-block-startOffset for sticky elements

​
Usage Examples

​
Override Primary Color

:root {
  --color-progressive-oklch__h: 180; /* Cyan */
}

​
Increase Content Width

:root {
  --width-layout: 1280px;
}

​
Custom Spacing Scale

:root {
  --space-unit: 1.25rem; /* Larger spacing */
}

​
Adjust Border Radius

:root {
  --border-radius-base: 8px; /* More rounded */
}

Build docs developers (and LLMs) love

Get started for freeTalk to us