yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2024-12-23 04:30:11 +09:00
Code Releases Activity

Switch button text by theme condition

Browse Source
This commit is contained in:
yude 2021-05-22 10:23:46 +09:00
parent efaf3180f6
commit 5e068b05ca
Signed by: yude
GPG Key ID: EB0FE5D925C4A968
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
pages/components/DarkmodeSwitcher.js
View File

@ -13,17 +13,27 @@ const Layout = (props) => {
const { locale, locales, defaultLocale, pathname } = router const { locale, locales, defaultLocale, pathname } = router
const [isMounted, setIsMounted] = useState(false); const [isMounted, setIsMounted] = useState(false);
const { theme, setTheme } = useTheme(); const { theme, setTheme, getTheme } = useTheme();
useEffect(() => { let moon = "🌙";
useEffect(() => {
setIsMounted(true); setIsMounted(true);
}, []); }, []);
const switchTheme = () => { const switchTheme = () => {
if (isMounted) { if (isMounted) {
setTheme(theme === "light" ? "dark" : "light"); setTheme(theme === "light" ? "dark" : "light");
} }
if (theme == "light") moon = "🌙";
if (theme == "dark") moon = "🌅";
}; };
console.log(theme);
return ( return (
<button className="my-4 mx-3 text-2xl" onClick={switchTheme}>🌙</button> <button className="my-4 mx-3 text-2xl" onClick={switchTheme}>
{theme === 'light' ? (
<span>🌙</span>
) : (
<span>🌄</span>
)}
</button>
) )
} }
export default Layout export default Layout