fix: switch theme when system theme is changed

Author: egoist

src/components/App.tsx

@@ -1,4 +1,4 @@
-import { h, FC, useEffect, useState } from 'renderer'
+import { h, FC, useEffect, useState, useCallback } from 'renderer'
 import inView from 'element-in-view'
 import { InstanceOptions } from '../docup'
 import { Navbar } from './Navbar'
@@ -103,16 +103,34 @@ export const App: FC<{ options: InstanceOptions }> = ({ options }) => {
   }, [])
 
   useEffect(() => {
-    if (options.useSystemTheme !== false) {
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.documentElement.classList.add('dark')
-      }
-    }
     // Update location.hash on scrolling
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
 
+  const mediaQuery = '(prefers-color-scheme: dark)'
+  const updateDarkModeClass = useCallback(() => {
+    if (options.useSystemTheme === false) return
+
+    if (window.matchMedia(mediaQuery).matches) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }, [options.useSystemTheme])
+
+  useEffect(() => {
+    updateDarkModeClass()
+
+    const listener = () => updateDarkModeClass()
+    const m = window.matchMedia(mediaQuery)
+    m.addEventListener('change', listener)
+
+    return () => {
+      m.removeEventListener('change', listener)
+    }
+  }, [])
+
   return (
     <div>
       {showSidebar && (

src/components/Navbar.tsx

@@ -8,10 +8,7 @@ export const Navbar: FC<{
   toggleSidebar: () => void
 }> = ({ title, base, navLinks, toggleSidebar }) => {
   return (
-    <header
-      style={{ borderColor: 'var(--navbar-border-fg)' }}
-      class="fixed w-full top-0 left-0 h-12 navbar flex items-center justify-between px-5 border-b"
-    >
+    <header class="fixed w-full top-0 left-0 h-12 navbar flex items-center justify-between px-5 border-b">
       <div class="flex items-center">
         <h1 class="mr-8 text-2xl">
           <a href={base}>{title}</a>

src/components/Sidebar.tsx

@@ -44,7 +44,7 @@ export const Sidebar: FC<{
     <div
       ref={sidebarRef}
       class={
-        `fixed md:pt-12 sidebar left-0 top-0 bottom-0` +
+        `fixed md:pt-12 sidebar left-0 top-0 bottom-0 border-r` +
         (showSidebar ? ' sidebar_show' : '')
       }
     >

src/css/main.css

@@ -1,9 +1,9 @@
 :root {
   --fg: #000;
   --bg: #fff;
+  --border-fg: rgb(218, 218, 218);
   --navbar-bg: #ffffff;
   --navbar-fg: inherit;
-  --navbar-border-fg: rgb(218, 218, 218);
   --navlink-fg: inherit;
   --navlink-hover-fg: inherit;
   --navlink-hover-bg: #d8d8d8;
@@ -33,8 +33,8 @@
 .dark {
   --bg: #121212;
   --fg: #eaeaea;
+  --border-fg: rgb(68, 68, 68);
   --navbar-bg: var(--bg);
-  --navbar-border-fg: rgb(68, 68, 68);
   --sidebar-bg: var(--bg);
   --sidebar-text-fg: var(--fg);
   --code-block-fg: rgb(182, 182, 182);
@@ -50,6 +50,12 @@
   --loader-end-bg: #252525;
 }
 
+*,
+*::before,
+*::after {
+  border-color: var(--border-fg);
+}
+
 body {
   font-family: Lato;
   background: var(--bg);

tailwind.config.js

@@ -8,6 +8,9 @@ module.exports = {
       colors: {
         ...colors,
       },
+      borderColor: {
+        border: 'var(--border-fg)',
+      },
     },
   },
   variants: {},