[style] add dark mode (#2029)

This commit is contained in:
t0stiman 2021-08-01 13:31:58 +02:00 committed by GitHub
parent c673917aca
commit 3637777070
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 75 additions and 0 deletions

View file

@ -120,3 +120,26 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
}
}
/* Dark theme, will automatically be set for those that have dark mode on their OS. */
@media (prefers-color-scheme: dark){
* {
scrollbar-color: #202324 #454a4d;
}
body {
background-color: #202325;
color: #e8e6e3;
}
a, a:link, a:visited {
color: #0A6AB6;
}
/* Section */
section {
background-color: #181A1B;
}
}

View file

@ -383,3 +383,55 @@ h5 {
}
}
/* Dark theme */
@media (prefers-color-scheme: dark){
* {
scrollbar-color: #202324 #454a4d;
}
body {
background-color: #202325;
color: #e8e6e3;
}
a, a:link, a:visited {
color: #0A6AB6;
}
/* Header */
select,
input[type="text"],
input[type="number"] {
background-color: #181A1B;
/* does not apply to placeholder text without !important */
color: white !important;
border: 1px solid #393E40;
}
/* Section */
section {
background-color: #181A1B;
}
/* Buttons */
button {
background: #0A6AB6 none repeat scroll 0% 0%;
}
button:hover {
background: #004daa;
}
@supports (display: grid){
.parameters input[type="number"] {
color: #BAB4AB;
}
}
/* Show more / less */
.showmore:hover, .showless:hover {
color: #d8d3cb;
}
}