pluto-theme-mode v1.0.10-a

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. 🌃🌇

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.

🎨 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.