DarkThemeToggle | Pol-ui - A beautiful and functional UI library for React and Next.js

The DarkThemeToggle component is a button that allows the user to switch between light and dark themes with a simple click.

Importation

Import the component from pol-ui to use the conveyor element:

import { DarkThemeToggle } from "pol-ui";

Default darkThemeToggle

import { DarkThemeToggle } from "pol-ui";
 
import React from "react";
 
const DarkThemeToggleComponent = () => {
  return (
    <PoluiProvider>
      <DarkThemeToggle />
    </PoluiProvider>
  );
};
export default DarkThemeToggleComponent;

Props

Prop name	Type	Default	Description
iconDark	string	TbSun	The icon to display when the dark theme is active.
iconLight	string	TbMoon	The icon to display when the light theme is active.
theme	DarkThemeToggleTheme		The theme to apply to the darkThemeToggle.
ref	object	null	The ref to apply to the darkThemeToggle.
color	string	primary	The color to apply to the darkThemeToggle.
label	string	""	The label to apply to the button's tooltip.

Examples

Custom styles

import { DarkThemeToggle } from "pol-ui";
 
import React from "react";
 
const DarkThemeToggleComponent = () => {
  return (
    <PoluiProvider>
      <DarkThemeToggle className="bg-transparent hover:bg-gray-100 dark:hover:bg-secondary-800 text-secondary-900 dark:text-secondary-50" />
    </PoluiProvider>
  );
};
export default DarkThemeToggleComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface DarkThemeToggleRootTheme {
  base: string;
  icon: string;
}