fix: use resolvedTheme in ThemeToggle, add aria-label
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
a0d6caa79b
commit
22ad91a8ff
|
|
@ -4,7 +4,7 @@ import { useTheme } from "next-themes";
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function ThemeToggle() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const { resolvedTheme, setTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -13,12 +13,13 @@ export default function ThemeToggle() {
|
|||
|
||||
if (!mounted) return null;
|
||||
|
||||
const isDark = theme === "dark";
|
||||
const isDark = resolvedTheme === "dark";
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => setTheme(isDark ? "light" : "dark")}
|
||||
title={isDark ? "Light Mode" : "Dark Mode"}
|
||||
aria-label={isDark ? "Zu Hell-Modus wechseln" : "Zu Dunkel-Modus wechseln"}
|
||||
className={
|
||||
isDark
|
||||
? "rounded-md p-2 bg-[#1f2937] border border-[#374151] text-slate-400 hover:text-orange-400 transition-colors"
|
||||
|
|
|
|||
Loading…
Reference in New Issue