ThemeButton

Light Mode First

With this approach, you declare your light colors first and then use [data-theme="dark"] to set your dark colors.

Show code

Light.css

:root {
  --light-bg: transparent;
  --light-text: #3d50f5;
}
[data-theme="dark"] {
  --light-bg: #678fff;
  --light-text: #222;
}

.light-paragraph {
  padding: 8px;
  border-radius: 8px;
  background-color: var(--light-bg);
  color: var(--light-text);
}

LightFirst.tsx

import ThemeToggle from "./Toggle.tsx";
import "./Light.css";

export function LightFirst() {
  return (
    <section className="light-paragraph">
      <ThemeToggle />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere commodi
        voluptate hic asperiores necessitatibus aspernatur ea molestias ab
        voluptatibus magnam.
      </p>
    </section>
  );
}

Toggle.tsx

import { Icon } from "@hrc/material-icons";
import { ThemeButton } from "@hrc/toggle-theme";
import "./Toggle.css";

export default function ThemeToggle() {
  return (
    <ThemeButton
      lightElement={<Icon name="light_mode" size="large" />}
      darkElement={<Icon name="dark_mode" size="large" />}
    />
  );
}

Toggle.css

[data-theme="light"] [class*="paragraph"] .theme-button {
  color: currentColor;
  --button-bg-hover: rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] [class*="paragraph"] .theme-button {
  color: currentColor;
  --button-bg-hover: rgba(0, 0, 0, 0.2);
  --button-bg-active: rgb(48 48 48 / 0.5);
}

Dark Mode First

With this approach, you declare your dark colors first and then use [data-theme="light"] to set your light colors.

Show code

Dark.css

:root {
  --dark-bg: #b36200;
  --dark-text: #111;
}
[data-theme="light"] {
  --dark-bg: transparent;
  --dark-text: #ff8c00;
}

.dark-paragraph {
  background-color: var(--dark-bg);
  padding: 8px;
  border-radius: 8px;
  color: var(--dark-text);
}

DarkFirst.tsx

import ThemeToggle from "./Toggle.tsx";
import './Dark.css';

export function DarkFirst() {
  return (
    <section className="dark-paragraph">
      <ThemeToggle />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere commodi
        voluptate hic asperiores necessitatibus aspernatur ea molestias ab
        voluptatibus magnam.
      </p>
    </section>
  );
}

Toggle.tsx

import { Icon } from "@hrc/material-icons";
import { ThemeButton } from "@hrc/toggle-theme";
import "./Toggle.css";

export default function ThemeToggle() {
  return (
    <ThemeButton
      lightElement={<Icon name="light_mode" size="large" />}
      darkElement={<Icon name="dark_mode" size="large" />}
    />
  );
}

Toggle.css

[data-theme="light"] [class*="paragraph"] .theme-button {
  color: currentColor;
  --button-bg-hover: rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] [class*="paragraph"] .theme-button {
  color: currentColor;
  --button-bg-hover: rgba(0, 0, 0, 0.2);
  --button-bg-active: rgb(48 48 48 / 0.5);
}