umami/hooks/useTheme.js

69 lines
1.9 KiB
JavaScript
Raw Normal View History

import { useEffect } from 'react';
import useStore, { setTheme } from 'store/app';
2022-08-29 05:20:54 +02:00
import { getItem, setItem } from 'next-basics';
import { THEME_COLORS, THEME_CONFIG } from 'lib/constants';
import { colord } from 'colord';
const selector = state => state.theme;
2020-09-20 10:33:39 +02:00
2023-05-18 08:20:06 +02:00
export function useTheme() {
2021-04-28 11:12:17 +02:00
const defaultTheme =
2021-04-28 11:18:54 +02:00
typeof window !== 'undefined'
? window?.matchMedia('(prefers-color-scheme: dark)')?.matches
2021-04-28 11:12:17 +02:00
? 'dark'
: 'light'
: 'light';
const theme = useStore(selector) || getItem(THEME_CONFIG) || defaultTheme;
const primaryColor = colord(THEME_COLORS[theme].primary);
const colors = {
theme: {
...THEME_COLORS[theme],
},
chart: {
text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200,
views: {
hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
backgroundColor: primaryColor.alpha(0.4).toRgbString(),
borderColor: primaryColor.alpha(0.7).toRgbString(),
hoverBorderColor: primaryColor.toRgbString(),
},
visitors: {
hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
backgroundColor: primaryColor.alpha(0.6).toRgbString(),
borderColor: primaryColor.alpha(0.9).toRgbString(),
hoverBorderColor: primaryColor.toRgbString(),
},
},
map: {
baseColor: THEME_COLORS[theme].primary,
fillColor: THEME_COLORS[theme].gray100,
strokeColor: THEME_COLORS[theme].primary,
hoverColor: THEME_COLORS[theme].primary,
},
};
2020-09-20 10:33:39 +02:00
function saveTheme(value) {
setItem(THEME_CONFIG, value);
setTheme(value);
2020-09-20 10:33:39 +02:00
}
useEffect(() => {
document.body.setAttribute('data-theme', theme);
}, [theme]);
useEffect(() => {
2023-02-15 11:27:18 +01:00
const url = new URL(window?.location?.href);
const theme = url.searchParams.get('theme');
if (['light', 'dark'].includes(theme)) {
saveTheme(theme);
}
}, []);
return { theme, saveTheme, colors };
2020-09-20 10:33:39 +02:00
}
2023-05-18 08:20:06 +02:00
export default useTheme;