diff --git a/site/source/contexts/DarkModeContext.tsx b/site/source/contexts/DarkModeContext.tsx index 6114a1d0e..e6c0fc377 100644 --- a/site/source/contexts/DarkModeContext.tsx +++ b/site/source/contexts/DarkModeContext.tsx @@ -1,21 +1,21 @@ import { useIsEmbedded } from '@/components/utils/useIsEmbedded' +import { getItem, setItem } from '@/storage/safeLocalStorage' import React, { useEffect } from 'react' type DarkModeContextType = [boolean, (darkMode: boolean) => void] const persistDarkMode = (darkMode: boolean) => { - localStorage.setItem('darkMode', darkMode.toString()) + setItem('darkMode', darkMode.toString()) } const getDefaultDarkMode = () => { if (import.meta.env.SSR) { return false } - if (localStorage?.getItem('darkMode')) { - return localStorage.getItem('darkMode') === 'true' - } - return matchMedia?.('(prefers-color-scheme: dark)').matches + return getItem('darkMode') + ? getItem('darkMode') === 'true' + : matchMedia?.('(prefers-color-scheme: dark)').matches } export const DarkModeContext = React.createContext([ diff --git a/site/source/storage/safeLocalStorage.ts b/site/source/storage/safeLocalStorage.ts index 3748d918f..153144bbe 100644 --- a/site/source/storage/safeLocalStorage.ts +++ b/site/source/storage/safeLocalStorage.ts @@ -12,6 +12,7 @@ export function removeItem(key: string) { return null } } + export function getItem(key: string) { try { return window.localStorage.getItem(key) @@ -24,6 +25,7 @@ export function getItem(key: string) { return null } } + export function setItem(key: string, value: string) { try { return window.localStorage.setItem(key, value) diff --git a/site/source/template.html b/site/source/template.html index c7e96504a..0bcac3a58 100644 --- a/site/source/template.html +++ b/site/source/template.html @@ -188,10 +188,26 @@