npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pluto-theme-mode

v1.0.10-a

Published

pluto-theme-mode is a lightweight and flexible theme provider library for React that makes switching between light and dark modes easy and seamless. Built with TypeScript, styled-components, and Context Hook, this library simplifies the process of managin

Downloads

739

Readme

Pluto Theme Mode tag - 1.0.10a

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

style: styled-components style: Tailwind CSS React

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