alvierahman90/styles.alv.cx
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

simplify dark mode implementation

Browse Source
This commit is contained in:
Akbar Rahman 2022-04-12 17:22:02 +01:00
parent 1237d953b5
commit af0a758eb9
Signed by: alvierahman90
GPG Key ID: 20609519444A1269
2 changed files with 12 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
base.css
View File

@ -1,24 +1,24 @@
:root { :root {
--fg-light-mode: #454545; --fg: #454545;
--bg-light-mode: #fefefe; --bg: #fefefe;
--a-light-mode: #07a; --a: #07a;
--a-visited-light-mode: #941352; --a-visited: #941352;
} }
body { body {
font-family: monospace, sans-serif; font-family: monospace, sans-serif;
color: var(--fg-light-mode); color: var(--fg);
font-size: 16px; font-size: 16px;
margin: 2em auto; margin: 2em auto;
max-width: 800px; max-width: 800px;
padding: 1em; padding: 1em;
line-height: 1.4; line-height: 1.4;
overflow-wrap: break-word; overflow-wrap: break-word;
background-color: var(--bg-light-mode); background-color: var(--bg);
} }
a { color: var(--a-light-mode); } a { color: var(--a); }
a:visited { color: var(--a-visited-light-mode); } a:visited { color: var(--a-visited); }
.tableWrapper { .tableWrapper {
max-width: 100%; max-width: 100%;

18
modules/darkmode.css
View File

@ -1,15 +1,11 @@
:root { :root {
--fg-dark-mode: #ccc; --fg: #ccc;
--bg-dark-mode: #111; --bg: #111;
--a-dark-mode: #07a; --a: #07a;
--a-visited-dark-mode: #aa346d; --a-visited: #aa346d;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body {
color: var(--fg-dark-mode);
background-color: var(--bg-dark-mode);
}
img, video { img, video {
opacity: .75; opacity: .75;
transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out;
@ -17,10 +13,4 @@
img:hover, video:hover { img:hover, video:hover {
opacity: 1; opacity: 1;
} }
a {
color: var(--a-dark-mode);
}
a:visited {
color: var(--a-visited-dark-mode);
}
} }