franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix theme toggle

Browse Source
This commit is contained in:
Aman Varshney
2025-05-10 15:36:17 +05:30
parent 05ac0238fa
commit 38385024b5
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/src/app/layout.tsx
View File

@@ -94,6 +94,7 @@ export default function Layout({ children }: { children: ReactNode }) {
}} }}
theme={{ theme={{
enableSystem: true, enableSystem: true,
defaultTheme: "system",
}} }}
> >
<NuqsAdapter>{children}</NuqsAdapter> <NuqsAdapter>{children}</NuqsAdapter>

8
apps/web/src/components/theme-toggle.tsx
View File

@@ -7,14 +7,14 @@ import { useTheme } from "next-themes";
import * as React from "react"; import * as React from "react";
export function ThemeToggle({ className }: { className?: string }) { export function ThemeToggle({ className }: { className?: string }) {
const { theme, setTheme } = useTheme(); const { setTheme, resolvedTheme } = useTheme();
const [mounted, setMounted] = React.useState(false); const [mounted, setMounted] = React.useState(false);
React.useEffect(() => { React.useEffect(() => {
setMounted(true); setMounted(true);
}, []); }, []);
const isChecked = mounted ? theme === "dark" : false; const isChecked = mounted ? resolvedTheme === "dark" : false;
const handleCheckedChange = (checked: boolean) => { const handleCheckedChange = (checked: boolean) => {
setTheme(checked ? "dark" : "light"); setTheme(checked ? "dark" : "light");
@@ -25,13 +25,13 @@ export function ThemeToggle({ className }: { className?: string }) {
<button <button
type="button" type="button"
className={cn( className={cn(
"inline-flex h-5 w-10 shrink-0 cursor-not-allowed items-center rounded-full border-2 border-transparent bg-input opacity-50", "inline-flex h-4 w-9 shrink-0 cursor-not-allowed items-center rounded-full border-2 border-transparent bg-input opacity-50",
className, className,
)} )}
disabled disabled
aria-label="Toggle theme (loading)" aria-label="Toggle theme (loading)"
> >
<span className="block h-4 w-4 rounded-full bg-background shadow-lg ring-0" /> <span className="block h-3 w-3 rounded-full bg-background shadow-lg ring-0" />
</button> </button>
); );
} }