move darkmode to a module
This commit is contained in:
parent
ddfde7ccd8
commit
b5be196dd9
25
base.css
25
base.css
@ -1,12 +1,8 @@
|
|||||||
:root {
|
:root {
|
||||||
--fg-light-mode: #454545;
|
--fg-light-mode: #454545;
|
||||||
--bg-light-mode: #fefefe;
|
--bg-light-mode: #fefefe;
|
||||||
--fg-dark-mode: #ccc;
|
|
||||||
--bg-dark-mode: #111;
|
|
||||||
--a-light-mode: #07a;
|
--a-light-mode: #07a;
|
||||||
--a-visited-light-mode: #941352;
|
--a-visited-light-mode: #941352;
|
||||||
--a-dark-mode: #07a;
|
|
||||||
--a-visited-dark-mode: #aa346d;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@ -102,24 +98,3 @@ kbd {
|
|||||||
margin-left: 0.2em;
|
margin-left: 0.2em;
|
||||||
margin-right: 0.2em;
|
margin-right: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
body {
|
|
||||||
color: var(--fg-dark-mode);
|
|
||||||
background-color: var(--bg-dark-mode);
|
|
||||||
}
|
|
||||||
img, video {
|
|
||||||
opacity: .75;
|
|
||||||
transition: opacity .5s ease-in-out;
|
|
||||||
}
|
|
||||||
img:hover, video:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: var(--a-dark-mode);
|
|
||||||
}
|
|
||||||
a:visited {
|
|
||||||
color: var(--a-visited-dark-mode);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
26
modules/darkmode.css
Normal file
26
modules/darkmode.css
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
:root {
|
||||||
|
--fg-dark-mode: #ccc;
|
||||||
|
--bg-dark-mode: #111;
|
||||||
|
--a-dark-mode: #07a;
|
||||||
|
--a-visited-dark-mode: #aa346d;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body {
|
||||||
|
color: var(--fg-dark-mode);
|
||||||
|
background-color: var(--bg-dark-mode);
|
||||||
|
}
|
||||||
|
img, video {
|
||||||
|
opacity: .75;
|
||||||
|
transition: opacity .5s ease-in-out;
|
||||||
|
}
|
||||||
|
img:hover, video:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: var(--a-dark-mode);
|
||||||
|
}
|
||||||
|
a:visited {
|
||||||
|
color: var(--a-visited-dark-mode);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user