Permalink
Switch branches/tags
chore/all/remove-event-handlers-from-adapters chore/button/alternates chore/checkbox/no-more-importants chore/image-list-screenshot chore/infra/high-contrast-rtl-screenshots chore/infra/not-old-ios chore/infrastructure/remove-normalize-css chore/license chore/list/list-item chore/package/update-sass-variables-to-default chore/select/update-adapter-value-methods chore/webpack/building-demos debugging-dumb-ios-tests docs/deploy-site docs/icon-button-meta-36 docs/survey-link-readmes-style docs/40 docs/41 drcampbell-fix/select-height experiment/drawer experimental/advorak/karma-cbt-runner experimental/browser-compat experimental/button-no-line-height experimental/card/ripple-surface experimental/drawer/ios-animation experimental/fab-mixins-kgf experimental_feat_extendedfab_issue2043 experimental_feat_extendedfab_transform experimental_feat_switch_colorscheme experimental/feature-targeting experimental/handlebars experimental/ie10-compat experimental/infra/button-flakiness experimental/lynnjepsen/screenshot-test experimental/m2-card-prototype experimental/menues1 experimental/outline-text-field experimental/ripple-cleanup-kgf experimental/ripple-ie-js-focus experimental/ripple-unbounded experimental/sassdoc experimental/screenshot-testing/cbt experimental/shape-ripple-ms experimental_shapes_system_mvp_single_radius experimental_shapes_system_mvp experimental/sliders/arrow-motions experimental/sliders/continuous experimental/sliders/discrete experimental/sliders/eventhandlers experimental/sliders/mixins experimental/sliders/ripple-states experimental/states-kgf experimental/states-nofocusripple-kgf experimental/states/selected experimental/text-field-outlined-flex experimental/textfield-improvements-prototype experimental_textfield_error_state_proposed experimental/theme/demo experimental/theme/disabled experimental/typescript-definitions feat/button-trailing-icon feat/card/states-ripple-surface feat/chips/elevation-mixin feat/dialog feat_extendedfab_issue2043_roboto_font feat/invalid-input-label feat/list_toggle_tabindex feat/navigation-drawer-dismissible-foundation-update feat/navigation-drawer-modal feat/navigation-drawer-new feat/navigation-drawer-sass-improve feat/navigation-drawer-water feat/navigation-drawer feat/new-switch feat/rail-drawer feat/side-sheet-scss-cleanup feat/side-sheet feat/slider feat/sliders/arrow-motion feat/sliders/disabled feat/sliders/discrete feat/sliders/tick-mark-coloring feat/snackbar--prototype feat/snackbar feat/tabs/tab-bar feat/tabs/tab-compute-dimensions feat/tabs/tab-handlers feat/tabs/tab-indicator-content feat/tabs/tab-indicator-in-tab feat/tabs/tab-scroller feat/tabs/tab feat/tabs/tabs-params-matching feat/test/button-assets-2-gcs feat/theme-emphasis fix/button/stroke-lineheight fix/checkbox/css-background-fade fix/chips/select fix/dialog-spec fix/drawer/fixture-js fix/drawer/page-scroll-issue fix/infrastructure/closure-module-declarations fix/list_checkbox_selectedindex fix/menu-surface/move-event-registration fix/menu/selection-group-styles fix/node-version-travisci fix/slider/center fix/text-field/outline-color fix/textarea-center greenkeeper/autoprefixer-9.2.0 greenkeeper/autoprefixer-9.2.1 greenkeeper/autoprefixer-9.3.0 greenkeeper/autoprefixer-9.3.1 greenkeeper/autoprefixer-9.4.0 greenkeeper/autoprefixer-9.4.1 greenkeeper/autoprefixer-9.4.2 greenkeeper/babel-loader-8.0.0 greenkeeper/babel-loader-8.0.1 greenkeeper/babel-loader-8.0.2 greenkeeper/babel-loader-8.0.3 greenkeeper/babel-loader-8.0.4 greenkeeper/colors-1.3.3 greenkeeper/conventional-commits-parser-3.0.1 greenkeeper/css-loader-1.0.1 greenkeeper/css-loader-2.0.0 greenkeeper/dart-sass-1.15.0 greenkeeper/dart-sass-1.15.1 greenkeeper/dart-sass-1.15.2 greenkeeper/detect-port-1.3.0 greenkeeper/fibers-3.1.0 greenkeeper/fibers-3.1.1 greenkeeper/fs-extra-7.0.1 greenkeeper/google-closure-compiler-20181008.0.0 greenkeeper/google-closure-compiler-20181028.0.0 greenkeeper/google-closure-compiler-20181028.0.1 greenkeeper/google-closure-compiler-20181125.0.1 greenkeeper/husky-1.1.2 greenkeeper/husky-1.1.3 greenkeeper/husky-1.1.4 greenkeeper/husky-1.2.0 greenkeeper/karma-3.1.0 greenkeeper/karma-3.1.1 greenkeeper/karma-3.1.2 greenkeeper/karma-3.1.3 greenkeeper/karma-sauce-launcher-2.0.0 greenkeeper/karma-webpack-3.0.5 greenkeeper/lerna-2.10.1 greenkeeper/lerna-3.0.0 greenkeeper/lerna-3.0.1 greenkeeper/lerna-3.0.2 greenkeeper/lerna-3.0.3 greenkeeper/lerna-3.0.4 greenkeeper/lerna-3.0.5 greenkeeper/lerna-3.0.6 greenkeeper/lerna-3.1.0 greenkeeper/lerna-3.1.1 greenkeeper/lerna-3.1.2 greenkeeper/lerna-3.2.0 greenkeeper/lerna-3.2.1 greenkeeper/lerna-3.3.0 greenkeeper/lerna-3.3.1 greenkeeper/lerna-3.3.2 greenkeeper/lerna-3.4.0 greenkeeper/lerna-3.4.1 greenkeeper/lerna-3.4.2 greenkeeper/lerna-3.4.3 greenkeeper/lerna-3.5.0 greenkeeper/lerna-3.5.1 greenkeeper/lerna-3.6.0 greenkeeper/npm-run-all-4.1.4 greenkeeper/npm-run-all-4.1.5 greenkeeper/@octokit/rest-16.2.0 greenkeeper/recast-0.16.1 greenkeeper/resemblejs-3.0.0 greenkeeper/semver-5.6.0 greenkeeper/simple-git-1.98.0 greenkeeper/simple-git-1.99.0 greenkeeper/simple-git-1.100.0 greenkeeper/simple-git-1.101.0 greenkeeper/simple-git-1.102.0 greenkeeper/simple-git-1.103.0 greenkeeper/simple-git-1.104.0 greenkeeper/simple-git-1.105.0 greenkeeper/simple-git-1.106.0 greenkeeper/simple-git-1.107.0 greenkeeper/standard-changelog-2.0.3 greenkeeper/standard-changelog-2.0.4 greenkeeper/standard-changelog-2.0.5 greenkeeper/standard-changelog-2.0.6 greenkeeper/stylelint-9.6.0 greenkeeper/stylelint-9.7.0 greenkeeper/stylelint-9.7.1 greenkeeper/stylelint-9.8.0 greenkeeper/stylelint-9.9.0 greenkeeper/stylelint-scss-3.3.1 greenkeeper/stylelint-scss-3.3.2 greenkeeper/stylelint-scss-3.4.0 greenkeeper/stylelint-scss-3.4.1 greenkeeper/stylelint-selector-bem-pattern-2.0.0 greenkeeper/testdouble-3.8.2 greenkeeper/testdouble-3.9.0 greenkeeper/testdouble-3.9.1 greenkeeper/webpack-4.0.0 greenkeeper/webpack-4.0.1 greenkeeper/webpack-4.1.0 greenkeeper/webpack-4.1.1 greenkeeper/webpack-4.2.0 greenkeeper/webpack-4.3.0 greenkeeper/webpack-4.4.0 greenkeeper/webpack-4.5.0 greenkeeper/webpack-4.6.0 greenkeeper/webpack-4.7.0 greenkeeper/webpack-4.8.2 greenkeeper/webpack-4.8.3 greenkeeper/webpack-4.9.0 greenkeeper/webpack-4.9.1 greenkeeper/webpack-4.9.2 greenkeeper/webpack-4.10.0 greenkeeper/webpack-4.10.1 greenkeeper/webpack-4.10.2 greenkeeper/webpack-4.11.0 greenkeeper/webpack-4.11.1 greenkeeper/webpack-4.12.0 greenkeeper/webpack-4.12.1 greenkeeper/webpack-4.12.2 greenkeeper/webpack-4.13.0 greenkeeper/webpack-4.14.0 greenkeeper/webpack-4.15.0 greenkeeper/webpack-4.15.1 greenkeeper/webpack-4.16.0 greenkeeper/webpack-4.16.1 greenkeeper/webpack-4.16.2 greenkeeper/webpack-4.16.3 greenkeeper/webpack-4.16.4 greenkeeper/webpack-4.16.5 greenkeeper/webpack-4.17.0 greenkeeper/webpack-4.17.1 greenkeeper/webpack-4.17.2 greenkeeper/webpack-4.17.3 greenkeeper/webpack-4.18.0 greenkeeper/webpack-4.18.1 greenkeeper/webpack-4.19.0 greenkeeper/webpack-4.19.1 greenkeeper/webpack-4.20.0 greenkeeper/webpack-4.20.1 greenkeeper/webpack-4.20.2 greenkeeper/webpack-4.21.0 greenkeeper/webpack-4.22.0 greenkeeper/webpack-4.23.0 greenkeeper/webpack-4.23.1 greenkeeper/webpack-4.24.0 greenkeeper/webpack-4.25.0 greenkeeper/webpack-4.25.1 greenkeeper/webpack-4.26.0 greenkeeper/webpack-4.26.1 greenkeeper/webpack-4.27.0 greenkeeper/webpack-4.27.1 greenkeeper/webpack-dev-server-3.0.0 greenkeeper/webpack-dev-server-3.1.0 greenkeeper/webpack-dev-server-3.1.1 greenkeeper/webpack-dev-server-3.1.2 greenkeeper/webpack-dev-server-3.1.3 greenkeeper/webpack-dev-server-3.1.4 greenkeeper/webpack-dev-server-3.1.5 greenkeeper/webpack-dev-server-3.1.6 greenkeeper/webpack-dev-server-3.1.7 greenkeeper/webpack-dev-server-3.1.8 greenkeeper/webpack-dev-server-3.1.9 greenkeeper/webpack-dev-server-3.1.10 latest-release list_custom_event_issue3481 list_custom_event_menu_update_issue3481 list_twolines_baseline_issue3038 maintenance/text-field master mock/crane origin/experimental/sliders patrickrodee-patch-1 patrickrodee-patch-2 refactor/text-field/opacity refactor/theme/color ripple/events ripple/prototype slider/mixins tabzzzzzzzzz test/switch-update textfields/verticalAlignment theme_alpha_variables_issue3066 typography_text_baseline
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
194 lines (134 sloc) 7.22 KB

