watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 14:17:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Updated theme handling.

Browse source
This commit is contained in:
Mike Cao 2025-04-01 22:58:38 -05:00
parent c71e9b5707
commit 34a8fa100c
10 changed files with 57 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/hooks/index.ts
View file

@ -44,5 +44,4 @@ export * from './useRegionNames';
export * from './useReport';
export * from './useSticky';
export * from './useNavigation';
export * from './useTheme';
export * from './useTimezone';

4
src/components/hooks/queries/useLoginQuery.ts
View file

@ -8,13 +8,13 @@ export function useLoginQuery(): {
user: any;
setUser: (data: any) => void;
} & UseQueryResult {
const { get, useQuery } = useApi();
const { post, useQuery } = useApi();
const user = useApp(selector);
const query = useQuery({
queryKey: ['login'],
queryFn: async () => {
const data = await get('/auth/verify');
const data = await post('/auth/verify');
setUser(data);

63
src/components/hooks/useTheme.ts
View file

@ -1,63 +0,0 @@
import { useEffect, useMemo } from 'react';
import { useApp, setTheme } from '@/store/app';
import { getItem, setItem } from '@/lib/storage';
import { DEFAULT_THEME, THEME_COLORS, THEME_CONFIG } from '@/lib/constants';
import { colord } from 'colord';
const selector = (state: { theme: string }) => state.theme;
export function useTheme() {
const theme = useApp(selector) || getItem(THEME_CONFIG) || DEFAULT_THEME;
const { primary, text, line, fill } = THEME_COLORS[theme];
const primaryColor = colord(THEME_COLORS[theme].primary);
const colors = useMemo(() => {
return {
theme: {
...THEME_COLORS[theme],
},
chart: {
text,
line,
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: primary,
fillColor: fill,
strokeColor: primary,
hoverColor: primary,
},
};
}, [theme]);
const saveTheme = (value: string) => {
setItem(THEME_CONFIG, value);
setTheme(value);
};
useEffect(() => {
document.body.setAttribute('data-theme', theme);
}, [theme]);
useEffect(() => {
const url = new URL(window?.location?.href);
const theme = url.searchParams.get('theme');
if (['light', 'dark'].includes(theme)) {
saveTheme(theme);
}
}, []);
return { theme, saveTheme, colors };
}