Add dark mode for nanao.moe

src/node_modules/components/DarkModeButton.svelte

@@ -0,0 +1,21 @@
+<script>
+    let icon = "brightness_low";
+    let text = "Dark Mode";
+
+    function toggleMode() {
+        if(window.document.body.getAttribute("data-theme") != "dark") {
+            window.document.body.setAttribute("data-theme","dark");
+            icon = "brightness_high";
+            text = "Light Mode"
+        } else {
+            window.document.body.setAttribute("data-theme","light");
+            icon = "brightness_low";
+            text = "Dark Mode"
+        }
+    }
+</script>
+
+<div class="menu__item" on:click={toggleMode}>
+    <i class="material-icons md-24">{icon}</i>
+    <p class="menu__text">{text}</p>
+</div>

src/node_modules/components/Header.svelte

@@ -1,15 +1,17 @@
 <script>
     import NavItem from "./NavItem.svelte";
+    import NavSeparator from "./NavSeparator.svelte";
+    import DarkModeButton from "components/DarkModeButton.svelte";
 
     let menu_shown = false;
     let detached = false;
     let scrollY = 0;
-    function handleScroll (e) {
+    function handleScroll(e) {
         detached = scrollY > 64;
     }
 </script>
 
-<svelte:window on:scroll={handleScroll} bind:scrollY="{scrollY}" />
+<svelte:window on:scroll={handleScroll} bind:scrollY />
 
 <div>
     <div class:site-header={true} class:enabled={menu_shown} class:detached>
@@ -54,6 +56,8 @@
                         icon="rss_feed"
                         text="Blog"
                     />
+                    <NavSeparator />
+                    <DarkModeButton />
                 </div>
             </header>
         </div>

src/node_modules/components/NavSeparator.svelte

@@ -0,0 +1,3 @@
+
+<div class="menu__separator">
+</div>

src/style/common/_base.scss

@@ -2,7 +2,42 @@
 
 html {
     font-family: 'Exo 2',-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
 }
+:root, [data-theme="light"] {
+    --text-color: #{$text-light};
+    --bg-color: #{$bg-light};
+    --accent-color: #{$accent-light};
+    --accent-bg-color: #{$accent-bg-light};
+    --highlight-color: #{$highlight-light};
+    --highlight-bg-color: #{$highlight-bg-light};
+}
+
+[data-theme="dark"] {
+    --text-color: #{$text-dark};
+    --bg-color: #{$bg-dark};
+    --accent-color: #{$accent-dark};
+    --accent-bg-color: #{$accent-bg-dark};
+    --highlight-color: #{$highlight-dark};
+    --highlight-bg-color: #{$highlight-bg-dark};
+}
+
+@media (prefers-color-schme: dark) {
+    :root:not[data-theme="light"] {
+        --text-color: #{$text-dark};
+        --bg-color: #{$bg-dark};
+        --accent-color: #{$accent-dark};
+        --accent-bg-color: #{$accent-bg-dark};
+        --highlight-color: #{$highlight-dark};
+        --highlight-bg-color: #{$highlight-bg-dark};
+    }
+}
+
+body {
+    color: var(--text-color);
+    background-color: var(--bg-color);
+}
+
 .main {
     padding: 1rem;
     @include screen(md) {
@@ -49,7 +84,7 @@ html {
     }
 
     a {
-        color: $accent-primary;
+        color: var(--accent-color);
         &:hover {
             text-decoration: underline;
         }
@@ -64,20 +99,20 @@ html {
         list-style-type: decimal;
     }
     code {
-        background-color: $bg-primary;
+        background-color: var(--accent-bg-color);
-        color: $accent-primary;
+        color: var(--accent-color);
         white-space: pre-wrap;
     }
     blockquote {
-        border-left: 0.5rem solid $accent-primary;
+        border-left: 0.5rem solid var(--accent-color);
         @include my(2rem);
         padding: 0.5rem 0 0.5rem 2rem;
     }
     pre {
-        background: $bg-primary;
+        background: var(--accent-bg-color);
-        color: $accent-primary;
+        color: var(--accent-color);
         padding: 0.5rem;
-        border: 1px solid $accent-primary;
+        border: 1px solid var(--accent-color);
     }
 }
 

src/style/common/_theme.scss

@@ -13,8 +13,18 @@ $font-medium: 500;
 
 $white: #FFFFFF;
 $black: #000000;
+$theme-blue: #22558C;
 
-$accent-primary: #22558C;
+$text-light: #000000;
-$bg-primary: #E5E7EB;
+$bg-light: #FFFFFF;
+$accent-light: #22558C;
+$accent-bg-light: #E5E7EB;
+$highlight-light: #22558C;
+$highlight-bg-light: #9FD3F0;
 
-$bg-secondary: #9FD3F0;
+$text-dark: #FFFFFF;
+$bg-dark: #263238;
+$accent-dark: #9FD3F0;
+$accent-bg-dark: #455A64;
+$highlight-dark: #9FD3F0;
+$highlight-bg-dark: #3B90C6;

src/style/components/_copyarea.scss

@@ -1,8 +1,8 @@
 .copyarea {
-    background: $bg-primary;
+    background: var(--accent-bg-color);
-    color: $accent-primary;
+    color: var(--accent-color);
     padding: 0.5rem;
-    border: 1px solid $accent-primary;
+    border: 1px solid var(--accent-color);
     font-family: 'Courier New', Courier, monospace;
     cursor: pointer;
 }

src/style/components/_gameitem.scss

@@ -9,7 +9,7 @@
         flex-direction: row;
     }
     &:hover {
-        background-color: $bg-secondary;
+        background-color: var(--highlight-bg-color);
     }
     
     &__title {

src/style/components/_header.scss

@@ -69,7 +69,7 @@
             height: 100%;
         }
         &:hover {
-            background-color: $accent-primary;
+            background-color: $theme-blue;
         }
     }
 
@@ -83,7 +83,7 @@
         white-space: nowrap;
         @include transition;
         &:hover {
-            background-color: $accent-primary;
+            background-color: $theme-blue;
         }
     }
     &__icon {

src/style/components/_mediaitem.scss

@@ -4,7 +4,7 @@
     @include transition;
 
     &:hover {
-        background-color: $bg-secondary;
+        background-color: var(--highlight-bg-color);
     }
     
     &__caption {

src/style/components/_menu.scss

@@ -3,7 +3,6 @@
     display: block;
     @include transition;
     overflow: hidden;
-    margin-left: 4rem;
     
     &.enabled {
         max-height: 100vh;
@@ -14,10 +13,11 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        cursor: pointer;
         @include transition;
 
         &:hover {
-            background-color: $accent-primary;
+            background-color: $theme-blue;
         }
 
         a {
@@ -26,14 +26,25 @@
             align-items: center;
             width: 100%;
             height: 100%;
-
+        }
-            i {
+        i {
-                @include px(1rem);
+            display: inline-block;
-            }
+            width: 4rem;
-            p {
+            height: 3rem;
-                display: inline-block;
+            color: $white;
-                flex-grow: 1;
+            text-align: center;
-            }
+            @include px(0.50rem);
+            @include py(0.75rem);
+        }
+        p {
+            display: inline-block;
+            flex-grow: 1;
+            @include px(1rem);
         }
     }
+    &__separator {
+        margin-left: 5rem;
+        margin-right: 4rem;
+        border-top: 0.125rem solid $white;
+    }
 }

src/style/components/_projectitem.scss

@@ -7,7 +7,7 @@
     min-height: 12rem;
     
     &:hover {
-        background-color: $bg-secondary;
+        background-color: var(--highlight-bg-color);
     }
 
     &__image {