Polymer 1.0 usage

Add the following line inside your <head> tag
AFTER the webcomponents-lite.min.js and other HTML imports.

<link rel="import" href="path/to/theme.html">

To use the theme within your custom element, add the following line
inside your <dom-module> tag:

<link rel="import" href="path/to/theme.css" type="css">
OK

Polymer 0.5 usage

Add the following line inside your <head> tag.

<link rel="stylesheet" href="path/to/0.5/theme.css" shim-shadowdom>
OK

Dialog Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

More Info Decline Accept

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tap me to close

Download Starting Shortly

Stay updated! Enter your email address if you would like to be notified of updates:

No thanks Keep me updated
Polymer Themes
 

Custom style

Base theme: Everest

Customize colors

Change all matching colors when I make a changeAuto-change similar colors

General

Body background
Hero background
Primary text
Secondary text
Links
 
Toolbar background
Toolbar text
 
Progress bar active
Progress bar secondary
 
Spinner

Buttons

Primary button
Secondary button
Success button
Info button
Warning button
Error button
Disabled button
Toggle buttons
Checked button
Checked bar
Unchecked button
Uhchecked bar

Form Widgets

Checkbox checked
Checkbox unchecked
Checkbox label
 
Radio button checked
Radio button unchecked
Radio button label
 
Slider knob
Slider active
Slider pin

Tabs and Menus

Paper tabs
Background
Text
Selection bar
Ink
Paper menu
Background
Text
Disabled text
Preview theme changes
Download will appear on next page

paper-button

Flat

default disabled noink icon primary secondary success info warning error link

Raised

default disabled noink icon primary secondary success info warning error link

Toggleable

default disabled noink icon primary secondary success info warning error link

paper-checkbox

Enabled

Oxygen Carbon Hydrogen Nitrogen Calcium

Disabled

Oxygen Carbon Hydrogen Nitrogen Calcium

paper-dialog

dialog modal

paper-fab

Enabled

Disabled

Colors

paper-icon-button

Enabled

Disabled

Color

Size




paper-input

Text input

Text area

Validation

Character counter

paper-menu

Standard

Inbox Starred Sent mail Drafts

Pre-selected

Inbox Starred Sent mail Drafts

Multi-select

Bold Italic Underline Strikethrough

paper-progress

Progress bar

Start

Indeterminate



Secondary


paper-radio-button

Enabled

Oxygen Carbon Hydrogen Nitrogen Calcium

Disabled

Oxygen Carbon Hydrogen Nitrogen Calcium

paper-radio-group

Enabled

Oxygen Carbon Hydrogen Nitrogen Calcium

Disabled

Oxygen Carbon Hydrogen Nitrogen Calcium

paper-slider

Default

Oxygen


Argon


Hydrogen


Nitrogen


Sprinkles

Editable

R
G
B

Labelled pins

Brightness

Ratings:

paper-spinner

paper-tabs

No ink effect and no sliding bar

ITEM ONE ITEM TWO ITEM THREE

The bottom bar appears to indicate the selected tab, but without sliding effect.

ITEM ONE ITEM TWO ITEM THREE

The bar slides to the selected tab

ITEM ONE ITEM TWO ITEM THREE

Inky Tabs

ITEM ONE ITEM TWO ITEM THREE

Tabs in Toolbar

ITEM ONE ITEM TWO

paper-toast

Discard Draft Get Messages Retry

paper-toggle-button

Enabled

Oxygen
Carbon
Hydrogen
Nitrogen
Calcium

Disabled

Oxygen
Carbon
Hydrogen
Nitrogen
Calcium

paper-toolbar

Toolbar + Toolbar: tall +
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel
cancel