root/chadebebe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: in-progress mars theme work (saved before auth refactor)

Browse Source
This commit is contained in:
belisards
2026-05-03 16:11:12 -03:00
parent 282e475562
commit 4d4cdee9eb
8 changed files with 1 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/footer.tsx
View File

@@ -1,55 +0,0 @@
'use client';
import { useTheme } from '@/components/theme-provider';
export default function Footer() {
const { theme, toggleTheme } = useTheme();
return (
<div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="flex flex-col items-center gap-2 text-sm">
<button
onClick={toggleTheme}
className="flex items-center gap-2 px-4 py-2 rounded-full bg-card-soft hover:bg-[color:var(--accent-soft)] border border-[color:var(--border)] transition-colors text-[color:var(--ink-soft)] font-medium shadow-soft"
aria-label="Alternar tema"
>
{theme === 'light' ? (
<>
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
<span>Modo escuro</span>
</>
) : (
<>
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
<span>Modo claro</span>
</>
)}
</button>
</div>
</div>
);
}

59
components/theme-provider.tsx
View File

@@ -1,59 +0,0 @@
'use client';
import { createContext, useContext, useEffect, useState } from 'react';
type Theme = 'light' | 'dark';
interface ThemeContextType {
theme: Theme;
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<Theme>('light');
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
// Load theme from localStorage
const savedTheme = localStorage.getItem('theme') as Theme | null;
const initialTheme = savedTheme || 'light';
setTheme(initialTheme);
document.documentElement.setAttribute('data-theme', initialTheme);
if (initialTheme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, []);
const toggleTheme = () => {
const newTheme = theme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);
document.documentElement.setAttribute('data-theme', newTheme);
if (newTheme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme() {
const context = useContext(ThemeContext);
if (context === undefined) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
}