Skip to content

Home Assistant Docs - Dark Mode by wfurphy

Mirrored from https://gist.githubusercontent.com/wfurphy/b380ab08d930c425f9add8c50073a4b6/raw/51519424c9ff76fa0429c952070eb4d687550624/home-assistant.io.user.css

Screenshot of Home Assistant Docs - Dark Mode

Details

Authorwfurphy

LicenseMIT

Categoryhome-assistant.io

Created

Updated

Size2.6 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Home Assistant Documentation in Dark mode

Notes

Because the bright white background of Home Assistant's documentation is hard on the eyes in the wee hours of the home-automation morning.

Source code

/* ==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;
    }


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

Reviews

No reviews yet.