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

| name | type | default value | required | desc | | ------------ | ------ | ------------- | -------- | ---------------------------------------------- | | themes | Object | - | yes | object with defined themes and variables | | defaultTheme | string | default | no | default theme which will be applied as default |

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

| name | type | desc | | ------ | -------------- | ---------------------------------------------------------------------- | | theme | string | selected theme | | change | (string)=>void | function to update selected theme where arg is a string with new theme | | themes | string[] | array of available themes |