29 lines
1018 B
JavaScript
29 lines
1018 B
JavaScript
import { useTheme } from "../contexts/ThemeContext.jsx";
|
|
import "../css/ThemeButton.css";
|
|
|
|
/**
|
|
* ThemeButton.jsx
|
|
*
|
|
* Este archivo define el componente ThemeButton, que permite a los usuarios cambiar entre temas claro y oscuro.
|
|
*
|
|
* Importaciones:
|
|
* - useTheme: Hook personalizado para acceder al contexto del tema.
|
|
* - "../css/ThemeButton.css": Archivo CSS que contiene los estilos para el botón de cambio de tema.
|
|
*
|
|
* Funcionalidad:
|
|
* - ThemeButton: Componente que renderiza un botón para alternar entre temas claro y oscuro.
|
|
* - Utiliza el hook `useTheme` para acceder al tema actual y la función para cambiarlo.
|
|
* - El botón muestra un icono de sol (☀️) si el tema actual es oscuro, y un icono de luna (🌙) si el tema actual es claro.
|
|
*
|
|
*/
|
|
|
|
export default function ThemeButton() {
|
|
const { theme, toggleTheme } = useTheme();
|
|
|
|
return (
|
|
<button className="theme-toggle" onClick={toggleTheme}>
|
|
{theme === "dark" ? "☀️" : "🌙"}
|
|
</button>
|
|
);
|
|
}
|