Pluto Theme Mode

pluto-theme-mode is a lightweight and versatile theme provider library for React, designed to make switching between light and dark modes smooth and effortless. Built with TypeScript, styled-components, and Context Hook, it supports multiple styling approaches—including inline class, Tailwind CSS, and styled-components—offering flexible options for theme-based designs. Ideal for developers looking to add dark mode functionality seamlessly, pluto-theme-mode provides a modern, intuitive solution for managing theme states and creating customizable user experiences. 🌃🌇

Feature support: ✨ CommonJS 🪄 ESM 🎨 Inline CSS, Tailwind CSS, Styled-Components ⚡ Chrome, Safari, Firefox, Edge browsers ⌨️ TypeScript

Quickstart

1. Install

npm install pluto-theme-mode

2. Add Provider

import { PlutoProvider } from 'pluto-theme-mode'; // import the PlutoProvider

// wrap the App with PlutoProvider
<PlutoProvider>
  <App />
</PlutoProvider>

You can also add props to the provider, including props to set the meta tag for theme-color. Here is an example of how to use it: ☀️🌙

<PlutoProvider dark='#000' light='#FFF'>
  <App />
</PlutoProvider>

You can also add props to the provider, including props to set the meta tag for theme-color, with values specified in either HEX or RGB format, as shown in the example abov. 🖌️

3. Add Toggle

import { ToggleButton } from 'pluto-theme-mode'; // import ToggleButton

// call the ToggleButton as appropriate
<ToggleButton />

📄 Additionally, you can also call props, and the details will be explained below.

| Props | Details | Values | Type | | ------------------------ | --------------------------------------------- | ------------------------------------------------- | --------------------- | | lightModeLabel | Label for light mode. | Light , Specified | string, undefined | | darkModeLabel | Label for dark mode. | Dark , Specified | string, undefined | | systemModeLabel | Label for system mode. | System , Specified | string, undefined | | lightModeIcon | Icon for light mode. Can be an SVG or image. | SVG, <img /> | ReactNode | | darkModeIcon | Icon for dark mode. Can be an SVG or image. | SVG, <img /> | ReactNode | | systemModeIcon | Icon for system mode. Can be an SVG or image. | SVG, <img /> | ReactNode | | backgroundColorDark | Background color for dark mode. | #000, rgb(0,0,0), black | string, undefined | | backgroundColorLight | Background color for light mode. | #FFF, rgb(255,255,255), white | string, undefined | | colorDark | Text color for dark mode. | #000, rgb(0,0,0) , black | string, undefined | | colorLight | Text color for light mode. | #FFF, rgb(255,255,255), white | string, undefined | | borderColorDark | Border color for dark mode. | #222, rgb(34,34,34), grey | string, undefined | | borderColorLight | Border color for light mode. | #222, rgb(34,34,34), grey | string, undefined | | activeColor | Color for active state. | #6495ED, rgb(100, 149, 237), cornflowerblue | string, undefined | | cardBorderRadius | Border radius for the card. | 24px, 1.5rem | string, undefined | | menuBorderRadius | Border radius for the menu. | 16px, 1rem | string, undefined | | fontSize | Font size for the text. | 16px, 1.0000em | string, undefined | | iconSize | Font size for icons. | 24px, 1.5em | string, undefined | | height | Height of the button or menu. | 155px, max-content | string, undefined | | width | Width of the button or menu. | 180px, max-content | string, undefined | | padding | Padding inside the button/menu. | 11.2px, 0.7rem | string, undefined | | gap | Gap between elements inside the menu. | 8px, 0.5rem | string, undefined | | positionX | Horizontal position of the button/menu. | 20px | string, undefined | | positionY | Vertical position of the button/menu. | 40px | string, undefined | | zIndex | Z-index for stacking order. | 1, 100, Specified | number, undefined |

🎨 You can decorate it as desired.

4. Usage

import { useTheme } from 'pluto-theme-mode'; // import useTheme

const { theme } = useTheme() // destructure theme from useTheme hook

Inline Style CSS

// This code renders a <div> and a <span> element, applying dynamic styling based on the current theme mode (either 'dark' or 'light').
// In the first <div> and <span> block, the background and text colors are set directly using color codes.
// In the second <div> and <span> block, the classes 'backgroundDark', 'backgroundLight', 'colorLight', and 'colorDark' are used 
// instead, allowing for centralized styling through CSS classes.
// When the theme mode is 'dark':
// - The first <div> has a background of '#333' (dark gray) and the text color of the <span> is '#fff' (white).
// - The second <div> and <span> apply 'backgroundDark' and 'colorLight' classes, using styles defined in CSS.
// When the theme mode is 'light':
// - The first <div> has a background of '#fff' (white) and the text color of the <span> is '#333' (dark gray).
// - The second <div> and <span> apply 'backgroundLight' and 'colorDark' classes.

<div style={{ backgroundColor: theme.mode === 'dark' ? '#333' : '#fff' }}>
  <span style={{ color: theme.mode === 'dark' ? '#fff' : '#333' }}>Inline CSS</span>
</div>

<div className={theme.mode === 'dark' ? 'backgroundDark' : 'backgroundLight'}>
  <span className={theme.mode === 'dark' ? 'colorLight' : 'colorDark'}>Inline CSS</span>
</div>

Tailwind CSS

// This code applies dynamic styling to a <div> and a <span> element based on the current theme mode (dark or light) using TailwindCSS classes.

// If the theme mode is 'dark', the background of the <div> will be 'bg-gray-800' (dark gray) and the text color of the <span> will be 'text-white' (white).
// If the theme mode is 'light', the background of the <div> will be 'bg-white' (white) and the text color of the <span> will be 'text-gray-800' (dark gray).

<div className={`${theme.mode === 'dark' ? 'bg-gray-800' : 'bg-white'}`}>
  <span className={`${theme.mode === 'dark' ? 'text-white' : 'text-gray-800'}`}>Tailwind CSS</span>
</div>

Styled Components

import { useTheme } from 'pluto-theme-mode' // import useTheme
import { ThemeProvider } from 'styled-components' // import provider from styled components

const App = () => {
  const { theme } = useTheme() // destructure theme from useTheme hook

  return (
    // wrap Component with ThemeProvider
    // use theme prop set theme with theme.mode
    <ThemeProvider theme={{ mode: theme.mode }}>
      {Component}
    </ThemeProvider>
  )
}

export default App

import styled from 'styled-components';

// Styled components for <div> and <span>
const StyledDiv = styled.div`
  background-color: ${(props) => (props.theme.mode === 'dark' ? '#333' : '#fff')};
`;

const StyledSpan = styled.span`
  color: ${(props) => (props.theme.mode === 'dark' ? '#fff' : '#333')};
`;

// call the StyledDiv and StyledSpan
<StyledDiv>
  <StyledSpan>Styled components</StyledSpan>
</StyledDiv>

Example image

• Toggle
  • Light
  • Dark
  • System

License

Licensed under the MIT License, Copyright © 2024-present Chakkrit Laolit.

See LICENSE for more information.