Toggle search
Toggle menu
13
23
19
546
Loftia Community Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

User:Isy/Sandbox/DarkMode-Experiment.css: Difference between revisions

From Loftia Community Wiki
More languages
More actions
Created page with "→* * 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..."
 
No edit summary
 
Line 1: Line 1:
/**
/* Fallback colors for strict validators */
* MediaWiki Theme Toggle Button - Simple UI, not setup to be like example design
.dark-mode-experiment {
*
     background: #ffffff; /* Fallback */
* CSS for light/dark mode toggle with theme variables
     color: #202122; /* Fallback */
* Compatible with MediaWiki styles
     --mw-bg: #ffffff;
*/
     --mw-surface: #f8f9fa;
 
     --mw-text: #202122;
/* Theme variables - Light theme (default) */
     --mw-border: #a2a9b1;
:root[data-theme="light"] {
     --mw-link: #0645ad;
     /* Base colors */
     --mw-code-bg: #f8f9fa;
    --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 */
.dark-mode-experiment[data-theme="dark"] {
:root[data-theme="dark"] {
     background: #1f1f1f; /* Fallback */
     /* Base colors */
     color: #e0e0e0; /* Fallback */
    --mw-color-background: #1f1f1f;
     --mw-bg: #1f1f1f;
     --mw-color-surface: #2a2a2a;
     --mw-surface: #2a2a2a;
    --mw-color-text-primary: #e0e0e0;
     --mw-text: #e0e0e0;
    --mw-color-text-secondary: #b0b0b0;
     --mw-border: #555555;
    --mw-color-border: #555555;
     --mw-link: #6699ff;
    --mw-color-link: #6699ff;
     --mw-code-bg: #2a2a2a;
    --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 */
/* Main content - with fallbacks */
:root[data-theme] {
.dark-mode-experiment .mw-parser-output {
     /* Transitions for smooth theme switching */
    background: #ffffff;
    background: var(--mw-bg);
    color: #202122;
     color: var(--mw-text);
     transition: all 0.3s ease;
     transition: all 0.3s ease;
}
     min-height: 80vh;
 
     padding: 20px;
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 */
/* Links */
a:link {
.dark-mode-experiment a {
    color: var(--mw-color-link);
     color: #0645ad;
}
     color: var(--mw-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 */
/* Tables */
table.wikitable {
.dark-mode-experiment table.wikitable {
    background-color: var(--mw-color-surface);
     background: #f8f9fa;
    color: var(--mw-color-text-primary);
     background: var(--mw-surface);
    border-color: var(--mw-color-border);
     border-color: #a2a9b1;
}
     border-color: var(--mw-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 blocks */
code,
.dark-mode-experiment code,
pre,
.dark-mode-experiment pre {
.mw-code {
     background: #f8f9fa;
     background-color: var(--mw-color-code-bg);
     background: var(--mw-code-bg);
     color: var(--mw-color-code-text);
    border-color: var(--mw-color-border);
}
}


/* Navigation elements */
/* Toggle button */
#mw-head,
.dark-mode-toggle {
#mw-panel,
     position: fixed;
#p-logo,
     bottom: 20px;
.portal,
     right: 20px;
#mw-navigation {
     z-index: 1000;
    background-color: var(--mw-color-surface);
     width: 40px;
    color: var(--mw-color-text-primary);
     height: 40px;
}
 
/* 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-radius: 50%;
     border: 1px solid var(--mw-toggle-button-border);
     background: #f8f9fa;
     background-color: var(--mw-toggle-button-bg);
    background: var(--mw-surface);
     color: var(--mw-toggle-button-color);
     color: #202122;
    color: var(--mw-text);
     border: 1px solid #a2a9b1;
    border: 1px solid var(--mw-border);
     cursor: pointer;
     cursor: pointer;
     transition: all 0.3s ease;
     font-size: 1.2em;
}
 
.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;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: 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;
}
}

Latest revision as of 01:48, 23 April 2025

/* 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;
}
Retrieved from "https://loftiawiki.org/index.php?title=User:Isy/Sandbox/DarkMode-Experiment.css&oldid=341"
Last modified
This page was last edited on 23 April 2025, at 01:48.
Copyright
Content is available under Creative Commons Attribution unless otherwise noted.