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)
(goto-char (point-min))
(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))
(search-backward "</body>")
(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 */
/* colortheme switch */
body>input { display: none; }
#labels > .content { margin: 0 auto; }
label { padding: 4px 20px; font-weight: 700; }
label:hover { cursor: pointer; }
:root {
--b03: #2E3440;
--b02: #3B4252;
/* not used because light mode is has more contrast
--b01: #656b74;
*/
--b00: #727781;
--b0: #989ea8;
--b1: #b0bac7;
@ -232,6 +241,7 @@ figure, .figure {
--c: #00b0a3;
--g: #879a00;
/* default light */
--bg: var(--b3);
--rbg: var(--b2);
--fg0: var(--b0);
@ -241,7 +251,37 @@ figure, .figure {
--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 {
--bg: black;
--rbg: var(--b03);
@ -255,7 +295,7 @@ figure, .figure {
}
/* Default color theme */
body {
body, body > div {
background: var(--bg);
color: var(--fg);
}
@ -284,7 +324,7 @@ h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
nav a, nav a:visited {
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);
background: var(--hl);