react-theme-change v0.0.6

🎨 react-theme-change

Description - 🔎 theme switcher.

🚀🚀Codesandbox🚀🚀

💿 Installation

npm i react-theme-change

💻 Example

ts / js

Can be placed along the way: src/configs/themes.ts.

import ReactThemeChange from 'react-theme-change';

const base = {
    btn_radius: '50%',
};

const themes = {
    dark: {
        bg_0: 'rgba(21, 14, 65, 1)',
        title: 'rgba(255, 255, 255, 1)',
    },
    light: {
        bg_0: 'rgba(239, 242, 247, 1)',
        title: 'rgba(42, 49, 60, 1)',
    },
    gray: {
        bg_0: 'rgba(35, 42, 63, 1)',
        title: 'rgba(255, 255, 255, 1)',
    },
};
const useThemeChange = ReactThemeChange({
    base,
    themes,
    defaultTheme: 'light',
});

export default useThemeChange;

tsx / jsx

import React from 'react';

import useThemeChange from './configs/themes';
import './App.scss';

function App() {
    const {theme, setTheme} = useThemeChange();

    return (
        <div className="demo">
            <div className="themeName">current theme: {theme.name}</div>
            <div className="btns">
                <button onClick={() => setTheme('dark')}>dark</button>
                <button onClick={() => setTheme('light')}>light</button>
                <button onClick={() => setTheme('gray')}>gray</button>
            </div>
        </div>
    );
}

export default App;

style

button {
  width: 50px;
  height: 50px;
  border-radius: var(--btn_radius);
  cursor: pointer;
}

.demo {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  align-items: center;
  background-color: var(--bg_0);
  color: var(--title);
}

.themeName {
  font-size: 40px;
}

.btns {
  display: flex;
  gap: 8px;
}

🔗 Links

current project

• Npm
• Github
• Codesandbox

other

• react-use-file-uploader