@codewithajoydas/themeswitcher/index.js

A simple React Theme Manager with dynamic theme switching.

import { createContext, useState, useContext } from "react";

export const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(localStorage.getItem("theme") || "light");
  const ThemeStyle = {
    body: {
      dark: {
        backgroundColor: "#101820",
        color: "#FCF6F5",
      },
      light: {
        backgroundColor: "#FCF6F5",
        color: "#101820",
      },
      silver: {
        backgroundColor: "#C4BBB8",
        color: "#101820",
      },
      spaceCadet: {
        backgroundColor: "#39375B",
        color: "#FCF6F5",
      },
      blue: {
        backgroundColor: "#007BFF",
        color: "#FFFFFF",
      },
      red: {
        backgroundColor: "#DC3545",
        color: "#FFFFFF",
      },
      green: {
        backgroundColor: "#28A745",
        color: "#FFFFFF",
      },
      yellow: {
        backgroundColor: "#FFC107",
        color: "#101820",
      },
      orange: {
        backgroundColor: "#FD7E14",
        color: "#FFFFFF",
      },
      purple: {
        backgroundColor: "#6F42C1",
        color: "#FFFFFF",
      },
      gradient: {
        backgroundImage: "linear-gradient(to right, #ff7e5f, #feb47b)",
        color: "#FFFFFF",
      },
    },
    button: {
      dark: {
        backgroundColor: "#212529",
        color: "#FFFFFF",
        border: "1px solid #FFFFFF",
        hover: {
          backgroundColor: "#343A40",
        },
      },
      light: {
        backgroundColor: "#FFFFFF",
        color: "#212529",
        border: "1px solid #212529",
        hover: {
          backgroundColor: "#E2E6EA",
        },
      },
      primary: {
        backgroundColor: "#007BFF",
        color: "#FFFFFF",
        border: "none",
        hover: {
          backgroundColor: "#0056B3",
        },
      },
      danger: {
        backgroundColor: "#DC3545",
        color: "#FFFFFF",
        border: "none",
        hover: {
          backgroundColor: "#C82333",
        },
      },
      success: {
        backgroundColor: "#28A745",
        color: "#FFFFFF",
        border: "none",
        hover: {
          backgroundColor: "#218838",
        },
      },
      warning: {
        backgroundColor: "#FFC107",
        color: "#101820",
        border: "none",
        hover: {
          backgroundColor: "#E0A800",
        },
      },
      outline: {
        backgroundColor: "transparent",
        color: "#007BFF",
        border: "1px solid #007BFF",
        hover: {
          backgroundColor: "#007BFF",
          color: "#FFFFFF",
        },
      },
    },
    header: {
      dark: {
        backgroundColor: "#212529",
        color: "#FFFFFF",
      },
      light: {
        backgroundColor: "#F8F9FA",
        color: "#101820",
      },
      gradient: {
        backgroundImage: "linear-gradient(to right, #007BFF, #00C6FF)",
        color: "#FFFFFF",
      },
    },
    textField: {
      dark: {
        backgroundColor: "#343A40",
        color: "#FFFFFF",
        border: "1px solid #495057",
        placeholder: "#AAAAAA",
      },
      light: {
        backgroundColor: "#FFFFFF",
        color: "#212529",
        border: "1px solid #CED4DA",
        placeholder: "#6C757D",
      },
      rounded: {
        borderRadius: "50px",
      },
    },
    border: {
      dark: "1px solid #495057",
      light: "1px solid #CED4DA",
      primary: "2px solid #007BFF",
      rounded: "10px",
    },
    card: {
      dark: {
        backgroundColor: "#1E1E1E",
        color: "#FFFFFF",
        shadow: "0 4px 8px rgba(0, 0, 0, 0.3)",
      },
      light: {
        backgroundColor: "#FFFFFF",
        color: "#212529",
        shadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
      },
    },
    modal: {
      dark: {
        backgroundColor: "#2C2C2C",
        color: "#FFFFFF",
        shadow: "0 10px 30px rgba(0, 0, 0, 0.5)",
      },
      light: {
        backgroundColor: "#FFFFFF",
        color: "#101820",
        shadow: "0 10px 30px rgba(0, 0, 0, 0.2)",
      },
    },
  };
  const toggleTheme = () => {
    setTheme((prevTheme) => {
      const newTheme = prevTheme === "light" ? "dark" : "light";
      localStorage.setItem("theme", newTheme);
      return newTheme;
    });
  };

  return (
    <ThemeContext.Provider value={{ theme, setTheme, ThemeStyle, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);