README.md

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.	#6F90F4, rgb(111, 144, 244), 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 card.	155px, max-content	string, undefined
width	Width of the card.	180px, max-content	string, undefined
padding	Padding inside the card.	11.2px, 0.7rem	string, undefined
gap	Gap between elements inside the menu.	8px, 0.5rem	string, undefined
transition	Transition of the card.	true, false	boolean
positionX	Horizontal position of the card.	20px	string, undefined
positionY	Vertical position of the card.	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 mode 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.