diff --git a/index.html b/index.html index 64e043b..1489c04 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ (function() { const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches const setting = localStorage.getItem('color-schema') || 'auto' - if (setting === 'dark' || (prefersDark && setting !== 'light')) + if (setting === 'dark' || (prefersDark && setting !== 'auto')) document.documentElement.classList.toggle('dark', true) })() diff --git a/src/App.tsx b/src/App.tsx index 2e7ba3f..af9d133 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,12 @@ import { useRoutes } from 'react-router-dom' +import Footer from './components/footer' import { routes } from './routes' const App = () => { return <>

hello world

{useRoutes(routes)} + } diff --git a/src/utils/dark.tsx b/src/utils/dark.tsx index a7c919c..3d88753 100644 --- a/src/utils/dark.tsx +++ b/src/utils/dark.tsx @@ -1,13 +1,14 @@ export function useDark() { - const [value, setValue] = useState(window.localStorage.getItem('colorSchema') || 'auto') + const [value, setValue] = useState(window.localStorage.getItem('color-schema') || 'auto') const toggleDark = () => { - setValue(value === 'auto' ? 'dark' : 'auto') - window.localStorage.setItem('colorSchema', value) + const newValue = value === 'auto' ? 'dark' : 'auto' + setValue(newValue) + window.localStorage.setItem('color-schema', newValue) } const isDark = value === 'dark' if (document) useEffect(() => { document.documentElement.classList.toggle('dark', isDark) }) - return [isDark, toggleDark] + return [isDark, toggleDark] as [boolean, () => void] } diff --git a/tsconfig.json b/tsconfig.json index 0636798..01adae6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,6 +5,7 @@ "jsx": "react-jsx", "module": "commonjs", "rootDir": "./src", + "baseUrl": "./", "allowJs": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true,