Theme

The Material Design color system can be used to create a color scheme that reflects your brand or style.

Design & API Documentation

Installation

npm install @material/theme

Usage

Color Scheme

You can define the theme color variables before importing any MDC Web components:

$mdc-theme-primary: #fcb8ab;
$mdc-theme-secondary: #feeae6;
$mdc-theme-on-primary: #442b2d;
$mdc-theme-on-secondary: #442b2d;

@import "@material/button/mdc-button";

We suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.

https://www.w3.org/TR/WCAG20

Advanced customization

Color scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work "out of the box". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as mdc-button-filled-accessible. For more information, consult the documentation for each component.

Non-Sass customization

Only a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.

CSS Custom Properties

A note about <TEXT_STYLE>, <TEXT_STYLE> represents the lowercase name of the text styles listed above, e.g. hint.

CSS Custom property Description
--mdc-theme-primary The theme primary color
--mdc-theme-secondary The theme secondary color
--mdc-theme-background The theme background color
--mdc-theme-surface The theme surface color
--mdc-theme-on-primary Text color on top of a primary background
--mdc-theme-on-secondary Text color on top of a secondary background
--mdc-theme-on-surface Text color on top of a surface background
--mdc-theme-text-<TEXT_STYLE>-on-light Text color for TEXT_STYLE on top of light background
--mdc-theme-text-<TEXT_STYLE>-on-dark Text color for TEXT_STYLE on top of dark background

