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

[class*="paragraph"] .theme-button {
  color: currentColor;
}
[data-theme="dark"] [class*="paragraph"] .theme-button {
  --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

[class*="paragraph"] .theme-button {
  color: currentColor;
}
[data-theme="dark"] [class*="paragraph"] .theme-button {
  --button-bg-active: rgb(48 48 48 / 0.5);
}

Load theme on page load

If you want to load the theme before the page is rendered, you can import load-theme.ts file in your index.html or respective entry point:

<script
  type="module"
  src="node_modules/@hrc/toggle-theme/dist/load-theme.js"
></script>

If you are using Astro, you can use loadTheme util in your layout:

<script>
  import { loadTheme } from "@hrc/toggle-theme";

  loadTheme();
</script>

Caution

Only use this approach if your theme is not loaded as fast as you want it to be, because <ThemeButton /> component also loads the theme in its intial render.

Custom key for localStorage

Use the customKey prop to set a custom key for localStorage to store the theme.

export function WithCustomKeyDemo() {
  return (
    <ThemeButton
      customKey="my-custom-key"
      lightElement={{/* element for light mode */}}
      darkElement={{/* element for dark mode */}}
    />
  );
}

Caution

If you are loading the theme on page load, you should use loadTheme() util with the same custom key.

• In your index.html or respective entry point:

  <script type="module">
    import { loadTheme } from "@hrc/toggle-theme";
  
    loadTheme("my-custom-key");
  </script>

• In your Astro layout:

  import { loadTheme } from "@hrc/toggle-theme";
  
  loadTheme("my-custom-key");

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <ThemeButton />:

• <ThemeButton />