c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Use resolved theme

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-29 22:49:21 +02:00
parent 71fa37945a
commit 7e6f8b3b2f
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/Blog/ThemeSwitch.tsx
View File

@ -14,7 +14,7 @@ interface FadeProperties {
const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => { const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [fadeProps, setFadeProps] = useState<FadeProperties>({}); const [fadeProps, setFadeProps] = useState<FadeProperties>({});
const { theme, setTheme } = useTheme(); const { resolvedTheme, setTheme } = useTheme();
// Will be run when the component is rendered. // Will be run when the component is rendered.
useEffect(() => { useEffect(() => {
@ -40,8 +40,8 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
</div>; </div>;
} }
const sunClasses = fadeProps.sun || (theme !== "light" ? styles.selected : undefined); const sunClasses = fadeProps.sun || (resolvedTheme === "dark" ? styles.selected : undefined);
const moonClasses = fadeProps.moon || (theme === "light" ? styles.selected : undefined); const moonClasses = fadeProps.moon || (resolvedTheme === "light" ? styles.selected : undefined);
return <div className={styles.switch}> return <div className={styles.switch}>
<div className={sunClasses} onClick={() => switchTheme("light")}><Icon path={mdiWhiteBalanceSunny} size={size || "1.5em"} title="Light theme" id="mdi_themeswitch_light" /></div> <div className={sunClasses} onClick={() => switchTheme("light")}><Icon path={mdiWhiteBalanceSunny} size={size || "1.5em"} title="Light theme" id="mdi_themeswitch_light" /></div>