CSS Classes

A note about <TEXT_STYLE>, <TEXT_STYLE> represents the lowercase name of the text styles listed above, e.g. hint.

CSS Class Description
mdc-theme--primary Sets the text color to the theme primary color
mdc-theme--secondary Sets the text color to the theme secondary color
mdc-theme--background Sets the background color to the theme background color
mdc-theme--surface Sets the surface color to the theme surface color
mdc-theme--on-primary Sets the text color to the theme on-primary color
mdc-theme--on-secondary Sets the text color to the theme on-secondary color
mdc-theme--on-surface Sets the text color to the theme on-surface color
mdc-theme--primary-bg Sets the background color to the theme primary color
mdc-theme--secondary-bg Sets the background color to the theme secondary color
mdc-theme--text-<TEXT_STYLE>-on-light Sets text to a suitable color for TEXT_STYLE on top of light background
mdc-theme--text-<TEXT_STYLE>-on-dark Sets text to a suitable color for TEXT_STYLE on top of dark background

Sass Mixins, Variables, and Functions

Mixin Description
mdc-theme-prop($property, $style, $important, $edgeOptOut) Applies a theme color or a custom color to a CSS property, optionally with !important. If $edgeOptOut is true and a theme color is passed, the style will be wrapped in a @supports clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.

