Merge pull request #23 from welpo/style/default-light-mode

💄 style: default light mode

README.md

@@ -6,17 +6,17 @@ A simple blog theme powered by [Zola](getzola.org). See a live preview [here](ht
 
 
 <details open>
-  <summary>Dark theme</summary>
-  
-![tabi-dark](https://user-images.githubusercontent.com/6399341/216767530-cfe66699-ee6a-40b0-93ff-ce6879f5381e.png)
-</details>
-
-<details close>
   <summary>Light theme</summary>
 
 ![tabi-light](https://user-images.githubusercontent.com/6399341/216767537-94c431bb-10f9-48c3-942b-e64b27d98c7d.png)
 </details>
 
+<details close>
+  <summary>Dark theme</summary>
+
+![tabi-dark](https://user-images.githubusercontent.com/6399341/216767530-cfe66699-ee6a-40b0-93ff-ce6879f5381e.png)
+</details>
+
 ## Features
 
 - [X] Dark and light modes. Default theme is dark with a switcher in the navbar.

sass/main.scss

@@ -23,26 +23,6 @@
   font-family: 'Inter', Arial, Helvetica, sans-serif;
   line-height: 190%;
 
-  --bg-0: #818181;
-  --bg-1: rgba(133, 133, 133, 0.5);
-  --bg-2: rgba(23, 23, 23, 100%);
-  --primary-color: #ef5350;
-  --hover-color: white;
-  --background-color: #1f1f1f;
-  --secondary-color: #696969;
-  --highlights: #b35a5a;
-  --links: #d35d6e;
-  --text-color: #e1e1e1;
-  --code: #ef476f;
-  --border-color: rgb(0, 0, 0);
-  --light-border-color: rgba(255, 255, 255, 0.1);
-  --input-back: #4b4a4a;
-  --input-color: #294797;
-  --meta-color: rgb(198, 197, 197);
-  --accent-color: #ff9a8c;
-}
-
-[data-theme='light'] {
   --bg-0: #fff;
   --bg-1: #e7e7e7;
   --bg-2: #fefefe;
@@ -62,6 +42,25 @@
   --accent-color: #aacb73;
 }
 
+[data-theme='dark'] {
+  --bg-0: #818181;
+  --bg-1: rgba(133, 133, 133, 0.5);
+  --bg-2: rgba(23, 23, 23, 100%);
+  --primary-color: #ef5350;
+  --hover-color: white;
+  --background-color: #1f1f1f;
+  --secondary-color: #696969;
+  --highlights: #b35a5a;
+  --links: #d35d6e;
+  --text-color: #e1e1e1;
+  --code: #ef476f;
+  --border-color: rgb(0, 0, 0);
+  --light-border-color: rgba(255, 255, 255, 0.1);
+  --input-back: #4b4a4a;
+  --input-color: #294797;
+  --meta-color: rgb(198, 197, 197);
+  --accent-color: #ff9a8c;
+}
 html {
   background-color: var(--background-color);
   color: var(--text-color);

sass/parts/_footer.scss

@@ -40,10 +40,18 @@ footer {
       width: 32px;
       height: 32px;
       padding: 18px;
-      filter: invert(1);
+      filter: invert(0);
     }
 
-[data-theme="light"] {
+.social {
+  &:hover {
+    &>img {
+      filter: invert(1);
+    }
+  }
+}
+
+[data-theme="dark"] {
   .social {
     &:hover {
       &>img {
@@ -52,7 +60,7 @@ footer {
     }
 
     &>img {
-      filter: none;
+      filter: invert(1);
     }
   }
 }

sass/parts/_theme-switch.scss

@@ -23,21 +23,21 @@
       border: none;
     }
     .sun {
-      opacity: 1;
+      opacity: 0;
     }
     .moon {
-      opacity: 0;
+      opacity: 1;
     }
   }
   input {
     display: none;
     &:checked + .switch {
       .sun {
-        opacity: 0;
-      }
-      .moon {
         opacity: 1;
       }
+      .moon {
+        opacity: 0;
+      }
     }
   }
 }

sass/syntax/syntax-ayu-dark.scss

@@ -1,9 +1,9 @@
 .z-code {
   color: #bfbab0;
-  background-color: #151515;
+  background-color: #272430;
 }
-[data-theme="light"] .z-code {
-  background-color: #272430
+[data-theme="dark"] .z-code {
+  background-color: #151515;
 }
 .z-comment,
 .z-punctuation.z-definition.z-comment {

static/js/main.js

@@ -6,7 +6,7 @@ var currentTheme = localStorage.getItem('theme');
 // check what is current theme right now and activate it
 if (currentTheme) {
     document.documentElement.setAttribute('data-theme', currentTheme);
-    if (currentTheme === 'light') {
+    if (currentTheme === 'dark') {
         themeSwitcher.checked = true;
     }
 }
@@ -14,13 +14,13 @@ if (currentTheme) {
 // switch between themes
 function switchTheme(e) {
     if (e.target.checked) {
-        document.documentElement.setAttribute('data-theme', 'light');
-        localStorage.setItem('theme', 'light');
-    }
-    else {        
         document.documentElement.setAttribute('data-theme', 'dark');
         localStorage.setItem('theme', 'dark');
     }
+    else {
+        document.documentElement.setAttribute('data-theme', 'light');
+        localStorage.setItem('theme', 'light');
+    }
 }
 
 // event listener on checkbox change