react-theme-contexts
v0.1.3
Published
React theme contexts is a package for and and switch theme of a React.js website or React.js app
Downloads
8
Maintainers
meraz87Readme
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.
Demo click here 😊.
Install
npm install react-theme-contexts
# yarn
yarn add react-theme-contexts
# pnpm
pnpm install react-theme-contextsHTML & 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;End for today 🌚 & Thank you for using my package
Made with <3 by Mevlan MeraZ 💖 MT ✨
[!NOTE] If you found any bug please report and contact with me i will try to fix this 🪲 as soon as possible.