Add dark theme

blogo-input/blogo.json

@@ -1,5 +1,5 @@
 {
-  "title": "arnaucube",
+  "title": "arnaucube - blog",
   "relativePath": "/blog",
   "absoluteUrl": "https://arnaucube.com/blog",
   "postsDir": "posts",

blogo-input/css/style.css

@@ -7,6 +7,15 @@ body {
   font-family: 'Roboto', sans-serif;
 }
 
+.dark-theme { /* used for body class */
+  filter: invert(100%) hue-rotate(180deg);
+  background-color: #111;
+}
+
+.dark-theme img, .dark-theme video, .dark-theme iframe, .dark-theme .onoffswitch-label, .dark-theme code {
+    filter: invert(100%) hue-rotate(180deg);
+}
+
 a {
   text-decoration:none!important;
 }
@@ -24,3 +33,45 @@ h1,h2, h3, h4, h5 {
   padding-top: 20px;
 }
 
+.postThumb {
+  color:#000000;
+  text-decoration:none;
+}
+.postThumb:hover {
+  background: #f9f9f9;
+}
+
+/* switch button */
+.onoffswitch {
+   position: relative; width: 46px;
+   -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+   display: none;
+}
+.onoffswitch-label {
+   display: block; overflow: hidden; cursor: pointer;
+   height: 20px; padding: 0; line-height: 20px;
+   border: 2px solid #FFFFFF; border-radius: 20px;
+   background-color: #9E9E9E;
+   transition: background-color 0.3s ease-in;
+   margin-bottom: 0;
+}
+.onoffswitch-label:before {
+   content: "";
+   display: block; width: 20px; margin: 0px;
+   background: #FFFFFF;
+   position: absolute; top: 0; bottom: 0;
+   right: 24px;
+   border: 2px solid #FFFFFF; border-radius: 20px;
+   transition: all 0.3s ease-in 0s;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label {
+   background-color: #fbc5a0;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
+   border-color: #fbc5a0;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label:before {
+   right: 0px;
+}

blogo-input/index.html

@@ -40,7 +40,14 @@
                       style="height:50px;font-size:130%;">
       <div class="container">
         <a href="/blog" style="color:#000;">Blog index</a>
-        <a href="/" style="color:#000;float:right;">arnaucube.com</a>
+        <div style="float:right;">
+          <a href="/" style="color:#000;display:inline-block;">arnaucube.com</a>
+          <div class="onoffswitch" style="margin:10px;display:inline-block;" title="change theme">
+            <input onclick="switchTheme()" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
+              id="themeSwitcher">
+            <label class="onoffswitch-label" for="themeSwitcher"></label>
+          </div>
+        </div>
       </div>
       <img style="height:5px; width:100%; margin-top:8px;" src="img/gradient-line.jpg" />
     </nav>
@@ -92,6 +99,33 @@
           throwOnError : true
         });
       });
+
+      ///
+      let theme = localStorage.getItem("theme");
+      if ((theme === "light-theme")||(theme==null)) {
+          theme = "light-theme";
+          document.getElementById("themeSwitcher").checked = false;
+      } else if (theme === "dark-theme") {
+          theme = "dark-theme";
+          document.getElementById("themeSwitcher").checked = true;
+      }
+      document.body.className = theme;
+      localStorage.setItem("theme", theme);
+
+      function switchTheme() {
+        theme = localStorage.getItem("theme");
+        if (theme === "light-theme") {
+          theme = "dark-theme";
+          document.getElementById("themeSwitcher").checked = true;
+        } else {
+          theme = "light-theme";
+          document.getElementById("themeSwitcher").checked = false;
+        }
+        document.body.className = theme;
+        localStorage.setItem("theme", theme);
+
+        console.log(theme);
+      }
     </script>
     <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 

blogo-input/postThumbTemplate.html

@@ -1,4 +1,3 @@
-<div class="row" style="color:#000000;text-decoration:none;">
+<div class="row postThumb">
         [blogo-index-post-template]
-    <hr>
 </div>