MediaWiki:Citizen.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All CSS here will be loaded for users of the Citizen skin */
:root {
    --font-family-citizen-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --color-progressive-oklch__l: 0.5447;
    --color-progressive-oklch__c: 0.2121;
    --color-progressive-oklch__h: 23.85;
    --color-progressive-hsl__h: 352.62;
    --color-progressive-hsl__s: 82.38;
    --color-progressive-hsl__l: 44.51;
    /*--color-surface-0: */
    /*--color-surface-1: */
    /*--color-surface-2: */
    /*--color-surface-3: */
    /*--color-surface-4: */
}

:root.skin-theme-clientpref-day {
    --color-surface-0: white;
    --color-surface-1: white;
    --color-surface-2: white;
    --color-surface-3: white;
    --color-surface-4: white;
    --color-base: #000;
    --color-base--emphasized: #cf142b;
    --color-base--subtle: #cf142b;
}

:root.skin-theme-clientpref-night {
    --color-surface-0: black;
    --color-surface-1: black;
    --color-surface-2: black;
    --color-surface-3: black;
    --color-surface-4: black;
    --color-base: #000;
    --color-base--emphasized: #cf142b;
    --color-base--subtle: #cf142b;
}

@media screen and (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os {
        --color-surface-0: orange;
        --color-surface-1: yellow;
        --color-surface-2: lime;
        --color-surface-3: pink;
        --color-surface-4: green;
        --color-base: #000;
        --color-base--emphasized: #cf142b;
        --color-base--subtle: #cf142b;
    }
}