diff --git a/project.el b/project.el
index e62a7e2..b34466e 100644
--- a/project.el
+++ b/project.el
@@ -254,7 +254,19 @@
(with-current-buffer (find-file-noselect file-path)
(goto-char (point-min))
(search-forward "
")
- (insert "")
+ (insert (mapconcat 'identity
+ `("
"
+ "
"
+
+ "
"
+ "
"
+ ""
+ "|"
+ ""
+ "
"
+ "
"
+ "
")
+ "\n"))
(goto-char (point-max))
(search-backward "")
(insert "\n
\n")
diff --git a/project.el.sig b/project.el.sig
index aeed402..db80e7e 100644
Binary files a/project.el.sig and b/project.el.sig differ
diff --git a/src/css/mk.css b/src/css/mk.css
index b70c709..02fadb0 100644
--- a/src/css/mk.css
+++ b/src/css/mk.css
@@ -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);