Theme Man

JavaScript Bindings for Global CSS Variables

Installation

npm install --save theme-man

Usage

Create a theme object

// src/theme.js
import { createThemeMan } from "theme-man";

const defaultThemeValues = {
  primaryColor: "red"
};

const { theme } = createThemeMan(defaultThemeValues, {
  /*
    Theme Man will generate minified and unique names for CSS variables. By default it is enabled.
    You could turn it off if you want readable names during development.
  */
  avoidNameCollision: true
});

export const Theme = theme;

theme-man will create global CSS Variables according to defaultThemeValues.

Use it in components

import { Theme } from "src/theme";

function MyButton({ children }) {
  return (
    <div
      style={{
        background: Theme.primaryColor
      }}
    >
      {children}
    </div>
  );
}

Change CSS Variables at runtime in JavaScript

import { Theme } from "src/theme";

function darkMode() {
  Theme.primaryColor = "darkred";
}

Override Global CSS Variables with Modifiers

import { createThemeMan } from "theme-man";

const defaultThemeValues = {
  primaryColor: "red"
};

const { theme, createThemeModifier } = createThemeMan(defaultThemeValues);

export const GreenModifier = createThemeModifier({
  primaryColor: "green"
});

export const Theme = theme;

import { Theme, GreenModifier } from "src/theme";

function MyButton({ children }) {
  return (
    <div
      style={{
        background: Theme.primaryColor
      }}
    >
      {children}
    </div>
  );
}

<MyButton>This is a red button</MyButton>
<GreenModifier>
  <MyButton>This is a green button</MyButton>
</GreenModifier>

Why createThemeModifier instead of setting those CSS variables by myself?

Because sometimes your components might use Portal to render some component out of the scope. createThemeModifier provides the context so you can still read correct values by using ThemeModifierContext instead of applying the root values.