Recipes

Quick snippets and examples for common Citizen customizations. CSS recipes go in MediaWiki:Citizen.css, and for theme-mode selectors, see the theming reference.

Change the primary color

Citizen uses OKLCH for its accent color, so you only need to adjust the hue. This example sets it to purple in light mode:

:root.skin-theme-clientpref-day {
    --color-progressive-oklch__h: 301.11;
}

If your wiki uses automatic mode, you'll also need a media query so the change applies when the device is in dark mode:

@media screen and (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os {
        --color-progressive-oklch__h: 301.11;
    }
}

TIP

To target standard dark mode without affecting pure black mode, use .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-0.

Turn off image hover zoom

Images slightly scale up on hover by default. To keep them static:

:root {
    --transform-image-hover: none;
}

Turn off backdrop blur

Overlays like dropdowns and the command palette apply a subtle blur to the content behind them. To disable it:

:root {
    --backdrop-filter-blur: none;
}

Turn off frosted glass

The sticky header and some overlays use a frosted glass effect — a heavier blur combined with transparency. To make them fully opaque instead:

:root {
    --backdrop-filter-frosted-glass: none;
    --opacity-glass: 1;
}

Remove or modify preferences

Admins can remove or customize any built-in preference through MediaWiki:Citizen-preferences.json. See the preferences documentation for the full schema.

For example, to keep only light and dark in the theme switcher (removing automatic mode):

{
  "preferences": {
    "skin-theme": {
      "options": [
        { "value": "day", "labelMsg": "citizen-theme-day-label" },
        { "value": "night", "labelMsg": "citizen-theme-night-label" }
      ],
      "columns": 2
    }
  }
}

To hide a preference from the panel entirely, set it to null:

{
  "preferences": {
    "citizen-feature-pure-black": null,
    "citizen-feature-autohide-navigation": null
  }
}

Force a theme site-wide

To lock everyone into a single theme, combine two changes — set the default theme, then remove the picker so users can't switch.

First, set the default in LocalSettings.php using a valid value for $wgCitizenThemeDefault:

$wgCitizenThemeDefault = 'dark';

Then remove the theme picker by editing MediaWiki:Citizen-preferences.json:

{
  "preferences": {
    "skin-theme": null
  }
}

WARNING

Users who picked a different theme before you applied this change have it stored in their browser's local storage. They'll keep seeing their old choice until they clear site data — local storage doesn't expire on its own. New visitors get the forced theme immediately.