xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 16:51:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix handle system theme

Browse Source
This commit is contained in:
DefectingCat
2023-11-10 10:46:25 +08:00
parent 91ea0280fb
commit 6f6f24a050
2 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/pages/blog/post-card.tsx
View File

@ -17,20 +17,20 @@ const PostCard = ({ post }: Props) => {
'hover:bg-sky-100 hover:bg-opacity-50',
// 'hover:bg-rua-gray-100 hover:bg-opacity-10',
'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
'flex justify-between text-gray-800 ',
'flex justify-between text-gray-800',
'mb-4 dark:text-gray-200',
'flex-col',
)}
>
<div className="flex justify-between">
<h2 className="mb-4 text-3xl font-semibold font-Barlow">
<h2 className="mb-4 text-3xl font-semibold font-Barlow">
{post.title}
</h2>
<div className="hidden lg:block">{post.date}</div>
</div>
<div className="flex justify-between">
<div className="flex justify-between text-subtext0">
<div className="flex items-center text-sm">
{Array.isArray(post.tags) ? (
post.tags.map((tag) => (

26
components/pages/dark-mode-btn.tsx
View File

@ -10,17 +10,33 @@ const DarkModeBtn = () => {
const { mounted } = useMounted();
const { theme, setTheme } = useTheme();
const handleTheme = (type: 'latte' | 'mocha') => () => {
const media = window.matchMedia(MEDIA);
const map = {
light: 'latte',
dark: 'mocha',
};
const system = media.matches ? 'dark' : 'light';
setTheme(type);
if (map[system] === type) {
try {
window.localStorage.removeItem('rua-theme');
} catch (err) {}
}
};
const handleMediaQuery = useCallback(
(e: MediaQueryListEvent | MediaQueryList) => {
const isDark = e.matches;
if (isDark) {
setTheme('mocha');
} else {
setTheme('latte');
}
try {
const localTheme = window.localStorage.getItem('rua-theme');
if (localTheme) return;
if (isDark) {
setTheme('mocha');
} else {
setTheme('latte');
}
window.localStorage.removeItem('rua-theme');
} catch (err) {}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[],