yogsototh/her.esy.fun
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Theme selector re-added & improved.

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2020-05-11 22:51:19 +02:00
parent 78543503ae
commit 9a2b08fdaa
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
3 changed files with 56 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
project.el
View file

@ -254,7 +254,19 @@
(with-current-buffer (find-file-noselect file-path) (with-current-buffer (find-file-noselect file-path)
(goto-char (point-min)) (goto-char (point-min))
(search-forward "<body>") (search-forward "<body>")
(insert "<div class=\"main\">") (insert (mapconcat 'identity
`("<input name=\"t\" type=\"radio\" id=\"l\">"
"<input name=\"t\" type=\"radio\" id=\"d\">"
"<div id=\"labels\">"
"<div class=\"content\">"
"<label for=\"l\">light</label>"
"|"
"<label for=\"d\">dark</label>"
"</div>"
"</div>"
"<div class=\"main\">")
"\n"))
(goto-char (point-max)) (goto-char (point-max))
(search-backward "</body>") (search-backward "</body>")
(insert "\n</div>\n") (insert "\n</div>\n")

BIN
project.el.sig
View file

Binary file not shown.

46
src/css/mk.css
View file

@ -214,10 +214,19 @@ figure, .figure {
} }
/* COLORS */ /* COLORS */
/* colortheme switch */
body>input { display: none; }
#labels > .content { margin: 0 auto; }
label { padding: 4px 20px; font-weight: 700; }
label:hover { cursor: pointer; }
:root { :root {
--b03: #2E3440; --b03: #2E3440;
--b02: #3B4252; --b02: #3B4252;
/* not used because light mode is has more contrast
--b01: #656b74; --b01: #656b74;
*/
--b00: #727781; --b00: #727781;
--b0: #989ea8; --b0: #989ea8;
--b1: #b0bac7; --b1: #b0bac7;
@ -232,6 +241,7 @@ figure, .figure {
--c: #00b0a3; --c: #00b0a3;
--g: #879a00; --g: #879a00;
/* default light */
--bg: var(--b3); --bg: var(--b3);
--rbg: var(--b2); --rbg: var(--b2);
--fg0: var(--b0); --fg0: var(--b0);
@ -241,7 +251,37 @@ figure, .figure {
--fhl: #FF0; --fhl: #FF0;
} }
@media (prefers-color-scheme: dark) { /* light checked */
input#l:checked ~ div {
--bg: var(--b3);
--rbg: var(--b2);
--fg0: var(--b0);
--fg: var(--b02);
--rfg: #000;
--hl: blue;
--fhl: #FF0;
}
input#l:checked ~ div img {
filter: none;
}
/* dark checked */
input#d:checked ~ div {
--bg: black;
--rbg: var(--b03);
--fg: var(--b1);
--fg0: var(--b00);
--rfg: var(--b2);
--hl: var(--y);
--fhl: #000;
}
input#d:checked ~ div img {
filter: brightness(0.5) saturate(0.5);
}
/* dark preferred */
@media (prefers-color-scheme: dark)
{
:root { :root {
--bg: black; --bg: black;
--rbg: var(--b03); --rbg: var(--b03);
@ -255,7 +295,7 @@ figure, .figure {
} }
/* Default color theme */ /* Default color theme */
body { body, body > div {
background: var(--bg); background: var(--bg);
color: var(--fg); color: var(--fg);
} }
@ -284,7 +324,7 @@ h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
nav a, nav a:visited { nav a, nav a:visited {
color: var(--fg); color: var(--fg);
} }
a:hover, .metas a:hover, nav a:hover, a:hover * a:hover, label:hover, .metas a:hover, nav a:hover, a:hover *
{ {
color: var(--fhl); color: var(--fhl);
background: var(--hl); background: var(--hl);