User:Isy/Sandbox/DarkMode-Experiment.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.

/* Fallback colors for strict validators */
.dark-mode-experiment {
    background: #ffffff; /* Fallback */
    color: #202122; /* Fallback */
    --mw-bg: #ffffff;
    --mw-surface: #f8f9fa;
    --mw-text: #202122;
    --mw-border: #a2a9b1;
    --mw-link: #0645ad;
    --mw-code-bg: #f8f9fa;
}

.dark-mode-experiment[data-theme="dark"] {
    background: #1f1f1f; /* Fallback */
    color: #e0e0e0; /* Fallback */
    --mw-bg: #1f1f1f;
    --mw-surface: #2a2a2a;
    --mw-text: #e0e0e0;
    --mw-border: #555555;
    --mw-link: #6699ff;
    --mw-code-bg: #2a2a2a;
}

/* Main content - with fallbacks */
.dark-mode-experiment .mw-parser-output {
    background: #ffffff;
    background: var(--mw-bg);
    color: #202122;
    color: var(--mw-text);
    transition: all 0.3s ease;
    min-height: 80vh;
    padding: 20px;
}

/* Links */
.dark-mode-experiment a {
    color: #0645ad;
    color: var(--mw-link);
}

/* Tables */
.dark-mode-experiment table.wikitable {
    background: #f8f9fa;
    background: var(--mw-surface);
    border-color: #a2a9b1;
    border-color: var(--mw-border);
}

/* Code blocks */
.dark-mode-experiment code,
.dark-mode-experiment pre {
    background: #f8f9fa;
    background: var(--mw-code-bg);
}

/* Toggle button */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8f9fa;
    background: var(--mw-surface);
    color: #202122;
    color: var(--mw-text);
    border: 1px solid #a2a9b1;
    border: 1px solid var(--mw-border);
    cursor: pointer;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}