change theme by clicking on the logo
This commit is contained in:
parent
0984413e2f
commit
2ea10a2e69
2 changed files with 13 additions and 5 deletions
|
@ -7,7 +7,7 @@ const Navbar = () => {
|
||||||
<>
|
<>
|
||||||
<div className={styles.center}>
|
<div className={styles.center}>
|
||||||
<Title />
|
<Title />
|
||||||
<ThemeToggle />
|
{/* <ThemeToggle /> */}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,14 +1,22 @@
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import styles from "styles/Title.module.sass";
|
import styles from "styles/Title.module.sass";
|
||||||
import { useTheme } from 'next-themes'
|
import { useTheme } from 'next-themes'
|
||||||
|
function the(t) {
|
||||||
|
switch (t) {
|
||||||
|
case "light":
|
||||||
|
return "dark";
|
||||||
|
case "dark":
|
||||||
|
return "light";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const Title = () => {
|
const Title = () => {
|
||||||
const { resolvedTheme: theme } = useTheme()
|
const { resolvedTheme: theme, setTheme: set } = useTheme();
|
||||||
const logo_size = 150;
|
const logo_size = 150;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Image
|
<Image onClick={() => set(the(theme))}
|
||||||
src={`/logos/${theme || "dark"}.svg`}
|
src={`/logos/${theme || "dark"}.svg`}
|
||||||
width={logo_size}
|
width={logo_size}
|
||||||
height={logo_size / 4}
|
height={logo_size / 4}
|
||||||
|
|
Loading…
Add table
Reference in a new issue