Jonas Francisco
47967eb37f
- Adiciona ThemeProvider com next-themes para controle de tema - Implementa componente SimpleThemeToggle com ícones sol/lua - Configura CSS variables completas para light/dark modes no globals.css - Padroniza todas as páginas de autenticação (login, login-admin, login-paciente) - Padroniza todos os módulos principais (dashboard, pacientes, doutores, consultas, calendar, configuração) - Padroniza completamente área profissional com todas as seções: * Calendário e agendamentos * Busca e gestão de pacientes * Prontuários médicos completos * Comunicação e relatórios * Seções de exames (solicitados, resultados, diagnósticos, prescrições, evolução, anexos) - Atualiza componentes UI (input, select, textarea) com bordas visíveis - Implementa suporte dark mode em tooltips, badges de status e mensagens - Garante acessibilidade e consistência visual em ambos os modos - Mantém funcionalidades existentes sem breaking changes Todos os elementos agora respondem adequadamente ao toggle de tema, proporcionando experiência de usuário consistente e acessível.
22 lines
720 B
TypeScript
22 lines
720 B
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Moon, Sun } from "lucide-react"
|
|
import { useTheme } from "next-themes"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
export function SimpleThemeToggle() {
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(theme === "dark" ? "light" : "dark")
|
|
}
|
|
|
|
return (
|
|
<Button variant="outline" size="icon" onClick={toggleTheme}>
|
|
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
<span className="sr-only">Alternar tema</span>
|
|
</Button>
|
|
)
|
|
} |