Theme selector re-added & improved.
This commit is contained in:
parent
78543503ae
commit
9a2b08fdaa
3 changed files with 56 additions and 4 deletions
14
project.el
14
project.el
|
@ -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
BIN
project.el.sig
Binary file not shown.
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue