refactor: dark mode improvements

2077-Collective · Aug 21, 2024 · 9c82c94 · 9c82c94
1 parent e191a34
commit 9c82c94
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 57 deletions.
diff --git a/research/src/components/Dropdown.svelte b/research/src/components/Dropdown.svelte
@@ -1,5 +1,7 @@
 <div class="group flex flex-col relative">
-    <button class="dropbtn flex gap-x-2 items-center hover:text-[#C6FF50]">
+    <button
+        class="dropbtn flex gap-x-2 items-center hover:text-greenLm hover:text-greenLm dark:hover:text-green"
+    >
         Resources
         <span class="">
             <svg

diff --git a/research/src/components/Header.svelte b/research/src/components/Header.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
-    import Sun from './icons/Sun.svelte'
-    import Moon from './icons/Moon.svelte'
     import MobileNav from './MobileNav.svelte'
     import Dropdown from './Dropdown.svelte'
-    import {
-        toggleTheme,
-        getTheme,
-        theme,
-        anotherStuff,
-    } from '../stores/theme.store'
+    import ToggleTheme from './ToggleTheme.svelte'
 </script>
 
 <header class="py-8 px-6 lg:px-32 max-w-screen-3xl m-auto w-full">
@@ -32,19 +25,7 @@
             </a>
         </div>
 
