theme-up

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

1. 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'
    }
  }
}

1. Wrap your app in GlobalThemeProvider.

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

1. Profit 💰

Getting the current theme

1. Import the ThemeContext

import { ThemeContext } from 'theme-up'

1. Use the Context
2. ?
3. 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}