Stylus custom style for Home Assistant documentation

home-assistant.io.user.css

/* ==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") {
    body {
        background-color: #353a44;
        color:#cdcdcd;
    }

    h1,h2, h1.title.delta {
        color: #fff;
    }

    h3,h4 {
        color: #ddd;
    }

    a.active {
        color: #febe6e !important;
    }

    /* code {
        background-color: #232832;
        color: #41bdf5;
        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;
    } */
    
    code {
        background-color: #232832;
        color: #41bdf5;
        border: none;
        box-shadow: -1px 3px 3px -1px #1a1c22, -2px 5px 5px -2px #21242b !important;
        border-left: 10px solid #0a0a0d !important;
        color: #cccccc !important;
    }

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

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

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

    code > span.number {
        color: #d29873;
    }
    
    code > span.operator {
        color: #ad75d3;
    }

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

    div.code-toolbar > pre > code {
        background-color: #21232b;
        color: #fff;
    }

    .site-header, footer {
        background-color: #21242b !important;
        color: #cdcdcd;
    }

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

    .site-title span {
        color: #fff;
    }

    .config-vars-label-name {
        color: #fff !important;
    }

    .config-vars-description {
        color: #cdcdcd !important;
    }

    .config-vars-required > span.true {
        color: #c678dd !important;
    }

    .note {
        background: #303443 !important;
    }

    .material-card {
        background-color: #494f66;
    }

    p.note::before, div.note::before {
        background-color: #41bdf5 !important;
    }

    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;
    }
}