A minimalistic library that allows you to easily add theme support to your React app.

Installing

1. Add the library to the package.json and install it

npm install theme-up

2. Make an object of type Config (more details in section "Config object")

import { Config } from 'theme-up'

enum Theme {
  Light = 'light',
  Dark = 'dark'
}

export const themeConfig: Config<Theme> = {
  defaultTheme: Theme.Light,
  defaultThemeDark: Theme.Dark,
  themes: {
    [Theme.Light]: {
      backgroundColor: '#FFF',
      textColor: '#000'
    },
    [Theme.Dark]: {
      backgroundColor: '#273238',
      textColor: '#FFF'
    }
  }
}

3. Wrap your app in GlobalThemeProvider.

<GlobalThemeProvider config={themeConfig}>
	...
</GlobalThemeProvider>

4. Profit 💰

Getting the current theme

1. Import the ThemeContext

import { ThemeContext } from 'theme-up'

2. Use the Context
3. ?
4. Profit

Config object

When you're using typescript you should pass your theme identifier as a type. This type can be a string or number, or an extension of them, ex. an Enum (as shown in the installation example).

| key | type | optional | description | | --- | --- | --- | --- | | defaultTheme: T | generic | required | The default theme. This value must be an object within themes. | | defaultThemeDark: T | generic | required | The default theme if the browser specifies a user preference (safari macOS). This value must be an object within themes. | | themes: { [key in T]?: Styles } | required | Object, with key as defined in generics | An object containing all themes, every object's key will be used as identifier for that theme. The objects belonging to a theme are key-value pairs defining the variable name and value respectively. The variable names can be written with and without the -- prefix. | | initInterceptor?: (theme: T) => T | function | optional | Gives you the ability to do something when the theme is initiated (on load). This functions expects a return value of a theme (identifier). | | onUpdate?: (theme: T) => void | function | optional | A function that gets called on every theme change. | | isPersistent?: boolean | boolean | optional | A boolean that decides wether or not the value should be stored and retreived from localStorage |

* an extension of string | number