ColorThemeSwitch Component

The <ColorThemeSwitch> component provides a toggle switch for changing between light and dark themes in your application. It automatically syncs with the theme stored in localStorage and updates the HTML element's data-theme attribute.

Basic Usage

The component renders a switch that toggles between light and dark themes.

Basic

import { ColorThemeSwitch } from "react-better-html";

function App() {
   return <ColorThemeSwitch />;
}

With Moon Icon

import { ColorThemeSwitch } from "react-better-html";

function App() {
   return <ColorThemeSwitch withMoon />;
}

Subcomponents

A number of components in the library have a subcomponent feature witch is like a preset of the same component that is frequently used.

ColorThemeSwitch.withText

This component displays "Light" and "Dark" text labels on either side of the switch.

import { ColorThemeSwitch } from "react-better-html";

function App() {
   return <ColorThemeSwitch.withText />;
}