mmk2410/nextDESIGN
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Provide dark color scheme

Browse source
This commit is contained in:
Marcel Kapfer 2020-09-23 21:19:33 +02:00
parent 115d1f3522
commit 77fa67db92
Signed by: mmk2410
GPG key ID: CADE6F0C09F21B09
1 changed files with 37 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
assets/css/main.scss
View file

@ -12,11 +12,17 @@
***************/ ***************/
$c-bg: #fafafa; $c-bg: #fafafa;
$c-bg-inv: #333;
$c-bg-main: #fff; $c-bg-main: #fff;
$c-bg-main-inv: #222;
$c-primary: #4d3c9b; $c-primary: #4d3c9b;
$c-primary-inv: #755bf0;
$c-bg-category: #4d3c9b; $c-bg-category: #4d3c9b;
$c-bg-category-inv: #755bf0;
$c-bg-tag: #8171c8; $c-bg-tag: #8171c8;
$c-bg-tag-inv: #4d3c9b;
$c-font: #333; $c-font: #333;
$c-font-inv: #fafafa;
$c-nav-font: #f4f4f4; $c-nav-font: #f4f4f4;
$c-btn-font: $c-nav-font; $c-btn-font: $c-nav-font;
$c-btn-bg: $c-bg-category; $c-btn-bg: $c-bg-category;
@ -33,6 +39,11 @@ body {
color: $c-font; color: $c-font;
font-family: "Raleway", sans-serif; font-family: "Raleway", sans-serif;
line-height: 1.5; line-height: 1.5;
@media (prefers-color-scheme: dark) {
background-color: $c-bg-inv;
color: $c-font-inv;
}
} }
body > header { body > header {
@ -130,6 +141,11 @@ main {
max-width: 1000px; max-width: 1000px;
padding: 40px; padding: 40px;
@media (prefers-color-scheme: dark) {
background-color: $c-bg-main-inv;
box-shadow: none;
}
article { article {
margin: 40px 0; margin: 40px 0;
} }
@ -141,6 +157,10 @@ main {
text-decoration: underline; text-decoration: underline;
text-decoration-color: $c-primary; text-decoration-color: $c-primary;
text-decoration-thickness: 4px; text-decoration-thickness: 4px;
@media (prefers-color-scheme: dark) {
text-decoration-color: $c-primary-inv;
}
} }
h2 { h2 {
@ -152,6 +172,11 @@ main {
color: $c-font; color: $c-font;
text-decoration-color: $c-primary; text-decoration-color: $c-primary;
@media (prefers-color-scheme: dark) {
color: $c-font-inv;
text-decoration-color: $c-primary-inv;
}
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
@ -170,6 +195,10 @@ main {
color: $c-primary; color: $c-primary;
text-decoration: none; text-decoration: none;
@media (prefers-color-scheme: dark) {
color: $c-primary-inv;
}
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -222,10 +251,18 @@ main {
#tags > a { #tags > a {
background: $c-bg-tag; background: $c-bg-tag;
@media (prefers-color-scheme: dark) {
background: $c-bg-tag-inv;
}
} }
#categories > a { #categories > a {
background: $c-bg-category; background: $c-bg-category;
@media (prefers-color-scheme: dark) {
background: $c-bg-category-inv;
}
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {