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.skin-theme-clientpref-night {
    --color-primary__h: 0;   /* Primary hue (not relevant for white) */
    --color-primary__s: 0%;  /* No saturation for grayscale */
    --color-primary__l: 100%; /* Full lightness for white */

    /* Ensure text is white */
    --color-base: #ffffff; /* Main text color */
    --color-emphasized: #f5f5f5; /* Emphasized text (headers) */
    --color-subtle: #cccccc; /* Less important text */

    /* Dark background */
    --color-surface-0: #121212; /* Page background */
    --color-surface-1: #1a1a1a; /* Panels, dropdowns */
    --color-surface-2: #222222; /* Secondary elements */
    --color-surface-3: #2a2a2a; /* Deep layers */
    --color-surface-4: #333333; /* Borders and deepest layers */

    /* Buttons */
    --color-primary: #333333; /* Dark gray background for buttons */
    --color-primary--hover: #444444; /* Slightly lighter hover color */
    --color-primary--active: #555555; /* Clicked button color */
    --color-primary-text: #ffffff; /* Ensure button text is white */

    /* UI buttons and accents */
    --color-syntax-red: #ff6666; /* Error text */
    --color-syntax-blue: #6699ff; /* Other blue UI elements */
    --color-syntax-green: #66ff66; /* Success messages */
}

/* Force links to be green without affecting buttons */
.mw-parser-output a {
    color: #66ff66 !important; /* Default link color */
    text-decoration: none;
}

.mw-parser-output a:hover {
    color: #44cc44 !important; /* Hovered link color */
    text-decoration: underline;
}

.mw-parser-output a:active {
    color: #33aa33 !important; /* Clicked link color */
}

/* Fix buttons */
.mw-ui-button {
    background-color: #333333 !important; /* Dark button background */
    color: #ffffff !important; /* White text */
    border: 1px solid #555555 !important; /* Subtle border */
}

.mw-ui-button:hover {
    background-color: #444444 !important; /* Slightly lighter on hover */
}

.mw-ui-button:active {
    background-color: #555555 !important; /* Even lighter when clicked */
}