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.

Table of contents

• 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: [email protected]
• 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