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!
import Material.Theme as Theme
main =
Html.span [ Theme.primary ] [ text "Primary color" ]
```scss $mdc-theme-primary: #fcb8ab; $mdc-theme-secondary: #feeae6; $mdc-theme-on-primary: #442b2d; $mdc-theme-on-secondary: #442b2d;
primary : Html.Attribute msg
Sets the text color to the theme primary color
secondary : Html.Attribute msg
Sets the text color to the theme secondary color
background : Html.Attribute msg
Sets the background color to the theme background color
error : Html.Attribute msg
Sets the text color to the theme error color
onPrimary : Html.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 : Html.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 : Html.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.
onError : Html.Attribute msg
Sets the text color to the theme on-error color
The theme's on-error color is a text color that works best on a error color background.
primaryBg : Html.Attribute msg
Sets the background color to the theme primary color
secondaryBg : Html.Attribute msg
Sets the background color to the theme secondary color
surface : Html.Attribute msg
Sets the surface color to the theme surface color
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.
Please note that the primary and secondary text style do not correspond to the theme's primary or secondary colors.
textPrimaryOnBackground : Html.Attribute msg
Sets text to a suitable color for the primary text style on top of the background color
textSecondaryOnBackground : Html.Attribute msg
Sets text to a suitable color for the secondary text style on top of the background color
textHintOnBackground : Html.Attribute msg
Sets text to a suitable color for the hint text style on top of the background color
textDisabledOnBackground : Html.Attribute msg
Sets text to a suitable color for the disabled text style on top of the background color
textIconOnBackground : Html.Attribute msg
Sets text to a suitable color for the icon text style on top of the background color
textPrimaryOnLight : Html.Attribute msg
Sets text to a suitable color for the primary text style on top of light background
textSecondaryOnLight : Html.Attribute msg
Sets text to a suitable color for the secondary text style on top of light background
textHintOnLight : Html.Attribute msg
Sets text to a suitable color for the hint text style on top of light background
textDisabledOnLight : Html.Attribute msg
Sets text to a suitable color for the disabled text style on top of light background
textIconOnLight : Html.Attribute msg
Sets text to a suitable color for the icon text style on top of light background
textPrimaryOnDark : Html.Attribute msg
Sets text to a suitable color for the primary text style on top of dark background
textSecondaryOnDark : Html.Attribute msg
Sets text to a suitable color for the secondary text style on top of dark background
textHintOnDark : Html.Attribute msg
Sets text to a suitable color for the hint text style on top of dark background
textDisabledOnDark : Html.Attribute msg
Sets text to a suitable color for the disabled text style on top of dark background
textIconOnDark : Html.Attribute msg
Sets text to a suitable color for the icon text style on top of dark background