react-css-theming v1.0.1

react-css-theming

A library that allows you to make your application themeable based on css variables in an easy way without additional components and wrappers

#Usage Use ThemeProvider to provide defined css variables into the application like below

import { ThemeProvider } from 'react-css-theming';

import styles from './styles.scss';

//defined themes and variables
const themes = {
  default: {
    primary: 'red',
  },
  second: {
    primary: 'yellow',
  },
};

export const App = () => {
  return <ThemeProvider themes={themes}>....</ThemeProvider>;
};

Use defined variables in your styles files

.app {
  color: var(--primay);
}

#Props list List of ThemeProvider props

useTheme hook

If you want to have access to update theme in any place of the application you can use useTheme hook

import { useTheme } from 'react-css-theming';

const MyComponent = () => {
  const { theme, change, themes } = useTheme();

  //....
};

Hook values