Theming

Polythene is an implementation of Google's Material Design, but it can also be used with (radically) different styling.

This section describes a number of ways to create customizations - from simple local colors to more radical changes.

• Customization options
• The quickest way to create a custom blue button
  • Mithril example
  • React example

Customization options

Customization options can be used side by side:

1. Light and Dark
2. Styling with variables
3. Wrapper components
4. Global theme file
5. Custom CSS

The quickest way to create a custom blue button

Read this first if you are just looking for a quick way to make a modification to a component.

Create custom CSS by passing a new CSS class and component style variables.

Mithril example

import m from "mithril"
import { Button } from "polythene-mithril"
import { ButtonCSS } from "polythene-css"

ButtonCSS.addStyle(".blue-button", {
  color_light_background: "blue",
  color_light_text:       "white"
})

m(Button, {
  className: "blue-button",
  label: "Blue Button"
})

React example

import React from "react"
import { Button } from "polythene-react"
import { ButtonCSS } from "polythene-css"

ButtonCSS.addStyle(".blue-button", {
  color_light_background: "blue",
  color_light_text:       "white"
})

<Button className="blue-button" label="Blue Button" />