From c7425b567e50f338ebe2cdf98c84c08ad0e5f389 Mon Sep 17 00:00:00 2001
From: EGOIST <0x142857@gmail.com>
Date: Thu, 9 Dec 2021 21:09:32 +0800
Subject: [PATCH] fix: switch theme when system theme is changed

---
 src/components/App.tsx     | 30 ++++++++++++++++++++++++------
 src/components/Navbar.tsx  |  5 +----
 src/components/Sidebar.tsx |  2 +-
 src/css/main.css           | 10 ++++++++--
 tailwind.config.js         |  3 +++
 5 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 3289124..5250bd8 100644
--- a/src/components/App.tsx
+++ b/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 && (
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 9d1c6b9..c01c356 100644
--- a/src/components/Navbar.tsx
+++ b/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>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 98989a9..6acdb01 100644
--- a/src/components/Sidebar.tsx
+++ b/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' : '')
       }
     >
diff --git a/src/css/main.css b/src/css/main.css
index 2f62107..4bf7a08 100644
--- a/src/css/main.css
+++ b/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);
diff --git a/tailwind.config.js b/tailwind.config.js
index 63f076b..3a566bd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,9 @@ module.exports = {
       colors: {
         ...colors,
       },
+      borderColor: {
+        border: 'var(--border-fg)',
+      },
     },
   },
   variants: {},