react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
9 lines (8 loc) • 1.01 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { useTheme } from '../hooks/useTheme';
import { Button } from './atoms/Button';
export const ThemeToggle = () => {
const { theme, isSystemTheme, toggleTheme, setSystemTheme, setLightTheme, setDarkTheme } = useTheme();
return (_jsxs("div", { className: "theme-toggle", children: [_jsx("div", { className: "theme-toggle__info", children: _jsxs("span", { className: "theme-toggle__label", children: ["Theme: ", theme, " ", isSystemTheme && '(System)'] }) }), _jsxs("div", { className: "theme-toggle__buttons", children: [_jsx(Button, { variant: "primary", size: "sm", onClick: toggleTheme, children: "Toggle Theme" }), _jsx(Button, { variant: "secondary", size: "sm", onClick: setSystemTheme, children: "Use System" }), _jsx(Button, { variant: "light", size: "sm", onClick: setLightTheme, children: "Light" }), _jsx(Button, { variant: "dark", size: "sm", onClick: setDarkTheme, children: "Dark" })] })] }));
};