Package Exports

react-theme-component
react-theme-component/dist/index.es.js
react-theme-component/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-theme-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Logo

Plug-and-Play, ready-to-use, highly customizable theme component for React.js

React Theme Component

A React theme toggler with dark/light mode support based on TailwindCSS.

Installation
Features
Examples and Usage
Contact Me
License

Installation

This is a React.js component available through the npm registry.

Before installing, create a React.js project and this component has default features to automate theme switching for TailwindCSS, so make sure to configure it as per your requirements. Any version of react, react-dom and tailwindcss is compatible.

Installation is done using the npm install command:

npm install react-theme-component

Features

Ready to use, just need to inject in your code
Focus on high customizability
Compatible with any version of React.js and TailwindCSS
Provide custom fields for getter and setter for loose coupling
Would work fine with normal state, ContextAPI and State Management Libraries like Redux, Zustand
Provides best UI and UX by providing ways to change color accordingly.
Ready to push for production

Default Inputs and Fields

export default function ThemeToggler({
    mode = "class",
    getter,
    setter,
    localKey = "theme",
    icons = true,
    lightOuterColor = "#d1d5dc",
    lightInnerColor = "black",
    darkOuterColor = "black",
    darkInnerColor = "#d1d5dc",
    extras = ""
}) {
    .....
}

Examples and Usage

Here is a quick start snippet

import React from "react";
import ThemeToggler from "react-theme-component";

export default function App() {
  return (
    <>
        <p>Change Theme: </p>
        <ThemeToggler />
    </>
  );
}

can be injected with user's self-defined state:

import React, { useState } from "react";
import ThemeToggler from "./ThemeToggler";
export default function App() {
    const [isDark, setIsDark] = useState(false);
    return (
        <>
            <h1 className="text-4xl w-fit mx-auto px-5 py-3 my-2 text-slate-800 dark:text-neutral-400 dark:shadow-slate-900 rounded-2xl">{isDark ? "Dark Theme" : "Light Theme"}</h1>

            <ThemeToggler getter={isDark} setter={setIsDark} localKey={"theme-key"} />
        </>);
}

can use react-redux in case global management is required:

"themeSlice.js"

import { createSlice } from "@reduxjs/toolkit";

export const themeSlice = createSlice({
    name: "theme",
    initialState: {
        isDark: false
    },
    reducers: {
        changeTheme: (state, action) => {
            state.isDark = action.payload;
        }
    }
});

export const {changeTheme} = themeSlice.actions;

"store.js"

import { configureStore } from "@reduxjs/toolkit";
import { themeSlice } from "./themeSlice";

const store = configureStore({
    reducer: {
        theme: themeSlice.reducer
    }
});

export default store;

using in "App.js":

import React, { useState } from "react";
import ImageTitle from "./components/ImageTitle";
import ThemeToggler from "./ThemeToggler";
import { useDispatch, useSelector } from "react-redux";
import { changeTheme } from "./store/themeSlice";
export default function App() {
    const isDark = useSelector(state => state.theme.isDark);
    const dispatch = useDispatch();

    function setIsDark(input) {
        dispatch(changeTheme(input));
    }

    return (
        <>
            <h1 className="text-4xl w-fit mx-auto px-5 py-3 my-2 text-slate-800 dark:text-neutral-400 dark:shadow-slate-900 rounded-2xl">{isDark ? "Dark Theme" : "Light Theme"}</h1>

            <ImageTitle />

            <ThemeToggler mode="attribute" getter={isDark} setter={setIsDark} icons={true} darkOuterColor={"#3579e6"} darkInnerColor={"#203352"} />
        </>);
}

Contact Me

Feel free to reach out to me through the following channels:

Email: bkvats2394@gmail.com
LinkedIn: https://www.linkedin.com/in/bhupender-kumar-sharma-2a144a2a7
X: https://x.com/BSharma10111

Let me know if you need help refining this further! 😊

License

MIT