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.

/**
 * MediaWiki Theme Toggle Button - Simple UI, not setup to be like example design
 * 
 * CSS for light/dark mode toggle with theme variables
 * Compatible with MediaWiki styles
 */

/* Theme variables - Light theme (default) */
:root[data-theme="light"] {
    /* Base colors */
    --mw-color-background: #ffffff;
    --mw-color-surface: #f8f9fa;
    --mw-color-text-primary: #202122;
    --mw-color-text-secondary: #54595d;
    --mw-color-border: #c8ccd1;
    --mw-color-link: #0645ad;
    --mw-color-link-visited: #0b0080;
    --mw-color-link-active: #faa700;

    /* UI component colors */
    --mw-color-input-bg: #ffffff;
    --mw-color-input-border: #a2a9b1;
    --mw-color-button-bg: #f8f9fa;
    --mw-color-button-text: #202122;
    --mw-color-button-border: #a2a9b1;
    --mw-color-destructive: #d73333;
    --mw-color-progressive: #3366cc;

    /* Content colors */
    --mw-color-info-box-bg: #eaecf0;
    --mw-color-warning-box-bg: #fee7e6;
    --mw-color-success-box-bg: #d5fdf4;
    --mw-color-note-box-bg: #eaf3ff;

    /* Syntax highlighting */
    --mw-color-code-bg: #f8f9fa;
    --mw-color-code-text: #000000;

    /* Toggle button specific */
    --mw-toggle-button-bg: #f8f9fa;
    --mw-toggle-button-color: #202122;
    --mw-toggle-button-border: #a2a9b1;
    --mw-toggle-button-hover-bg: #ffffff;
}

/* Dark theme variables */
:root[data-theme="dark"] {
    /* Base colors */
    --mw-color-background: #1f1f1f;
    --mw-color-surface: #2a2a2a;
    --mw-color-text-primary: #e0e0e0;
    --mw-color-text-secondary: #b0b0b0;
    --mw-color-border: #555555;
    --mw-color-link: #6699ff;
    --mw-color-link-visited: #b3ccff;
    --mw-color-link-active: #ffcc33;

    /* UI component colors */
    --mw-color-input-bg: #2a2a2a;
    --mw-color-input-border: #555555;
    --mw-color-button-bg: #333333;
    --mw-color-button-text: #e0e0e0;
    --mw-color-button-border: #555555;
    --mw-color-destructive: #ff5555;
    --mw-color-progressive: #6699ff;

    /* Content colors */
    --mw-color-info-box-bg: #333333;
    --mw-color-warning-box-bg: #402020;
    --mw-color-success-box-bg: #203020;
    --mw-color-note-box-bg: #203040;

    /* Syntax highlighting */
    --mw-color-code-bg: #2a2a2a;
    --mw-color-code-text: #e0e0e0;

    /* Toggle button specific */
    --mw-toggle-button-bg: #333333;
    --mw-toggle-button-color: #e0e0e0;
    --mw-toggle-button-border: #555555;
    --mw-toggle-button-hover-bg: #444444;
}

/* Apply theme variables to MediaWiki elements */
:root[data-theme] {
    /* Transitions for smooth theme switching */
    transition: all 0.3s ease;
}

body,
.mw-body,
#content,
#mw-content-text,
.mw-parser-output {
    background-color: var(--mw-color-background);
    color: var(--mw-color-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main content styling */
#content,
.mw-body,
.mw-body-content {
    color: var(--mw-color-text-primary);
}

/* Links */
a:link {
    color: var(--mw-color-link);
}

a:visited {
    color: var(--mw-color-link-visited);
}

a:active {
    color: var(--mw-color-link-active);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--mw-color-text-primary);
    border-color: var(--mw-color-border);
}

/* Tables */
table.wikitable {
    background-color: var(--mw-color-surface);
    color: var(--mw-color-text-primary);
    border-color: var(--mw-color-border);
}

table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background-color: var(--mw-color-surface);
    color: var(--mw-color-text-primary);
    border-color: var(--mw-color-border);
}

table.wikitable > tr > td,
table.wikitable > * > tr > td {
    background-color: var(--mw-color-background);
    color: var(--mw-color-text-primary);
    border-color: var(--mw-color-border);
}

/* Infoboxes */
.infobox,
.mw-highlight,
.notice,
.toccolours,
.messagebox {
    background-color: var(--mw-color-surface);
    color: var(--mw-color-text-primary);
    border-color: var(--mw-color-border);
}

/* Code blocks */
code,
pre,
.mw-code {
    background-color: var(--mw-color-code-bg);
    color: var(--mw-color-code-text);
    border-color: var(--mw-color-border);
}

/* Navigation elements */
#mw-head,
#mw-panel,
#p-logo,
.portal,
#mw-navigation {
    background-color: var(--mw-color-surface);
    color: var(--mw-color-text-primary);
}

/* Theme toggle button styles */
.theme-toggle-container {
    display: inline-block;
    margin: 0 10px;
    vertical-align: middle;
    white-space: nowrap;
}

.theme-toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 50%;
    border: 1px solid var(--mw-toggle-button-border);
    background-color: var(--mw-toggle-button-bg);
    color: var(--mw-toggle-button-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle-button:hover {
    background-color: var(--mw-toggle-button-hover-bg);
    transform: scale(1.05);
}

.theme-toggle-button:focus {
    outline: 2px solid var(--mw-color-progressive);
    outline-offset: 2px;
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-icon svg {
    width: 20px;
    height: 20px;
}

/* Fixed position toggle for mobile view */
@media (max-width: 768px) {
    .theme-toggle-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 100;
        margin: 0;
    }

    .theme-toggle-button {
        width: 40px;
        height: 40px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Increase button size for better touch target */
    .theme-toggle-icon svg {
        width: 24px;
        height: 24px;
    }
}

/* Styles for personal tools menu integration */
#pt-theme-toggle {
    display: inline-block;
    margin: 0;
    padding: 0;
}

#pt-theme-toggle .theme-toggle-button {
    width: 28px;
    height: 28px;
    padding: 2px;
}

/* No JS fallback styles */
.no-js .theme-toggle-container {
    display: none;
}