-        <div class="flex items-center">
-            <!-- <button
-                id="btn"
-                class="h-12 w-12 rounded-lg pr-8 hover:bg-gray-100 dark:hover:bg-gray-700"
-                on:click={toggleTheme}
-            >
-                {#if $theme === 'dark'}
-                    <Sun />
-                {:else}
-                    <Moon />
-                {/if}
-            </button> -->
-
+        <div class="flex items-center gap-0 md:gap-2 lg:gap-4">
             <MobileNav />
 
             <div class="font-bold hidden lg:flex items-center gap-x-8">
@@ -53,7 +34,8 @@
                 <a
                     href="https://2077.xyz/support"
                     target="_blank"
-                    class="font-bold hover:text-green">Support us</a
+                    class="font-bold hover:text-greenLm dark:hover:text-green"
+                    >Support us</a
                 >
                 <a
                     href="#subscribe"
@@ -62,6 +44,7 @@
                     Subscribe
                 </a>
             </div>
+            <ToggleTheme />
         </div>
     </nav>
 </header>
diff --git a/research/src/components/MobileNav.svelte b/research/src/components/MobileNav.svelte
@@ -17,11 +17,12 @@
         on:click={() => (open = false)}
     ></button>
     <div
-        class="fixed inset-y-0 right-0 md:w-2/5 max-w-sm w-full max-w-full bg-white shadow-lg z-50 overflow-y-auto flex flex-col p-4"
+        class="fixed inset-y-0 right-0 md:w-2/5 max-w-sm w-full max-w-full bg-white dark:bg-gray shadow-lg z-50 overflow-y-auto flex flex-col p-4"
         transition:slide={{ duration: 300, easing: quintOut }}
     >
-        <button class="self-end text-gray-700" on:click={() => (open = false)}
-            >Close</button
+        <button
+            class="self-end text-gray-700 p-2"
+            on:click={() => (open = false)}>X</button
         >
         <div class="flex flex-col gap-4">
             <div>

diff --git a/research/src/components/ToggleTheme.svelte b/research/src/components/ToggleTheme.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { toggleTheme, theme } from '../stores/theme.store'
+    import Sun from './icons/Sun.svelte'
+    import Moon from './icons/Moon.svelte'
+    import { beforeUpdate } from 'svelte'
+
+    beforeUpdate(() => {
+        const theme = localStorage.getItem('theme')
+        if (theme === 'dark') {
+            document.documentElement.classList.add('dark')
+        } else {
+            document.documentElement.classList.remove('dark')
+        }
+    })
+</script>
+
+<button
+    id="btn"
+    class="rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center"
+    on:click={toggleTheme}
+>
+    {#if $theme === 'dark'}
+        <Sun />
+    {:else}
+        <Moon />
+    {/if}
+</button>
diff --git a/research/src/components/icons/ExternalLink.svelte b/research/src/components/icons/ExternalLink.svelte
@@ -10,12 +10,13 @@
     xmlns="http://www.w3.org/2000/svg"
     style:width={size}
     style:height={size}
+    class="text-current"
 >
     <g id="Interface / External_Link">
         <path
             id="Vector"
             d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11"
-            stroke="#000000"
+            stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"

diff --git a/research/src/components/icons/Hamburguer.svelte b/research/src/components/icons/Hamburguer.svelte
@@ -1,12 +1,28 @@
 <svg
-    class=""
+    class="text-current"
     width="28"
     height="18"
     viewBox="0 0 28 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
 >
-    <rect class="" width="28" height="2" rx="1" fill="#1b1b1b"></rect>
-    <rect y="8" width="28" height="2" rx="1" fill="#1b1b1b"></rect>
-    <rect x="8" y="16" width="20" height="2" rx="1" fill="#1b1b1b"></rect>
+    <rect class="text-current" width="28" height="2" rx="1" fill="currentColor"
+    ></rect>
+    <rect
+        class="text-current"
+        y="8"
+        width="28"
+        height="2"
+        rx="1"
+        fill="currentColor"
+    ></rect>
+    <rect
+        class="text-current"
+        x="8"
+        y="16"
+        width="20"
+        height="2"
+        rx="1"
+        fill="currentColor"
+    ></rect>
 </svg>
diff --git a/research/src/components/icons/Moon.svelte b/research/src/components/icons/Moon.svelte
@@ -1,4 +1,14 @@
-<svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<script lang="ts">
+    export let size = '24px'
+</script>
+
+<svg
+    width="30px"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    style:width={size}
+    style:height={size}
+>
     <path
         fill-rule="evenodd"
         d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"

diff --git a/research/src/components/icons/Sun.svelte b/research/src/components/icons/Sun.svelte
@@ -1,7 +1,11 @@
+<script lang="ts">
+    export let size = '24px'
+</script>
+
 <svg
     class="fill-yellow-500"
-    width="24"
-    height="24"
+    style:width={size}
+    style:height={size}
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

diff --git a/research/src/layouts/Layout.astro b/research/src/layouts/Layout.astro
@@ -17,29 +17,19 @@ const _ogImage = new URL(
 ---
 
 <script is:inline>
-    function myFunction() {
-        document.getElementById('myDropdown').classList.toggle('show')
-    }
-
-    /**Dropdown menu logic */
-    window.onclick = function (event) {
-        if (!event.target.matches('.dropbtn')) {
-            var dropdowns = document.getElementsByClassName('dropdown-content')
-            var i
-            for (i = 0; i < dropdowns.length; i++) {
-                var openDropdown = dropdowns[i]
-                if (openDropdown.classList.contains('show')) {
-                    openDropdown.classList.remove('show')
-                }
-            }
-        }
+    // We need this script here to avoid flashing the light theme before the dark theme is applied
+    const theme = localStorage.getItem('theme')
+    if (theme === 'dark') {
+        document.documentElement.classList.add('dark')
+    } else {
+        document.documentElement.classList.remove('dark')
     }
 </script>
 
 <html lang="en" class="h-full">
     <BaseHead ogImage={_ogImage} title={title} description={description} />
-    <Header client:load />
-    <body class="bg-white min-h-screen">
+    <Header client:only />
+    <body class="bg-white dark:bg-black dark:text-white min-h-screen">
         <slot />
     </body><Footer />
 </html>

diff --git a/research/src/stores/theme.store.ts b/research/src/stores/theme.store.ts
@@ -7,13 +7,9 @@ const Themes = {
 type Theme = (typeof Themes)[keyof typeof Themes]
 const LOCAL_STORAGE_KEY = 'theme'
 
-export const theme = atom<Theme>(Themes.Light)
-
-export const anotherStuff = atom<boolean>(false)
+export const theme = atom<Theme>(getLocalStorageTheme())
 
 export function toggleTheme() {
-    console.log('toggleTheme called')
-
     const currentTheme = localStorage.getItem(LOCAL_STORAGE_KEY)
 
     if (currentTheme === Themes.Dark || !currentTheme) {
@@ -30,3 +26,17 @@ export function toggleTheme() {
 export function getTheme() {
     return theme
 }
+
+function getLocalStorageTheme(): Theme {
+    const localStorageTheme = localStorage.getItem(LOCAL_STORAGE_KEY)
+
+    if (!localStorageTheme) {
+        return Themes.Light
+    }
+
+    if (localStorageTheme === Themes.Dark) {
+        return Themes.Dark
+    }
+
+    return Themes.Light
+}