still shit

adhamu · Sep 26, 2023 · a169688 · a169688
1 parent 00ea3f5
commit a169688
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
@@ -1,10 +1,11 @@
-import { useContext, useMemo, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 
 import { SettingsContext } from '../context/SettingsProvider'
 import { getTheme } from '../theme'
 
 export const useTheme = () => {
   const {
+    setSetting,
     settings: {
       themeLight,
       themeDark,
@@ -14,6 +15,10 @@ export const useTheme = () => {
 
   const [theme, setTheme] = useState(getTheme(prefersDarkMode))
 
+  useEffect(() => {
+    setSetting('prefersDarkMode', prefersDarkMode)
+  }, [])
+
   useMemo(() => {
     let themeToSet
 
@@ -25,6 +30,9 @@ export const useTheme = () => {
           .map(([key, value]) => `--startpage-${key}: ${value}`)
           .join(';')}}`
       )
+      document.styleSheets[0].insertRule(
+        localStorage.getItem('darkCssProperties') || ''
+      )
     } else {
       themeToSet = themeLight ?? getTheme(false)
       window.localStorage.setItem(
@@ -33,6 +41,9 @@ export const useTheme = () => {
           .map(([key, value]) => `--startpage-${key}: ${value}`)
           .join(';')}}`
       )
+      document.styleSheets[0].insertRule(
+        localStorage.getItem('lightCssProperties') || ''
+      )
     }
 
     if (JSON.stringify(themeToSet) !== JSON.stringify(theme)) {

diff --git a/src/index.html b/src/index.html
@@ -11,7 +11,6 @@
 </head>
 
 <body>
-  <main id="app"></main>
   <script>
     function appendCssVariables() {
       if (typeof window !== 'undefined') {
@@ -40,9 +39,11 @@
     ; (() => {
       appendCssVariables()
       document.body.classList.toggle('dark-mode', prefersDarkMode())
+      localStorage.setItem('prefersDarkMode', prefersDarkMode())
     })()
   </script>
   <script type="module" src="./index.tsx"></script>
+  <main id="app"></main>
 </body>
 
 </html>