Created
December 25, 2024 12:13
-
-
Save 4096void/33a48833c735cd8186a7eef4fdb0f473 to your computer and use it in GitHub Desktop.
theme toggle
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use client'; | |
| import { useTheme } from './ThemeProvider'; | |
| export function ThemeToggle() { | |
| const { theme, toggleTheme } = useTheme(); | |
| return ( | |
| <button | |
| onClick={toggleTheme} | |
| className="fixed top-4 right-4 p-2 rounded-full bg-foreground text-background hover:opacity-80 transition-opacity" | |
| aria-label="Toggle theme" | |
| > | |
| {theme === 'light' ? ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| strokeWidth={1.5} | |
| stroke="currentColor" | |
| className="w-6 h-6" | |
| > | |
| <path | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" | |
| /> | |
| </svg> | |
| ) : ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| strokeWidth={1.5} | |
| stroke="currentColor" | |
| className="w-6 h-6" | |
| > | |
| <path | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" | |
| /> | |
| </svg> | |
| )} | |
| </button> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment