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

Various fixes in theme switch

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-18 20:03:49 +02:00
parent a89e36aa65
commit aa0601523d
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/Blog/ThemeSwitch.tsx
View File

@ -20,9 +20,8 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
setMounted(true); setMounted(true);
}, []); }, []);
const switchTheme = (newTheme: string) => { const switchTheme = (theme: string) => {
console.log(newTheme); if (theme === "dark") setFadeProps({
if (newTheme === "dark") setFadeProps({
sun: styles.fadeIn, sun: styles.fadeIn,
moon: styles.fadeOut moon: styles.fadeOut
}); });
@ -31,16 +30,16 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
moon: styles.fadeIn moon: styles.fadeIn
}); });
setTheme(newTheme); setTheme(theme);
}; };
if (!mounted) { if (!mounted) {
return <div className={styles.switch} title="Theme switching needs JS to be enabled."> return <div className={styles.switch} title="Theme switching needs JS to be enabled.">
<FileJs size={size || "1.5em"} /> <FileJs size={size || "1.5em"} className={styles.placeHolder} />
</div>; </div>;
} }
const sunClasses = fadeProps.sun || (theme === "dark" ? styles.selected : undefined); const sunClasses = fadeProps.sun || (theme !== "light" ? styles.selected : undefined);
const moonClasses = fadeProps.moon || (theme === "light" ? styles.selected : undefined); const moonClasses = fadeProps.moon || (theme === "light" ? styles.selected : undefined);
return <div className={styles.switch}> return <div className={styles.switch}>

5
styles/Blog/ThemeSwitch.module.scss
View File

@ -24,6 +24,11 @@
animation: fadeIn 0.2s ease-in-out; animation: fadeIn 0.2s ease-in-out;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
.placeHolder {
opacity: 1 !important;
transform: translate(0, 0) !important;
}
} }
@keyframes fadeOut { @keyframes fadeOut {