jonny
/
MBO-Tech-IT-Webseite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: use resolvedTheme in ThemeToggle, add aria-label 

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MBO-Tech-IT 2026-04-26 16:26:25 +02:00
parent a0d6caa79b
commit 22ad91a8ff
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/ThemeToggle.tsx
View File

@ -4,7 +4,7 @@ import { useTheme } from "next-themes";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
export default function ThemeToggle() { export default function ThemeToggle() {
const { theme, setTheme } = useTheme(); const { resolvedTheme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
useEffect(() => { useEffect(() => {
@ -13,12 +13,13 @@ export default function ThemeToggle() {
if (!mounted) return null; if (!mounted) return null;
const isDark = theme === "dark"; const isDark = resolvedTheme === "dark";
return ( return (
<button <button
onClick={() => setTheme(isDark ? "light" : "dark")} onClick={() => setTheme(isDark ? "light" : "dark")}
title={isDark ? "Light Mode" : "Dark Mode"} title={isDark ? "Light Mode" : "Dark Mode"}
aria-label={isDark ? "Zu Hell-Modus wechseln" : "Zu Dunkel-Modus wechseln"}
className={ className={
isDark isDark
? "rounded-md p-2 bg-[#1f2937] border border-[#374151] text-slate-400 hover:text-orange-400 transition-colors" ? "rounded-md p-2 bg-[#1f2937] border border-[#374151] text-slate-400 hover:text-orange-400 transition-colors"