summaryrefslogtreecommitdiffstats
path: root/components/ThemeSwitcher/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/ThemeSwitcher/index.tsx')
-rw-r--r--components/ThemeSwitcher/index.tsx35
1 files changed, 35 insertions, 0 deletions
diff --git a/components/ThemeSwitcher/index.tsx b/components/ThemeSwitcher/index.tsx
new file mode 100644
index 0000000..f6f6a68
--- /dev/null
+++ b/components/ThemeSwitcher/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import classes from './theme-switcher.module.css';
+
+export function ThemeSwitcher() {
+ const [theme, setTheme] = React.useState('dark');
+
+ React.useEffect(() => {
+ const SITE_THEME = window.localStorage.getItem('site_theme');
+
+ if (SITE_THEME) {
+ setTheme(SITE_THEME);
+ } else {
+ setTheme('dark');
+ window.localStorage.setItem('site_theme', 'dark');
+ }
+ }, []);
+
+ React.useEffect(() => {
+ const root = document.querySelector('html');
+ root?.setAttribute('data-theme', theme);
+ window.localStorage.setItem('site_theme', theme);
+ }, [theme]);
+
+ return (
+ <div className={classes.wrapper}>
+ <input
+ type="checkbox"
+ name="aa"
+ checked={theme === 'dark'}
+ onChange={(ev) => setTheme(ev.target.checked ? 'dark' : 'light')}
+ />
+ <span>{theme === 'dark' ? '🌞' : '🕯️'}</span>
+ </div>
+ );
+}