Material.Theme

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

Material Components Web use a theme comprised of a primary and a secondary color. Those colors can be conveniently override via Sass (see below), and less conveniently via CSS. They cannot be changed from Elm at all.

While this module defines attributes that mimic the CSS classes available by MDC Web, it is recommended to use MDC Web's Sass API to do themeing since it is a lot more flexible. I highly recommend you check it out!

Resources
Basic Usage
Changing Theme via SASS
Colors
- Text Colors
- Background Colors
Text Styles

Resources

Basic Usage

import Material.Theme as Theme


main =
    Html.span [ Theme.primary ] [ text "Primary color" ]

Changing Theme via SASS

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

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

Colors

Text Colors

primary : Attribute msg

Sets the text color to the theme primary color

secondary : Attribute msg

Sets the text color to the theme secondary color

background : Attribute msg

Sets the background color to the theme background color

onPrimary : Attribute msg

Sets the text color to the theme on-primary color

The theme's on-primary color is a text color that works best on a primary color background.

onSecondary : Attribute msg

Sets the text color to the theme on-secondary color

The theme's on-secondary color is a text color that works best on a secondary color background.

onSurface : Attribute msg

Sets the text color to the theme on-surface color

The theme's on-surface color is a text color that works best on a surface color background.

Background Colors

primaryBg : Attribute msg

Sets the background color to the theme primary color

secondaryBg : Attribute msg

Sets the background color to the theme secondary color

surface : Attribute msg

Sets the surface color to the theme surface color

Text Styles

MDC Web use a system that defines five text styles. In addition to the theme's background color, they can be used on either light or dark background. The text styles are defined as follows:

Those text styles can be used on light background, dark background and on the theme's background color whether it is light or dark.

primary: Used for most text
secondary: Used for text which is lower in the visual hierarchy
hint: Used for text hints, such as those in text fields and labels
disabled: Used for text in disabled components and content
icon: Used for icons

Please note that the primary and secondary text style do not correspond to the theme's primary or secondary colors.

Text Styles on Background

textPrimaryOnBackground : Attribute msg

Sets text to a suitable color for the primary text style on top of the background color

textSecondaryOnBackground : Attribute msg

Sets text to a suitable color for the secondary text style on top of the background color

textHintOnBackground : Attribute msg

Sets text to a suitable color for the hint text style on top of the background color

textDisabledOnBackground : Attribute msg

Sets text to a suitable color for the disabled text style on top of the background color

textIconOnBackground : Attribute msg

Sets text to a suitable color for the icon text style on top of the background color

Text Styles on Light Background

textPrimaryOnLight : Attribute msg

Sets text to a suitable color for the primary text style on top of light background

textSecondaryOnLight : Attribute msg

Sets text to a suitable color for the secondary text style on top of light background

textHintOnLight : Attribute msg

Sets text to a suitable color for the hint text style on top of light background

textDisabledOnLight : Attribute msg

Sets text to a suitable color for the disabled text style on top of light background

textIconOnLight : Attribute msg

Sets text to a suitable color for the icon text style on top of light background

Text Styles on Dark Background

textPrimaryOnDark : Attribute msg

Sets text to a suitable color for the primary text style on top of dark background

textSecondaryOnDark : Attribute msg

Sets text to a suitable color for the secondary text style on top of dark background

textHintOnDark : Attribute msg

Sets text to a suitable color for the hint text style on top of dark background

textDisabledOnDark : Attribute msg

Sets text to a suitable color for the disabled text style on top of dark background

textIconOnDark : Attribute msg

Sets text to a suitable color for the icon text style on top of dark background

aforemny/material-components-web-elm/1.0.0