Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@material/theme
Advanced tools
This color palette comprises primary and secondary colors that can be used for illustration or to develop your brand colors.
MDC Theme is a foundational module that themes MDC Web components. The colors in this module are derived from three theme colors:
and five text styles:
A note about Primary and Secondary, don't confuse primary/secondary color with primary/secondary text. The former refers to the primary/secondary theme color that is used to establish a visual identity and color many parts of your application. The latter refers to the style of text that is most prominent (low opacity, high contrast), and used to display most content.
Some components can change their appearance when in a Dark Theme context, aka placed on top of a dark background. There are two ways to specify if a component is in a Dark Theme context. The first is to add mdc-theme--dark
to a container element, which holds the component. The second way is to add <component_name>--theme-dark
modifier class to the actual component element. For example, mdc-button--theme-dark
would put the MDC Button in a Dark Theme context.
A note about Dark Theme context, don't confuse Dark Theme context with a component that has a dark color. Dark Theme context means the component sits on top of a dark background.
npm install --save @material/theme
MDC Theme makes it easy to develop your brand colors. You override the default theme color through Sass variables or CSS custom properties. CSS custom properties enables runtime theming.
A note about Sass variables, you need to define the three theme color variables before importing mdc-theme or any MDC-Web components that rely on it, like following:
$mdc-theme-primary: #9c27b0; // Purple 500
$mdc-theme-secondary: #ffab40; // Orange A200
$mdc-theme-background: #fff; // White
@import "@material/theme/mdc-theme";
A note about
$mdc-theme-secondary
: This variable was previously named$mdc-theme-accent
. For backward compatibility,$mdc-theme-accent
still exists, but it is deprecated. Apps that previously customized$mdc-theme-accent
will continue to work, but new apps should use$mdc-theme-secondary
instead.
MDC Theme also exposes light and dark variants of the primary and secondary colors. By default, these values are computed by lightening and darkening the main primary/secondary colors in Sass, but you can override them if desired:
$mdc-theme-primary-light: #ce93d8; // Purple 200
$mdc-theme-primary-dark: #6a1b9a; // Purple 800
$mdc-theme-secondary-light: #ffd180; // Orange A100
$mdc-theme-secondary-dark: #ff6d00; // Orange A700
@import "@material/theme/mdc-theme";
The text color, for text placed on top of these selected theme colors, is programmatically computed based on color contrast. We follow the Web Content Accessibility Guidelines 2.0.
A note about
<TEXT_STYLE>
and<THEME_COLOR>
,<TEXT_STYLE>
represents the lowercase name of the text styles listed above, e.g.hint
.<THEME_COLOR>
represents the lowercase name of the theme colors listed above, e.g.secondary
. When you put it all together it would be--mdc-theme-text-hint-on-secondary
.
CSS Custom property | Description |
---|---|
--mdc-theme-primary | The theme primary color |
--mdc-theme-primary-light | The theme primary color (light variant) |
--mdc-theme-primary-dark | The theme primary color (dark variant) |
--mdc-theme-secondary | The theme secondary color |
--mdc-theme-secondary-light | The theme secondary color (light variant) |
--mdc-theme-secondary-dark | The theme secondary color (dark variant) |
--mdc-theme-background | The theme background color |
--mdc-theme-text-<TEXT_STYLE>-on-<THEME_COLOR> | Text color for TEXT_STYLE on top of THEME_COLOR 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 |
Some components can change their appearance when a theme-based modifier CSS class is applied. For example, mdc-button--primary
will make the MDC Button the primary color. For more documentation on these modifier classes, consult the documentation for each component.
If you want to modify an element, which is not a Material Design component, you can apply the following modifier CSS classes.
A note about
<TEXT_STYLE>
and<THEME_COLOR>
,<TEXT_STYLE>
represents the lowercase name of the text styles listed above, e.g.hint
.<THEME_COLOR>
represents the lowercase name of the theme colors listed above, e.g.secondary
. When you put it all together it would bemdc-theme--text-hint-on-secondary
.
CSS Class | Description |
---|---|
mdc-theme--primary | Sets the text color to the theme primary color |
mdc-theme--primary-light | Sets the text color to the theme primary color (light variant) |
mdc-theme--primary-dark | Sets the text color to the theme primary color (dark variant) |
mdc-theme--secondary | Sets the text color to the theme secondary color |
mdc-theme--secondary-light | Sets the text color to the theme secondary color (light variant) |
mdc-theme--secondary-dark | Sets the text color to the theme secondary color (dark variant) |
mdc-theme--background | Sets the background color to the theme background color |
mdc-theme--primary-bg | Sets the background color to the theme primary color |
mdc-theme--primary-light-bg | Sets the background color to the theme primary color (light variant) |
mdc-theme--primary-dark-bg | Sets the background color to the theme primary color (dark variant) |
mdc-theme--secondary-bg | Sets the background color to the theme secondary color |
mdc-theme--secondary-light-bg | Sets the background color to the theme secondary color (light variant) |
mdc-theme--secondary-dark-bg | Sets the background color to the theme secondary color (dark variant) |
mdc-theme--text-<TEXT_STYLE>-on-<THEME_COLOR> | Sets text to a suitable color for TEXT_STYLE on top of THEME_COLOR background |
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 |
Mixin | Description |
---|---|
mdc-theme-prop($property, $style, $important) | Applies a theme color to a property |
mdc-theme-dark($root-selector, $compound) | Creates a rule that is applied when the current selector is within an Dark Theme context |
mdc-theme-dark($root-selector, $compound)
Creates a rule that is applied when the current selector is within an Dark Theme context. If you are using the mixin on anything other than the base selector of the component, e.g. .mdc-button
, you need to specify $root-selector
as the base selector as a parameter. You can also specify $compound
to true if the the current selector is a compound selector with the base selector, e.g. a modifier class to the component root element.
mdc-theme-prop
PropertiesThese properties can be used as the $property
argument for mdc-theme-prop
mixin.
A note about
<TEXT_STYLE>
and<THEME_COLOR>
,<TEXT_STYLE>
represents the lowercase name of the text styles listed above, e.g.hint
.<THEME_COLOR>
represents the lowercase name of the theme colors listed above, e.g.secondary
. When you put it all together it would betext-hint-on-secondary
.
Property Name | Description |
---|---|
primary | The theme primary color |
primary-light | The theme primary color (light variant) |
primary-dark | The theme primary color (dark variant) |
secondary | The theme secondary color |
secondary-light | The theme secondary color (light variant) |
secondary-dark | The theme secondary color (dark variant) |
background | The theme background color |
text-<TEXT_STYLE>-on-<THEME_COLOR> | TEXT_STYLE on top of THEME_COLOR background |
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 |
mdc-theme-luminance
Calculates the luminance value (0 - 1) of a given color.
@debug mdc-theme-luminance(#9c27b0); // 0.11654
mdc-theme-contrast
Calculates the contrast ratio between two colors.
@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071
mdc-theme-light-or-dark
Determines whether to use light or dark text on top of a given color.
@debug mdc-theme-light-or-dark(#9c27b0); // light
FAQs
The Material Components for the web theming system
The npm package @material/theme receives a total of 1,008,631 weekly downloads. As such, @material/theme popularity was classified as popular.
We found that @material/theme demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.