light theme support

7 files changed, 66 insertions, 14 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
diff --git a/templates/base.html.j2 b/templates/base.html.j2
index 1925ed2..fa1f2d8 100644
--- a/templates/base.html.j2
+++ b/templates/base.html.j2
@@ -7,8 +7,10 @@
     <meta property="og:title" content="{% block page_title_short %}{{ site.blog_name }}{% endblock %}" />
     <meta property="og:type" content="article" />
     <meta property="og:url" content="{{ url }}" />
-    <link rel="stylesheet" href="{{ site.assets_path }}/css/blog.css" />
     <link rel="stylesheet" href="{{ site.assets_path_static }}/css/bootstrap-grid.min.css" />
+    <link rel="stylesheet" href="{{ site.assets_path }}/css/font.css" />
+    <script src="{{ site.assets_path }}/js/theme.js"></script>
+    <link rel="stylesheet" href="{{ site.assets_path }}/css/blog.css" />
 </head>
 <body>
 <div class="bootstrap-wrapper">
@@ -24,7 +26,7 @@
  dOB68QO8PdUOpugoO9bD
 CgggbU8OU qOp qOdoUOdcb
     6OuU</span><span class="yellow">  /</span><span class="green">p u gcoUodpP</span>
-<span class="yellow">      \\\//  /<span><span class="green">douUP</span>
+<span class="yellow">      \\\//  /</span><span class="green">douUP</span>
 <span class="yellow">        \\\////
          |||/\
          |||\/
diff --git a/templates/sidebar.html.j2 b/templates/sidebar.html.j2
index fdb1b4b..f675735 100644
--- a/templates/sidebar.html.j2
+++ b/templates/sidebar.html.j2
@@ -22,8 +22,18 @@ Sometimes I touch upon some more artistic stuff, but mostly just to amuse myself
 <span>Git repositories</span>
 </a>
 <h3 class="magenta">Top tags</h3>
+<p>ls <a href="/tags">~/tags/</a></p>
 <p>{% for tag in site.top_tags %}<a href="/tags/{{ tag }}.html">{{ tag }}/</a>{% if not loop.last %} {% endif %}{% endfor %}</p>
-<p>more: cd <a href="/tags">~/tags</a></p>
+<h3 class="magenta">I want different colors</h3>
+<p>~/themes/</p>
+<a href="javascript:void(0);" class="icon-text theme-selector-light" onclick="setTheme('light')">
+    <img src="/assets/image/sun.svg" class="svg-icon" />
+    <span>sweet-celestia.sh</span>
+</a>
+<a href="javascript:void(0);" class="icon-text theme-selector-dark" onclick="setTheme('dark')">
+    <img src="/assets/image/moon.svg" class="svg-icon" />
+    <span>luna-eclipsed.sh</span>
+</a>
 <h3 class="magenta">Never miss a post</h3>
 <a href="/feed.xml" class="icon-text">
 <img src="/assets/image/rss.svg" class="svg-icon" />