MediaWiki:Gadget-darkmode-overrides.css

/*
 * This gadget serves as a replacement for the default "dark mode rescue" stylesheet.
 * 
 * The original CSS is part of the WikimediaMessages style set ([[mw:Extension:WikimediaMessages]]),
 * which makes it configurable, whether it will be imported on wiki or not, but there's no
 * option to load it only partially. Thus, since as the work progresses on achieving compatibility
 * between the wiki content and dark mode, some of the original guard rules will no longer be
 * needed. Originally this gadget was a direct copy of the WMF-provided stylesheet:
 * 
 * https://github.com/wikimedia/mediawiki-extensions-WikimediaMessages/blob/master/modules/ext.wikimediamessages.styles/theme-night.less
 * 
 * It is expected that rules referring to common templates (e.g. infobox, navbox) will be gradually
 * stripped from this gadget, as the templates itself are made compatible with the dark mode.
 * 
 * The compiled version of all the *.less files that constitute the WikimediaMessages sheet is available at:
 * https://aa.wiki.x.io/w/load.php?lang=en&modules=ext.wikimediamessages.styles&debug=1&only=styles&skin=vector-2022
 * 
 * Turning off the WikimediaMessages components may be done at: [[MediaWiki:wikimedia-styles-exclude]]
 * 
 * 
 * IMPORTANT!
 * When adding or removing any content here, please remember to do it twice, using the classes:
 *   * html.skin-theme-clientpref-night
 *   * html.skin-theme-clientpref-os
 */

/* T358385 */
[bgcolor] {
    color: #333;
}

@media screen {
    html.skin-theme-clientpref-night .infobox:not( .notheme ) {
        color: var(--color-base, #202122) !important;
        background-color: var(--background-color-interactive-subtle, #f8f9fa) !important;
    }
    
    /* T357453 - attempt to strip colors from the majority of infoboxes in night mode (unless notheme specified) */
    html.skin-theme-clientpref-night .infobox td:not( .notheme ),
    html.skin-theme-clientpref-night .infobox th:not( .notheme ),
    html.skin-theme-clientpref-night .infobox p:not( .notheme ),
    html.skin-theme-clientpref-night .infobox > div:not( .notheme ),
    html.skin-theme-clientpref-night .infobox caption:not( .notheme ) {
        background: inherit !important;
        color: inherit !important;
        /* If a border is defined retain it but make it black [sic!]. If no border this won't do anything. */
        border-color: var(--border-color-subtle, #c8ccd1) !important;
    }

    html.skin-theme-clientpref-night .mw-parser-output [style*='background'] {
        color: #202122;
    }

    /* Limited to article namespace. This should not be added to namespaces which reset colors e.g. Portal (100) */
    html.skin-theme-clientpref-night body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) [bgcolor] a:not( .mw-selflink ),
    html.skin-theme-clientpref-night body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox )[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a:not( .mw-selflink ),
    html.skin-theme-clientpref-night body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) th[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) a:not( .mw-selflink ),
    html.skin-theme-clientpref-night body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) td[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) a:not( .mw-selflink ),
    html.skin-theme-clientpref-night body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) tr[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) td a:not( .mw-selflink ) {
        color: var(--color-base-fixed, #202122);
        text-decoration: underline;
    }
    html.skin-theme-clientpref-night body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) [bgcolor] a.new,
    html.skin-theme-clientpref-night body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox )[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a.new,
    html.skin-theme-clientpref-night body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) th[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) a.new,
    html.skin-theme-clientpref-night body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) td[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) a.new,
    html.skin-theme-clientpref-night body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) tr[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) td a.new {
        text-decoration-style: wavy;
    }
}
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .infobox:not( .notheme ) {
        color: var(--color-base, #202122) !important;
        background-color: var(--background-color-interactive-subtle, #f8f9fa) !important;
    }

    /* T357453 */
    html.skin-theme-clientpref-os .infobox td:not( .notheme ),
    html.skin-theme-clientpref-os .infobox th:not( .notheme ),
    html.skin-theme-clientpref-os .infobox p:not( .notheme ),
    html.skin-theme-clientpref-os .infobox > div:not( .notheme ),
    html.skin-theme-clientpref-os .infobox caption:not( .notheme ) {
        background: inherit !important;
        color: inherit !important;
        /* If a border is defined retain it but make it black [sic!]. If no border this won't do anything. */
        border-color: var(--border-color-subtle, #c8ccd1) !important;
    }
    
    html.skin-theme-clientpref-os .mw-parser-output [style*='background'] {
        color: #202122;
    }

    /* Limited to article namespace. This should not be added to namespaces which reset colors e.g. Portal (100) */
    html.skin-theme-clientpref-os body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) [bgcolor] a:not( .mw-selflink ),
    html.skin-theme-clientpref-os body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox )[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a:not( .mw-selflink ),
    html.skin-theme-clientpref-os body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) th[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) a:not( .mw-selflink ),
    html.skin-theme-clientpref-os body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) td[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) a:not( .mw-selflink ),
    html.skin-theme-clientpref-os body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) tr[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) td a:not( .mw-selflink ) {
        color: var(--color-base-fixed, #202122);
        text-decoration: underline;
    }
    html.skin-theme-clientpref-os body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) [bgcolor] a.new,
    html.skin-theme-clientpref-os body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox )[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a.new,
    html.skin-theme-clientpref-os body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) th[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) a.new,
    html.skin-theme-clientpref-os body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) td[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) a.new,
    html.skin-theme-clientpref-os body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .infobox table ):not( .navbox-inner ):not( .navbox ) tr[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] ) td a.new {
        text-decoration-style: wavy;
    }
}