yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2024-12-22 12:10: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 [isMounted, setIsMounted] = useState(false);
const { theme, setTheme } = useTheme();
useEffect(() => {
const { theme, setTheme, getTheme } = useTheme();
let moon = "🌙";
useEffect(() => {
setIsMounted(true);
}, []);
const switchTheme = () => {
const switchTheme = () => {
if (isMounted) {
setTheme(theme === "light" ? "dark" : "light");
}
if (theme == "light") moon = "🌙";
if (theme == "dark") moon = "🌅";
};
console.log(theme);
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