theme-tweaker

Use to develop your Theme object dynamically

Install

npm install --save theme-tweaker

Usage

Basic Example

// index.tsx
import './index.css'

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {createThemeTweaker} from 'theme-tweaker'

export type Theme = {my: string};
const theme: Theme = {my: 'theme'};

const Provider = createThemeTweaker();

ReactDOM.render(
    <Provider theme={theme}>
        <App />
    </Provider>
, document.getElementById('root'))

Using a third party library (Material UI for example)

Pass that library theme provider to the createThemeTweaker function and use the returned Provider the same way.

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {theme} from './theme/theme';
import MuiProvider from '@material-ui/styles/ThemeProvider';
import { createThemeTweaker } from './theme/themeTweaker/themeTweaker';

const isDev = process.env.NODE_ENV === "development";

const ThemeProvider = isDev ? createThemeTweaker(MuiProvider) : MuiProvider; 

ReactDOM.render(
    <ThemeProvider theme={theme}>
        <App />
    </ThemeProvider>
,
  document.getElementById('root')
);

Modifying your theme from a component

import {useThemeTweaker} from 'theme-tweaker';
import React from 'react';
import {Theme} from './index';

const App = () => {
  const {theme, setThemeProp} = useThemeTweaker<Theme>();
  
  return (
    <div>
      <button onClick={() => setThemeProp("my", "edited theme")}>Change</button>
      {JSON.stringify(theme)}
    </div>
  );
}

export default App

License

MIT © guygolanIL