@marinda/tetris-theme-ui-preset v3.0.0

Tetris Theme UI preset

A theme preset that can be be used with Theme UI. Works great if you have more than one color mode (light, dark, etc).

Demo

demo source code.

Refer to Theme-UI's docs on more detailed usage.

Usage

Install.

npm i -S @marinda/tetris-theme-ui-preset

Theme config

Import the theme preset into your react app.

import tetrisTheme from "@marinda/tetris-theme-ui-preset";

Customizing the theme

Customize the theme by merging it with your own theme config. Pass it along to Theme UI's ThemeProvider.

npm i --save lodash.merge

/* Override theme preset for any custom adjustments */
import merge from "lodash.merge";
import tetrisTheme from "@marinda/tetris-theme-ui-preset";

const theme = {
  colors: {
    text: "111",
    background: "#f2f2f2",
    modes: {
      dark: {
        text: "#f2f2f2",
        background: "#111"
      }
    }
  },
  styles: {
    Header: {
      color: "text",
      bg: "background"
    },
    Layout: {
      border: "24px solid",
      borderColor: "muted"
    }
  }
};

export default merge({}, tetrisTheme, theme);