diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 4a9ded3..4f25bc7 100644
--- 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
index 6f7bed9..0bc88e9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,6 @@
-
+