Skip to content

Instantly share code, notes, and snippets.

@wfurphy
Last active December 7, 2023 08:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wfurphy/b380ab08d930c425f9add8c50073a4b6 to your computer and use it in GitHub Desktop.
Save wfurphy/b380ab08d930c425f9add8c50073a4b6 to your computer and use it in GitHub Desktop.
Stylus custom style for Home Assistant documentation
/* ==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;
}
}
@wfurphy
Copy link
Author

wfurphy commented Oct 28, 2022

home-assistant-io-css-dark

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment