add: light/dark mode for website (#93)

njord-rs · Jun 12, 2024 · a635df1 · a635df1
2 parents d57e3b4 + def7380
commit a635df1
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 17 deletions.
diff --git a/website/src/app.css b/website/src/app.css
@@ -3,6 +3,20 @@
 @tailwind utilities;
 
 @layer base {
+  :root {
+    --color-background: rgb(244 244 245);
+    --color-foreground: rgb(24 24 27);
+    --color-primary: rgb(180 83 9);
+    --color-secondary: rgb(228 228 231);
+  }
+
+  :root[class~="dark"] {
+    --color-background: rgb(24 24 27);
+    --color-foreground: rgb(244 244 245);
+    --color-primary: rgb(180 83 9);
+    --color-secondary: rgb(39 39 42);
+  }
+
   h1 {
     font-weight: 700;
     font-size: 1.875em;

diff --git a/website/src/lib/components/DatabaseCard.svelte b/website/src/lib/components/DatabaseCard.svelte
@@ -8,6 +8,6 @@
 </script>
 
 <div class={`flex flex-col items-center gap-1 ${readyStyles}`}>
-  <Database />
+  <Database class="text-primary" />
   <p class="text-sm font-semibold">{label}</p>
 </div>
diff --git a/website/src/lib/components/Navbar.svelte b/website/src/lib/components/Navbar.svelte
@@ -4,24 +4,32 @@
   import Github from '$lib/components/icons/Github.svelte';
   import XTwitter from '$lib/components/icons/XTwitter.svelte';
   import Discord from '$lib/components/icons/Discord.svelte';
+  import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
 </script>
 
-<header class="sticky top-0 inset-x-0 z-10 bg-zinc-900 font-secondary w-full">
+<header class="sticky top-0 inset-x-0 z-10 bg-background font-secondary w-full">
   <div class="container items-center justify-between flex h-16">
     <!-- Logo -->
     <Link class="flex items-center gap-2" href="/" ariaLabel="Home">
       <img src="logo.png" alt="Logo" class="w-12" />
       <span class="text-xl font-semibold">Njord</span>
     </Link>
 
-    <nav class="flex gap-8 items-center">
+    <nav class="flex gap-2 md:gap-8 items-center">
       <!-- Main menu -->
       <ul>
-        <li><Link href="https://docs.rs/njord/latest/njord/">Docs</Link></li>
+        <li>
+          <Link class="hover:text-primary" href="https://docs.rs/njord/latest/njord/">Docs</Link>
+        </li>
+      </ul>
+
+      <!--  -->
+      <ul>
+        <li><ThemeSwitcher /></li>
       </ul>
 
       <!-- Social links -->
-      <ul class="flex items-center gap-3">
+      <ul class="flex items-center gap-1 md:gap-3">
         <li>
           <SocialLink href="https://x.com/njord_rs" ariaLabel="X">
             <XTwitter />

diff --git a/website/src/lib/components/ThemeSwitcher.svelte b/website/src/lib/components/ThemeSwitcher.svelte
@@ -0,0 +1,42 @@
+<script>
+  import Moon from '$lib/components/icons/Moon.svelte';
+  import Sun from '$lib/components/icons/Sun.svelte';
+
+  import { browser } from '$app/environment';
+
+  let darkMode = true;
+
+  function handleSwitchDarkMode() {
+    darkMode = !darkMode;
+
+    localStorage.setItem('theme', darkMode ? 'dark' : 'light');
+
+    darkMode
+      ? document.documentElement.classList.add('dark')
+      : document.documentElement.classList.remove('dark');
+  }
+
+  if (browser) {
+    if (
+      localStorage.theme === 'dark' ||
+      (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      document.documentElement.classList.add('dark');
+      darkMode = true;
+    } else {
+      document.documentElement.classList.remove('dark');
+      darkMode = false;
+    }
+  }
+</script>
+
+<button
+  class="p-2.5 rounded-full hover:bg-secondary flex items-center justify-center"
+  on:click={handleSwitchDarkMode}
+>
+  {#if darkMode}
+    <Sun />
+  {:else}
+    <Moon />
+  {/if}
+</button>
diff --git a/website/src/lib/components/icons/Database.svelte b/website/src/lib/components/icons/Database.svelte
@@ -1,20 +1,21 @@
 <script>
+  let clazz = '';
+  export { clazz as class };
   export let size = '28';
-  export let color = '#78350f';
 </script>
 
 <svg
+  class={clazz}
   aria-hidden="true"
   width={size}
   height={size}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
-  stroke={color}
+  stroke="currentColor"
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
-  class="feather feather-database"
 >
   <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
   <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path

diff --git a/website/src/lib/components/icons/Moon.svelte b/website/src/lib/components/icons/Moon.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let size = '16';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
diff --git a/website/src/lib/components/icons/Sun.svelte b/website/src/lib/components/icons/Sun.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let size = '16';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
diff --git a/website/src/lib/components/sections/Hero.svelte b/website/src/lib/components/sections/Hero.svelte
@@ -11,7 +11,7 @@
     alt="Viking city"
   />
 
-  <div class="fade-out pointer-events-none"></div>
+  <div class="fade-out pointer-events-none bg-gradient-to-b from-transparent to-zinc-200 dark:to-zinc-900"></div>
 
   <div class="container">
     <div>
@@ -27,13 +27,13 @@
   </div>
 </section>
 
-<style>
+<style lang="postcss">
   .fade-out {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100px;
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #18181b);
+    /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #18181b); */
   }
 </style>
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
@@ -21,6 +21,15 @@
     content="A lightweight and extensible ORM library and Query Builder for Rust."
   />
   <meta property="twitter:image" content="/meta.png" />
+
+  <!-- Prevent page flash -->
+  <script>
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.classList.add('dark')
+    } else {
+        document.documentElement.classList.remove('dark')
+    }
+  </script>
 </svelte:head>
 
 <div

diff --git a/website/tailwind.config.js b/website/tailwind.config.js
@@ -1,8 +1,7 @@
-import colors from 'tailwindcss/colors';
-
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
+  darkMode: 'class',
   theme: {
     container: {
       center: true,
@@ -17,16 +16,16 @@ export default {
     extend: {
       colors: {
         background: {
-          DEFAULT: colors.zinc['900'],
+          DEFAULT: 'var(--color-background)',
         },
         foreground: {
-          DEFAULT: colors.zinc['100'],
+          DEFAULT: 'var(--color-foreground)',
         },
         primary: {
-          DEFAULT: '#78350f',
+          DEFAULT: 'var(--color-primary)',
         },
         secondary: {
-          DEFAULT: colors.zinc['800'],
+          DEFAULT: 'var(--color-secondary)',
         },
       },
     },