Include system color theme option and use it by default

package.json

@@ -10,38 +10,39 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "gh-pages": "^6.1.1",
     "highlight.js": "^11.9.0",
     "lodash": "^4.17.21",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
     "mobx-state-tree": "^5.4.1",
     "mst-persist": "^0.1.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
     "react-scrollable-feed": "^2.0.1",
     "remark-gfm": "^4.0.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "use-media": "^1.5.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.0",
-    "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.17",
     "daisyui": "^4.7.2",
+    "eslint": "^8.56.0",
     "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.34",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.11",
-    "@types/lodash": "^4.14.202"
+    "typescript": "^5.2.2",
+    "vite": "^5.1.0"
   }
 }

src/components/ThemeSelector.tsx

@@ -1,16 +1,28 @@
 import _ from 'lodash'
 import { observer } from 'mobx-react-lite'
+import useMedia from 'use-media'
+import { useMemo } from 'react'
 
 import ChevronDown from '../icons/ChevronDown'
 import { settingStore } from '../models/SettingStore'
 
 const themes: Record<string, string> = {
-  dark: 'Default (Dark)',
+  _system: 'System theme',
+  dark: 'Dark',
   dracula: 'Dracula',
   garden: 'Light',
 }
 
 const ThemeSelector = observer(() => {
+  const selectedTheme = settingStore.theme
+  const prefersDarkMode = useMedia('(prefers-color-scheme: dark)')
+
+  const theme = useMemo(() => {
+    if (selectedTheme !== '_system') return selectedTheme
+
+    return prefersDarkMode ? 'dark' : 'garden'
+  }, [selectedTheme, prefersDarkMode])
+
   return (
     <div className="form-control">
       <div className="label pb-1 pt-0">
@@ -19,7 +31,7 @@ const ThemeSelector = observer(() => {
 
       <div className="dropdown ">
         <div tabIndex={0} role="button" className="btn btn-active">
-          {themes[settingStore.theme]}
+          {themes[selectedTheme]}
           <ChevronDown />
         </div>
 
@@ -34,8 +46,8 @@ const ThemeSelector = observer(() => {
                 name="theme-dropdown"
                 className="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                 aria-label={label}
-                value={value}
-                checked={settingStore.theme === value}
+                value={theme}
+                checked={selectedTheme === value}
                 onChange={() => settingStore.setTheme(value)}
               />
             </li>

src/models/SettingStore.ts

@@ -19,7 +19,7 @@ export const SettingStore = types
     host: types.maybe(types.string),
     models: types.optional(types.array(Model), []),
     _selectedModelName: types.maybeNull(types.string),
-    theme: types.optional(types.string, 'dark'),
+    theme: types.optional(types.string, '_system'),
   })
   .actions(self => ({
     selectModel(name: string) {