Citizen

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:

css
: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:

css
@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:

css
: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:

css
: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:

css
: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):

json
{
  "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:

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

Force a theme site-wide ​

To lock everyone into a single theme, give skin-theme a default and hide the picker by editing MediaWiki:Citizen-preferences.json:

json
{
  "preferences": {
    "skin-theme": {
      "default": "night",
      "hidden": true
    }
  }
}

default makes the theme apply to everyone who hasn't chosen one, and hidden removes the picker so nobody can.

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.

The "Upload file" link Citizen shows in the sidebar is the one MediaWiki builds, so $wgUploadNavigationUrl decides where it goes. Use it to send people to UploadWizard, a shared repository like Commons, or your own upload guide:

LocalSettings.php
php
$wgUploadNavigationUrl = '/wiki/Special:UploadWizard';

Leave it unset and the link points at Special:Upload, and only appears for people who are actually allowed to upload. Setting it shows the link to everyone, since MediaWiki can't know what permissions the destination needs.

Which sidebar menu the link sits in is up to $wgCitizenGlobalToolsPortlet.