Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@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.
npm install @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.
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-secondary | The theme secondary color |
--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 |
MDC Web provides SASS mixins, such as mdc-button-filled-accessible
, to facilitate customization of some components. For more information, 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--secondary | Sets the text color to the theme secondary color |
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--secondary-bg | Sets the background color to the theme secondary color |
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, $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
PropertiesThe 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>
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 |
secondary | The theme secondary color |
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($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($property)
If $property
is a literal color value (e.g., blue
, #fff
), it is returned verbatim. Otherwise, the value of the
corresponding theme property (from $mdc-theme-property-values
) is returned. If $property
is not a color and no
such theme property exists, 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)
FAQs
The Material Components for the web theming system
The npm package @material/theme receives a total of 891,617 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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.