Home Assistant Docs - Dark Mode by wfurphy

/* ==UserStyle==
@name         Home Assistant Docs - Dark Mode
@namespace    github.com/openstyles/stylus
@author       Will Furphy
@description  Home Assistant Documentation in Dark mode
@version      0.2.1
@license      MIT
@preprocessor default
==/UserStyle== */

@-moz-document domain("home-assistant.io") {
    html {
        --hawf-bg: #353a44;
        --hawf-box-bg: #232832;
        --hawf-box-alt-bg: #485268;
        --hawf-code-bg: #232832;
        --hawf-primary: #6cbbf0;
        --hawf-primary-dark: #007fa8;
        --hawf-special: #e90;
        --hawf-secondary: #e06c75;
        --hawf-text: #cdcdcd;
        background-color: var(--hawf-bg);
    }
    
    body, p.img {
        background-color: var(--hawf-bg) !important;
        color: var(--hawf-text);
    }

    h1,h2,h3,h4, .title {
        color: #fff !important;
    }
    
    a {
        color: var(--hawf-primary);
    }

    a.active {
        color: var(--hawf-special) !important;
    }
    
    .site-header a {
        color: var(--hawf-primary);
    }

    header .title, footer .title {
        color: #fff;
    }

    code {
        background-color: #000;
        color: var(--hawf-primary);
        border: none;
    }

    code.language-yaml {
        box-shadow: -1px 3px 3px -1px #1a1c22, -2px 5px 5px -2px #21242b !important;
        border-left: 10px solid #0a0a0d !important;
        color: #cccccc !important;
    }

    code.language-yaml > span.punctuation {
        color: #cccccc;
    }

    code.language-yaml > span.key {
        color: #e06c75;
    }

    code.language-yaml > span.string {
        color: #98c379;
    }

    code.language-yaml > span.number {
        color: #d29873;
    }


    div.code-toolbar > pre {
        background: none;
        border: none;
    }

    div.code-toolbar > pre > code {
        background-color: #21232b;
        color: #fff;
    }
    
    .aside-module {
        background-color: var(--hawf-box-bg) !important;
    }
    
    #toc-bar>.aside-module {
        background-color: var(--hawf-bg) !important;
    }
    
    .config-vars {
        background-color: var(--hawf-box-alt-bg) !important;
    }

    .config-vars-label-name {
        color: var(--hawf-secondary) !important;
    }

    .config-vars-description {
        color: var(--hawf-text) !important;
    }
    
    .config-vars-type {
        color: #488df0 !important;
    }

    .config-vars-required > span.true {
        color: var(--hawf-special) !important;
    }
    
    .alert {
        color: var(--hawf-bg);
    }
    
    .material-card {
        background-color: var(--hawf-box-alt-bg);
    }

    article.page > table {
        background-color: #303443;
        border-radius: 5px;
    }

    article.page > table > thead tr th {
        background-color: #41bdf5 !important;
        color: #fff;
    }

    article.page > table > thead tr th:first-child {
        border-top-left-radius: 5px !important;
    }

    article.page > table > thead tr th:last-child {
        border-top-right-radius: 5px !important;
    }

    article.page > table tr:nth-child(even) {
        background-color: #494f66 !important;
    }
    
    
    
}