Wikipedia Dark by paoloperrone

/* ==UserStyle==
@name           Wikipedia Dark
@namespace      github.com/openstyles/stylus
@version        0.1
@description    A dark theme for Wikipedia based on the one from the Wikimedia Design Team 2019-2021
 * Original authors:
 * - Volker E. – [[User:Volker_E._(WMF)]]
 * - Alex Hollender
 * - MusikAnimal
 * - Carolyn Li-Madeo
 * - Jdlrobson

@author         Paolo Perrone
==/UserStyle== */
@-moz-document regexp("https?://[a-z]*(\\.m)?\\.wikipedia\\.org/.*") {

    /** To prevent 'jumping' effect within #p-personal in Vector/Monobook. Overrides [[MediaWiki:Gadget-dark-mode-toggle-pagestyles.css]] **/
    body.skin-vector-legacy :not(#pt-darkmode) + #pt-watchlist::before,
    body.skin-monobook :not(#pt-darkmode) + #pt-watchlist::before {
        content: "Light mode";
    }

    @media screen {
        
        /* MY ADDITIONS & EDITS */      
        
        /* Backgrounds */
        /* my edits */
        html .mw-body,
        html .mw-page-container,
        html .vector-pinned-container,
        html .vector-sticky-pinned-container::after,
        html .cdx-button:enabled,
        html .vector-dropdown-content,
        html .row,
        html .uls-filterinput,
        html textarea,
        html .wikiEditor-ui-toolbar,
        html .editOptions,
        html .oo-ui-textInputWidget .oo-ui-inputWidget-input,
        #editpage-specialchars a,
        #mwe-popups-settings,      
        .mw-parser-output .navbox,
        .mw-parser-output .navbox-list,
        html .hatnote,
        
        /* from original theme */
        html table,
        html table.ambox-content,
        html table.toccolours,
        html .mw-notification,
        html .mwe-popups,
        html .infobox,
        html .toc,
        html .thumbinner,
        html figure[typeof~='mw:File/Thumb'],
        html figure[typeof~='mw:File/Frame'],
        html figure[typeof~='mw:File/Thumb'] > figcaption,
        html figure[typeof~='mw:File/Frame'] > figcaption,
        html .wikitable,
        html .cbnnr-main,
        html .cx-callout,
        html .overlay.media-viewer,
        html #simpleSearch,
        html #simpleSearch #searchInput,
        html #siteNotice #centralNotice .cnotice {
            background-color: hsl(235, 25%, 92%);
            color: #000e;
            /* will be inverted */
        }
        .mw-header {
            background: hsl(235, 25%, 92%) !important;
            /* will be inverted */
        }
        .vector-sticky-pinned-container::after {
            background: none;
        }
                
        /* Blocks background */
        html .oo-ui-popupWidget-popup,
        html .vector-pinnable-header-toggle-button,
        html .mwe-popups-container,
        .mw-parser-output .sidebar,
        .mw-parser-output .side-box,
        .ambox, .ombox, .catlinks, .mw-message-box {
            background: hsl(235, 25%, 88%) !important;
            color: #000e;
            /* will be inverted */
        }      
        .mw-parser-output .portalborder,
        .skin-vector .uls-menu,
        html .vector-dropdown .vector-dropdown-content,
        .cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled,
        .oo-ui-buttonElement.oo-ui-labelElement input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button :not(.oo-ui-labelElement-label) {
            background: hsl(235, 25%, 88%);
            color: #000e;
            /* will be inverted */
        }
        .mwe-popups-extract[dir="ltr"]::after {
            background-image: linear-gradient(to right, hsla(235, 25%, 88%,0),hsla(235, 25%, 88%,1)) !important;
            /* will be inverted */
        }
        
        .oo-ui-popupWidget {
            filter: drop-shadow(0 0px 6px hsl(235, 25%, 92%));
        }
        html .mwe-popups,
        .skin-vector .uls-menu,
        html .vector-dropdown .vector-dropdown-content {
            box-shadow: 0 0 6px hsl(235, 25%, 92%);
            /* will be inverted */
        }
        
        /* Borders */
        .mw-parser-output .sidebar,
        .mw-parser-output .ambox-style, .mw-parser-output .ambox-content,
        .mw-parser-output .ambox,
        .ombox, .catlinks, .mw-message-box,
        html body,
        html h1,
        html h2,
        html h3,
        html h4,
        html h5,
        html h6,
        html table.ambox-content,
        html table.toccolours,
        html .mw-notification,
        html .infobox,
        html .toc,
        html .thumbinner,
        html figure[typeof~='mw:File/Thumb'],
        html figure[typeof~='mw:File/Frame'],
        html figure[typeof~='mw:File/Thumb'] > figcaption,
        html figure[typeof~='mw:File/Frame'] > figcaption,
        html #mw-head,
        html #mw-panel,
        /* Vector 2022 uses a transparent border for margin collapsing
(T312822) so don't apply this rule there */
        .skin-vector-legacy #content.mw-body,
        html #simpleSearch,
        html #simpleSearch #searchInput,
        html #siteNotice #centralNotice .cnotice {
            border-color: #0003;
            /* will be inverted */
        }
        .mw-parser-output tr + tr > .navbox-abovebelow, .mw-parser-output tr + tr > .navbox-group, .mw-parser-output tr + tr > .navbox-image, .mw-parser-output tr + tr > .navbox-list {
            border-color: #0001;
        }
        
        /* Links */
        /* Links: normal */
        html a,
        html .vector-menu-tabs li a,
        /* Backwards compatible VectorTabs, deprecated in MW v1.35. */
        html .vectorTabs li a,
        html .toctogglelabel,
        html .mw-parser-output a.external,
        html .mw-parser-output a.extiw,
        html .mw-parser-output a.extiw:active,
        html #mw-panel .portal .body li a {
            /* color: #69f; Proposal below for level AA conformance, see also https://phabricator.wikimedia.org/T233266
	   `#36c` is transformed by :root `filter` to be closer to chosen `#69f`. */
            color: hsl(220, 60%, 50%);
            /* will be inverted */
        }

        /* Links: visited */
        html a:visited,
        html .mw-parser-output a.extiw:visited,
        html #mw-panel .portal .body li a:visited {
            /* color: #709bbd; Proposal below uses to-be-standardized color from https://phabricator.wikimedia.org/T213778 */
            color: hsl(262, 36%, 50%);
            /* will be inverted */
        }
        
        /* Links: red */
        html a.new,
        html .vector-menu-tabs li.new a,
        html .vectorTabs li.new a,
        html a.new:visited {
            color: hsl(358, 80%, 50%);
            /* will be inverted */
        }    
        
      /*  html .toc a, */
        html .vector-toc .vector-toc-link {
            color: #000d;
            /* will be inverted */
        }
          
        
        /* STUFF FROM THE ORIGINAL THEME */

        /* set height for monobook and timeless, because the filter in FF needs dimensions to get it to apply */
        html {
            height: 100%;
        }

        /* Filter needs to reside on `html`, see https://phabricator.wikimedia.org/T221425#5153917 */
        html,
        /* All other selectors have `filter` double-applied to turn back to “normal” by inheritance */
        html img:not( .mw-invert),
        html video:not( .mw-invert),
        html ogvjs:not( .mw-invert),
        html svg:not( .mw-invert),
        html iframe:not( .mw-invert),
        html .mw-no-invert,
        html .cdx-no-invert,
        html td .diffchange,
        html .wvui-typeahead-suggestion__thumbnail,
        html .skin-minerva .mw-notification-visible .mw-notification-content,
        html .oo-ui-searchWidget-results .oo-ui-iconElement-icon,
        html .list-thumb,
        /* Extensions */
        html .media-viewer .image img,
        html .media-viewer .mw-file-description img {
            filter: invert( 1) hue-rotate( 180deg);
        }     

        /* Reset overrides, needed where double application above isn't working. */
        /* Vector modern */
        html .skin-vector .mw-logo-wordmark,
        html .skin-vector .mw-logo-tagline,
        html .skin-timeless .mw-wiki-title > img,
        html .wvui-icon svg,
        html .mw-ext-score img,
        html .mw-hiero-table img,
        /* My additions */
        .ombox {
            filter: none;
        }      
      
        /* Page previews */
        html .mwe-popups.flipped-y:after,
        html .mwe-popups.flipped-x-y:after {
            border-top: 11px solid #ddd;
        }
        html .mwe-popups.mwe-popups-no-image-pointer:after {
            border-bottom: 11px solid #ddd;
        }

        /* ::: Special Element Treatments ::: */
        /* Image thumbnails */
        html .thumbimage,
        html figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
        html figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
            border: 0;
        }

        /* Content image (thumbnail) SVGs */
        /* `*not( .mbox-image )` exception doesn't work for unclear reasons */
        html .image img[ src*='svg'],
        html .mw-file-description img[ src*='svg'],
        html img[ src*='Wiktionary-logo'] {
            background-color: #fff;
            border-radius: 1px;
        }

        /* Dealing with false positives from selector above */
        html .mw-echo-ui-notificationItemWidget-icon img[ src*='svg'],
        html .mbox-image .image img[ src*='svg'],
        html .mbox-image .mw-file-description img[ src*='svg'],
        /* Emoji generated by [[Template:Emoji]] */
        html .emoji .image img,
        html .emoji .mw-file-description img,
        /* Vote symbols on Talk pages */
        html .image img[ alt^="Symbol"],
        html .mw-file-description img[ alt^="Symbol"] {
            background-color: transparent;
        }

        /* Contributions menu */
        html .cx-callout-1:after {
            border-bottom-color: #ddd;
        }

        /* Mob...