adafruit.com dark mode by s-light

/* ==UserStyle==
@name           adafruit.com dark mode
@namespace      github.com/s-light/
@version        2.3.0
@description    adafruit website in dark/night mode
@author         Stefan Krüger s-light.eu
==/UserStyle== */
@-moz-document domain("adafruit.com") {
    /* global */
    :root {
        --bg: black;
        --bg-light: hsl(250, 100%, 10%);
        --bg-highlight: hsl(250, 100%, 30%);
        --bg-highlight2: hsl(250, 100%, 50%);
        --bg-gradient: linear-gradient( to bottom,
        var(--bg-highlight),
        var(--bg-highlight2));
        --bg-gradient-dark: linear-gradient( to bottom,
        var(--bg-light),
        var(--bg-highlight));

        --text: hsl(42, 65%, 50%);
        --text-highlight: hsl(170, 100%, 50%);
    }
}

@-moz-document url-prefix("https://www.adafruit.com") {
    /* shop */
    #inner-wrapper {
        background-color: var(--bg);
        color: var(--text);
    }

    .product-info #prod-right-side h1 {
        color: inherit;
    }

    .product-info .meta_pid_boxes li a {
        color: inherit;
    }

    .shopping-guides-container .shopping-guide > * {
        z-index: 1;
    }

    .shopping-guides-container .shopping-guide > img {
        z-index: 0;
    }

    .dnt-youtube-overlay {
        background-color: inherit;
        border: 1px solid;
    }
}

@-moz-document url-prefix("https://learn.adafruit.com") {
    /* learn */
    body,
    textarea,
    pre,
    input,
    body.pages,
    body.editor,
    body.pdf,
    body.guides.featured_products,
    body.compare_versions,
    body.guides {
        background-color: var(--bg);
        color: var(--text);
    }

    .nav-bar {
        background: var(--bg-gradient-dark);
    }

    code {
        color: var(--text);
        background-color: var(--bg-highlight2);
    }

    .code-element .download-code,
    .code-element .code-element-footer {
        border-color: var(--bg-highlight2);
        background-color: var(--bg-light);
    }

    .hljs {
        background-color: var(--bg-light);
        color: #545454;
    }

    pre.prettyprint,
    pre > .prettyprint {
        border-color: var(--bg-highlight2);
    }

    .search-wrapper input {
        background: var(--bg-gradient);
    }
}

@-moz-document url-prefix("https://forums.adafruit.com") {
    /* forum */
    html,
    body {
        background-color: var(--bg);
        color: var(--text);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--text);
    }

    #adafruit-header #site-header {
        background-color: var(--bg);
    }

    #adafruit-header #site-header .row-content ol.application-links li.selected {
        background-color: var(--bg-highlight);
    }

    #adafruit-header #site-header .row-content ol.application-links li.selected a {
        color: inherit;
    }

    #adafruit-header #shop-header .row-content .right-content .search-wrapper input {
        background-color: var(--bg-highlight);
    }

    .wrap {
        background-color: var(--bg-light);
    }

    .wrap #page-header div.navbar {
        background-color: inherit !important;
    }

    #nav-footer .breadcrumbs .crumb a:link,
    #nav-footer .breadcrumbs .crumb a:visited,
    #nav-breadcrumbs a:link,
    #nav-breadcrumbs a:visited {
        color: var(--text) !important;
    }


    .inputbox {
        background-color: inherit;
        border-color: var(--bg-highlight2);
        color: inherit;
    }

    .panel {
        background-color: inherit;
        color: inherit;
    }

    label,
    dd label {
        color: inherit;
    }

    fieldset dl:hover dt label {
        color: var(--text-highlight);
    }

    ul.topiclist {
        background-color: var(--bg-light);
        background-image: var(--bg-gradient);
    }

    li.row {
        transition: background-color 0.7s;
    }

    li.row:hover {
        background-color: var(--bg-highlight);
        transition: background-color 0.7s;
    }

    li.header dt,
    li.header dd,
    ul.topiclist li {
        color: inherit;
    }

    a:link,
    a:visited {
        color: var(--text-highlight);
    }



    .row {
        background-color: inherit;
    }


    .post.bg1,
    .post.bg2,
    .post.bg3,
    .panel.bg3 {
        background-color: inherit !important;
    }


    .bg2 {
        background-color: inherit;
        background-color: var(--bg);
    }

    .post.has-profile-rank,
    .administrator {
        background-color: var(--bg-highlight);
    }

    .post h3 a.first-unread,
    .post:target h3 a {
        color: inherit;
    }

    .postprofile {
        color: inherit;
    }

    .postprofile strong {
        color: inherit;
    }

    .postbody {
        color: inherit;
    }

    .content {
        color: inherit;
    }

    .post:target .content {
        color: inherit;
    }

    .codebox {
        background-color: inherit;
        border-color: var(--bg-highlight2);
    }

    /** new post **/
    #postingbox {
        background-color: inherit;
        color: inherit
    }

    .format-buttons .button,
    .button,
    button.button,
    button.button.button-icon-only {
        color: var(--text);
        background-color: inherit;
        border-radius: 20%;
        margin: 0 0.1em;
        border: none !important;
        box-shadow: 0 0 2px var(--bg-highlight2) inset;
    }

    .format-buttons .icon {
        color: inherit;
    }

    .button:focus,
    .button:hover {
        text-shadow: none;
    }

    .button-secondary:focus,
    .button-secondary:hover,
    .button:focus .icon,
    .button:hover .icon {
        color: var(--text-highlight);
    }

    :focus {
        outline: none;
    }

    ::-moz-focus-inner {
        border: 0;
    }

    .message-box textarea {
        color: var(--text);
        box-shadow: 0 0 10px black inset, 0 0 10px black inset, 0 0 20px black inset;
        border-radius: 1em;
    }

    #message-box textarea {
        padding: 0.8em;
    }

    select {
        border: none !important;
        box-shadow: 0 0 2px var(--bg-highlight2) inset;
        background-color: inherit;
        color: inherit;
    }

    input[type="number"] {
        background-color: inherit;
        color: inherit;
        border: solid 1px;
    }
}