Theme-up NPM | npm.io

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

Installing

Add the library to the package.json and install it

npm install theme-up

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

Wrap your app in GlobalThemeProvider.

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

Profit 💰

Getting the current theme

Import the ThemeContext

import { ThemeContext } from 'theme-up'

Use the Context
?
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

css variables theme theming

react styled-components

@infinitebrahmanuniverse/nolb-them @everything-registry/sub-chunk-2935

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago