light theme support

5 files changed, 51 insertions, 11 deletions

diff --git a/assets/css/blog.css b/assets/css/blog.css
index 8928235..028e4b9 100644
--- a/assets/css/blog.css
+++ b/assets/css/blog.css
@@ -12,14 +12,27 @@
 	--term-white: #b5aba8;
 }
 
-@font-face {
-	font-family: "jetbrains-mono";
-	src: url("/assets/font/JetBrainsMono-Regular.woff2");
+[used-theme="light"] {
+    --term-fg: #515151;
+    --term-bg: #f3f3f3;
+    --term-black: #515151;
+    --term-red: #ff001e;
+    --term-green: #5eaa0c;
+    --term-yellow: #f29b00;
+    --term-blue: #0098ca;
+    --term-magenta: #d52ad2;
+    --term-cyan: #00dad5;
+    --term-white: #f3f3f3;
+}
+
+a[class*="theme-selector"] {
+    color: var(--term-green);
 }
 
-html {
-	font-family: "jetbrains-mono", serif;
-	font-variant-ligatures: none;
+html:not([used-theme]) .theme-selector-dark,
+html[used-theme="dark"] .theme-selector-dark,
+html[used-theme="light"] .theme-selector-light {
+    display: none;
 }
 
 header, .icon-text {
@@ -39,7 +52,7 @@ header, .icon-text {
 
 header {
     margin-top: 0rem;
-    margin-bottom 1rem;
+    margin-bottom: 1rem;
 }
 
 header div {
@@ -61,7 +74,7 @@ header span {
 
 hr {
     width: 90%;
-	color: var(--term-black);
+	color: var(--term-bg);
 }
 
 .nobr,
@@ -105,7 +118,7 @@ hr {
 .code-block,
 .code-block-wrap {
     border-style: solid;
-    border-color: var(--term-white);
+    border-color: var(--term-fg);
     border-width: 0.1rem;
     padding: 0.7rem;
 }
@@ -171,7 +184,7 @@ img
 	max-width: 100%;
 	max-height: 100%;
 	border-style: solid;
-    border-color: var(--term-black);
+    border-color: var(--term-bg);
     border-width: 0.1rem;
     width: 100%;
 }
@@ -215,7 +228,7 @@ a.posts-listing-link:hover :is(h2, h3)
 @media (min-width: 768px) {
     main {
         border-width: 0.15rem;
-        border-color: var(--term-black);
+        border-color: var(--term-bg);
         border-style: none solid none solid;
     }
 }
diff --git a/assets/css/font.css b/assets/css/font.css
new file mode 100644
index 0000000..cda8b7a
--- /dev/null
+++ b/assets/css/font.css
@@ -0,0 +1,9 @@
+@font-face {
+    font-family: "jetbrains-mono";
+    src: url("/assets/font/JetBrainsMono-Regular.woff2");
+}
+
+html {
+    font-family: "jetbrains-mono", serif;
+    font-variant-ligatures: none;
+}
\ No newline at end of file
diff --git a/assets/image/moon.svg b/assets/image/moon.svg
new file mode 100644
index 0000000..c0e3eeb
--- /dev/null
+++ b/assets/image/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#f0c674" d="M235.54 150.21a104.84 104.84 0 0 1-37 52.91A104 104 0 0 1 32 120a103.1 103.1 0 0 1 20.88-62.52a104.84 104.84 0 0 1 52.91-37a8 8 0 0 1 10 10a88.08 88.08 0 0 0 109.8 109.8a8 8 0 0 1 10 10Z"/></svg>
\ No newline at end of file
diff --git a/assets/image/sun.svg b/assets/image/sun.svg
new file mode 100644
index 0000000..126f454
--- /dev/null
+++ b/assets/image/sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#f0c674" d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m8 24a64 64 0 1 0 64 64a64.07 64.07 0 0 0-64-64m-69.66 5.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"/></svg>
\ No newline at end of file
diff --git a/assets/js/theme.js b/assets/js/theme.js
new file mode 100644
index 0000000..ffb6d48
--- /dev/null
+++ b/assets/js/theme.js
@@ -0,0 +1,16 @@
+"use strict"
+const THEME_KEY = "used-theme";
+
+function updateTheme() {
+    let theme = localStorage.getItem(THEME_KEY);
+    if (theme != null) {
+        document.documentElement.setAttribute(THEME_KEY, theme)
+    }
+}
+
+function setTheme(theme) {
+    localStorage.setItem(THEME_KEY, theme);
+    updateTheme();
+}
+
+updateTheme();
\ No newline at end of file