mdc-theme-prop Properties

The properties below can be used as the $style argument for the mdc-theme-prop mixin. Literal color values (e.g., rgba(0, 0, 0, .75)) may also be used instead.

A note about <TEXT_STYLE>, <TEXT_STYLE> represents the lowercase name of the text styles listed above, e.g. hint.

Property Name Description
primary The theme primary color
secondary The theme secondary color
background The theme background color
surface The theme surface color
text-<TEXT_STYLE>-on-light TEXT_STYLE on top of a light background
text-<TEXT_STYLE>-on-dark TEXT_STYLE on top of a dark background
on-primary A text/iconography color that is usable on top of primary color
on-secondary A text/iconography color that is usable on top of secondary color
on-surface A text/iconography color that is usable on top of surface color

mdc-theme-luminance($color)

Calculates the luminance value (0 - 1) of a given color.

@debug mdc-theme-luminance(#9c27b0); // 0.11654

mdc-theme-contrast($back, $front)

Calculates the contrast ratio between two colors.

@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071

mdc-theme-tone($color)

Determines whether the given color is "light" or "dark".

If the input color is a string literal equal to "light" or "dark", it will be returned verbatim.

@debug mdc-theme-tone(#9c27b0); // dark
@debug mdc-theme-tone(light);   // light

mdc-theme-contrast-tone($color)

Determines whether to use light or dark text on top of a given color.

@debug mdc-theme-contrast-tone(#9c27b0); // light

mdc-theme-prop-value($style)

If $style is a color (a literal color value, currentColor, or a CSS custom property), it is returned verbatim. Otherwise, $style is treated as a theme property name, and the corresponding value from $mdc-theme-property-values is returned. If this also fails, an error is thrown.

This is mainly useful in situations where mdc-theme-prop cannot be used directly (e.g., box-shadow).

Unlike the mdc-theme-prop mixin, this function does not support CSS custom properties. It only returns the raw color value of the specified theme property.

NOTE: This function is defined in _variables.scss instead of _functions.scss to avoid circular imports.

@debug mdc-theme-prop-value(primary); // #3f51b5
@debug mdc-theme-prop-value(blue);    // blue

mdc-theme-accessible-ink-color($fill-color, $text-style: primary)

Returns an accessible ink color that has sufficient contrast against the given fill color.

Params:

  • $fill-color: Supports the same values as mdc-theme-prop-value
  • $text-style: Value must be one of primary, secondary, hint, disabled, icon (see $mdc-theme-text-colors)

NOTE: This function is defined in _variables.scss instead of _functions.scss to avoid circular imports.

@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)
@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)

mdc-theme-text-emphasis($emphasis)

Returns opacity value for given emphasis.

Params:

  • $emphasis: Type of emphasis such as high, medium & disabled.
@debug mdc-theme-text-emphasis(high); // .87
@debug mdc-theme-text-emphasis(disabled); // .38