React-theme-contexts NPM

React Theme Contexts Provider

Default theme is system if system light mode data-theme="light", if system dark mode data-theme="dark"

Themes for your React.js App.

Install

npm install react-theme-contexts

# yarn 
yarn add react-theme-contexts

# pnpm
pnpm install react-theme-contexts

HTML & CSS

Remember :root color scheme depends on your web themes

/*
base.css or scss

Required  [data-theme="your theme name"]  default [data-theme="
if system === dark 'dark' if system === light 'light'"] don't use it
*/

/*   <Required>[data-theme="theme mode name"]> */
:root[data-theme="dark"] {
  --bg-color: #333;
  --global-text-color: #f5f5f5;

  --global-lead-color: #fff;
}

:root[data-theme="light"] {
  --bg-color: #f7f7f7;
  --global-text-color: #333;

  --global-lead-color: #202020;
}

/* When you add more theme */
:root[data-theme="pink"] {
  --bg-color: pink;
  --global-text-color: #fff;

  --global-lead-color: #f4f4f4;
}

/* your web style */
body {
  background-color: var(--bg-color);
  color: var(--global-text-color);
}

p {
  color: var(--global-lead-color)
}

using React.js

in app.js

// >> app.jsx

import ThemeContextProvider from "react-theme-contexts"

// components
import ThemeSwitcher from "@/theme-switcher"


const App = ({ children }) => {
  
  return (
    <ThemeContextProvider>
      {children}
      <ThemeSwitcher />
    </ThemeContextProvider>
  );
}
 
export default App;

Add theme-switcher.js

// >> theme-switcher.jsx

import { useThemeContext } from "react-theme-contexts";


const ThemeSwitcher = () => {
  
  const { switchTheme } = useThemeContext();

  return (
    <div className="theme-switcher">
        <button onClick={() => switchTheme("system")}>System</button>
        <button onClick={() => switchTheme("light")}>light</button>
        <button onClick={() => switchTheme("dark")}>dark</button>
    </div>
  );
}
 
export default ThemeSwitcher;

Add more themes.

There is no limit to add more themes

import { useThemeContext } from "react-theme-contexts";


const ThemeSwitcher = () => {
  
  const { addThemes, switchTheme } = useThemeContext();
 
  useEffect(() => {

    addThemes(["pink", "yellow", "coral"])

  },[])

  return (
    <div className="theme-switcher">
        <button onClick={() => switchTheme("system")}>System</button>
        <button onClick={() => switchTheme("light")}>light</button>
        <button onClick={() => switchTheme("dark")}>dark</button>

      // More themes button

        <button onClick={() => switchTheme("pink")}>pink</button>
        <button onClick={() => switchTheme("yellow")}>yellow</button>
        <button onClick={() => switchTheme("coral")}>coral</button>
        
    </div>
  );
}
 
export default ThemeSwitcher;

using next.js

in layout.js

// layout.jsx

import { Inter } from 'next/font/google'

import ThemeProvider from '@/themeProvider'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'React Theme Context Provider',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider>
          {children}
        </ThemeProvider>
        </body>
    </html>
  )
}

Add ThemeProvider.js

// ThemeProvider.jsx

'use client';
import ThemeContextProvider from "react-theme-contexts"

export default function ThemeContextProvider({ children }) {

  return(
    <ThemeContextProvider>
      {children}
    </ThemeContextProvider>
  )
}

Add ThemeSwitcher.js

// ThemeSwitcher.jsx

"use client";

import { useThemeContext } from "react-themes-contexts";

export default function ThemeSwitcher() {
    
    const { switchTheme } = useThemeContext();
 
    return (
        <>
            <button onClick={() => switchTheme("light")}>Light</button>
            <button onClick={() => switchTheme("dark")}>dark</button>
        </>
    );
}

Add more themes.

There is no limit to add more themes

// ThemeSwitcher.jsx
"use client";

import { useThemeContext } from "react-themes-contexts";

export default function ThemeSwitcher() {
    
    const { addThemes switchTheme } = useThemeContext();


    useEffect(() => {

      addThemes(["pink", "yellow"])

    },[])
 
    return (
        <>
            <button onClick={() => switchTheme("system")}>System</button>
            <button onClick={() => switchTheme("light")}>Light</button>
            <button onClick={() => switchTheme("dark")}>dark</button>



            // More Themes

            <button onClick={() => switchTheme("pink")}>pink</button>
            <button onClick={() => switchTheme("yellow")}>yellow</button>
        </>
    );
}

You can hide and show spacific element using hide-oh and show-on method.

In your jsx components file 😊

const Component = () => {

  return(
    <div>
      // <!-- using dark mode --> 
      <div>
        <img hide-on="dark" src="lightmode.png" alt="example" />
        <img show-on="dark" src="darkmode.png" alt="example" />
      </div>

      // <!-- using light mode -->
      <div>
        <img show-on="light" src="lightmode.png" alt="example" />
        <img hide-on="light" src="darkmode.png" alt="example" />
      </div>
      
      // <!-- using others mode -->
      <div>
        <img show-on="pink" src="showOnPinkMode.png" alt="example" />
        <img hide-on="pink" src="hideOnPinkMode.png" alt="example" />
      </div>
    </div>
  )

}

export default Component;