Add light theme #5
312
css/index.css
312
css/index.css
|
@ -280,123 +280,253 @@ input.search {
|
|||
}
|
||||
|
||||
/* Actual colors */
|
||||
body {
|
||||
background-color: #363636;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #363636;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: #0f070f;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid #363636;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #212121;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #212121;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: #212121;
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
td, th {
|
||||
background: #212121;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background: #e4e4e4;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #f0eee4;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: #212121;
|
||||
color: #f0eee4;
|
||||
}
|
||||
|
||||
.main {
|
||||
background-color: #212121;
|
||||
color: #f0eee4;
|
||||
}
|
||||
|
||||
.main a {
|
||||
color: #89bfff;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #89bfff;
|
||||
}
|
||||
|
||||
.main a:hover {
|
||||
color: #ccccff;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #ccccff;
|
||||
}
|
||||
|
||||
.main a.literalMatch {
|
||||
color: #6666ff;
|
||||
}
|
||||
|
||||
.main a.noexist {
|
||||
color: #f34000 !important;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
background-color: #262626;
|
||||
color: #89bfff;
|
||||
}
|
||||
|
||||
.titledate {
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background-color: #363636;
|
||||
}
|
||||
|
||||
.toolbar > a, .titlebar > a {
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border: solid 1px #666644;
|
||||
}
|
||||
|
||||
input.search {
|
||||
border-color: #363636;
|
||||
background-color: #363636;
|
||||
color: #f0eee4;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
color: #aaaaaa;
|
||||
border-color: #aaaaaa;
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
color: #19bfff;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
color: #bbbbff;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: #0f070f;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
background-color: #fffffe;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid #363636;
|
||||
}
|
||||
blockquote {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #212121;
|
||||
}
|
||||
hr {
|
||||
border-top: 1px solid #fffff0;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #212121;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
pre {
|
||||
background: #fdfff5;
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: #212121;
|
||||
color: #dddddd;
|
||||
}
|
||||
code {
|
||||
background: #fdfff5;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
td, th {
|
||||
background: #212121;
|
||||
}
|
||||
table {
|
||||
background-color: #fdfff5;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
td, th {
|
||||
background: #fdfff5;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background: #e4e4e4;
|
||||
}
|
||||
thead {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background: #eeeeee;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background: #e4e4e4;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #f0eee4;
|
||||
}
|
||||
tr:nth-child(odd) {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: #212121;
|
||||
color: #f0eee4;
|
||||
}
|
||||
.footer {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.main {
|
||||
background-color: #212121;
|
||||
color: #f0eee4;
|
||||
}
|
||||
textarea {
|
||||
background-color: #fdfff5;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.main a {
|
||||
color: #89bfff;
|
||||
}
|
||||
.main {
|
||||
background-color: #fdfff5;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #89bfff;
|
||||
}
|
||||
.main a {
|
||||
color: #89a0f0;
|
||||
}
|
||||
|
||||
.main a:hover {
|
||||
color: #ccccff;
|
||||
}
|
||||
.footer a {
|
||||
color: #89a0f0;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #ccccff;
|
||||
}
|
||||
.main a:hover {
|
||||
color: #ccc0ff;
|
||||
}
|
||||
|
||||
.main a.literalMatch {
|
||||
color: #6666ff;
|
||||
}
|
||||
.footer a:hover {
|
||||
color: #ccc0ff;
|
||||
}
|
||||
|
||||
.main a.noexist {
|
||||
color: #f34000 !important;
|
||||
}
|
||||
.main a.literalMatch {
|
||||
color: #6666ff;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
background-color: #262626;
|
||||
color: #89bfff;
|
||||
}
|
||||
.main a.noexist {
|
||||
color: #f34000 !important;
|
||||
}
|
||||
|
||||
.titledate {
|
||||
color: #777777;
|
||||
}
|
||||
.titlebar {
|
||||
background-color: #ffffee;
|
||||
color: #89bfff;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background-color: #363636;
|
||||
}
|
||||
.titledate {
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.toolbar > a, .titlebar > a {
|
||||
color: #eeeeee;
|
||||
}
|
||||
.toolbar {
|
||||
background-color: #fffff0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border: solid 1px #666644;
|
||||
}
|
||||
.toolbar a {
|
||||
-webkit-filter: invert(100%);
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
input.search {
|
||||
border-color: #363636;
|
||||
background-color: #363636;
|
||||
color: #f0eee4;
|
||||
}
|
||||
.toolbar > a, .titlebar > a {
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
color: #aaaaaa;
|
||||
border-color: #aaaaaa;
|
||||
background-color: #262626;
|
||||
}
|
||||
.sidebar {
|
||||
border: solid 1px #666644;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
color: #19bfff;
|
||||
}
|
||||
input.search {
|
||||
border-color: #fffff0;
|
||||
background-color: #fffff0;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
color: #bbbbff;
|
||||
.sidebar {
|
||||
color: #aaaaaa;
|
||||
border-color: #aaaaaa;
|
||||
background-color: #fffffe;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
color: #19a0ff;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
color: #bbbbff;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue