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);
}, []);
const switchTheme = (newTheme: string) => {
console.log(newTheme);
if (newTheme === "dark") setFadeProps({
const switchTheme = (theme: string) => {
if (theme === "dark") setFadeProps({
sun: styles.fadeIn,
moon: styles.fadeOut
});
@ -31,16 +30,16 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
moon: styles.fadeIn
});
setTheme(newTheme);
setTheme(theme);
};
if (!mounted) {
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>;
}
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);
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-fill-mode: forwards;
}
.placeHolder {
opacity: 1 !important;
transform: translate(0, 0) !important;
}
}
@keyframes fadeOut {