MediaWiki:Colors.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.
/* Colors applied for all skins 
 * See [[MediaWiki:Vector-2022.css]] for desktop theme related colors. 
 * See [[MediaWiki:Citizen.css]] for mobile theme related colors. 
 */

/* Codex Design tokens */
@media screen {
	/* Day, Light */
    :root,.skin-invert,.notheme {
        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/c/c3/Background_Light.jpg");

        /* Additional colors */
        --theme-accent-color: #eac863;
        --theme-accent-color--rgb: 234, 200, 99;
        --color-accent: #eac863;
        --color-accent--rgb: 234, 200, 99;
        --color-accent-text: #5a4a3c;
        --color-buzz: #0075EB;
        --color-bp: #cc8000;
        --color-menu: #937C6E;
        --color-new: #317e2a;
        --color-old: #932015;
        --color-help: #BB8010;
        --color-catch: #17744b;
        
        /* Additional background colors */
        --background-color-0: #f6f9dd;
        --background-color-1: oklch(0.94 0.04 107.5);
        --background-color-2: oklch(0.90 0.04 107.5);
        --background-color-3: oklch(0.85 0.04 107.5);
        --background-color-4: oklch(0.80 0.04 107.5);
        --background-color-5: oklch(0.75 0.04 107.5);
        --background-color-6: oklch(0.70 0.04 107.5);
        --background-color-8: oklch(0.65 0.04 107.5);
        --background-color-9: oklch(0.60 0.04 107.5);
        --background-color-10: oklch(0.55 0.04 107.5);
    }
    
    /* Night, Dark */
    html.skin-theme-clientpref-night {
        color-scheme: dark;

        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");

        /* Additional colors */
        --theme-accent-color: #ddbc5b;
        --theme-accent-color--rgb: 221, 188, 91;
        --color-accent: #ddbc5b;
        --color-accent--rgb: 221, 188, 91;
        --color-accent-text: #0d0f1e;
        --color-buzz: #2095EF;
        --color-bp: #cc8000;
        --color-menu: #D3BC8E;
        --color-new: #41be3a;
        --color-old: #ed6d59;
        --color-help: #e0bb00;
        --color-catch: #85cdae;
        
        /* Additional background colors */
        --background-color-0: #0d0f1e;
        --background-color-1: oklch(0.24 0.0278 277.52);
        --background-color-2: oklch(0.30 0.0278 277.52);
        --background-color-3: oklch(0.35 0.0278 277.52);
        --background-color-4: oklch(0.40 0.0278 277.52);
        --background-color-5: oklch(0.45 0.0278 277.52);
        --background-color-6: oklch(0.50 0.0278 277.52);
        --background-color-7: oklch(0.55 0.0278 277.52);
        --background-color-8: oklch(0.60 0.0278 277.52);
        --background-color-9: oklch(0.65 0.0278 277.52);
        --background-color-10: oklch(0.70 0.0278 277.52);
    }
}

/* OS, Auto */
@media screen and (prefers-color-scheme: dark) {
    .skin-theme-clientpref-os {
        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");

        /* Additional colors */
        --theme-accent-color: #ddbc5b;
        --theme-accent-color--rgb: 221, 188, 91;
        --color-accent: #ddbc5b;
        --color-accent--rgb: 221, 188, 91;
        --color-accent-text: #0d0f1e;
        --color-buzz: #2095EF;
        --color-bp: #cc8000;
        --color-menu: #D3BC8E;
        --color-new: #41be3a;
        --color-old: #ed6d59;
        --color-help: #e0bb00;
        --color-catch: #85cdae;
        
        /* Additional background colors */
        --background-color-0: #0d0f1e;
        --background-color-1: oklch(0.24 0.0278 277.52);
        --background-color-2: oklch(0.30 0.0278 277.52);
        --background-color-3: oklch(0.35 0.0278 277.52);
        --background-color-4: oklch(0.40 0.0278 277.52);
        --background-color-5: oklch(0.45 0.0278 277.52);
        --background-color-6: oklch(0.50 0.0278 277.52);
        --background-color-7: oklch(0.55 0.0278 277.52);
        --background-color-8: oklch(0.60 0.0278 277.52);
        --background-color-9: oklch(0.65 0.0278 277.52);
        --background-color-10: oklch(0.70 0.0278 277.52);
    }
}

.text-buzz, .text-buzz * { color: var(--color-buzz); }
.bg-buzz { background-color: var(--color-buzz); }

.text-bp, .text-bp * { color: var(--color-bp); }
.bg-bp { background-color: var(--color-bp); }

.text-menu, .text-menu * { color: var(--color-menu); }
.bg-menu { background-color: var(--color-menu); }

.text-new, .text-new * { color: var(--color-new); }
.bg-new { background-color: var(--color-new); }

.text-old, .text-old * { color: var(--color-old); }
.bg-old { background-color: var(--color-old); }

.text-help, .text-help * { color: var(--color-help); }
.bg-help { background-color: var(--color-help); }

.text-catch, .text-catch * { color: var(--color-catch); }
.bg-catch { background-color: var(--color-catch); }