The theme defines a set of CSS custom properties you can use to apply a consistent color palette across your application.
If you are not importing any component themes, and want to use these colors, you need to import the style module explicitly.
The theme has a dark color variation available out of the box.
Each color has two variations: the default variation which is used for the light theme, and another variation used for the dark theme.
You need to import and include the “material-colors” style module before you can use the dark theme. It needs to be imported in the same style scope where you want to apply the dark colors.
Apply the theme="dark" attribute on the HTML element:
<html theme="dark">
<!-- The whole page/app will use the dark theme colors -->
</html>
You can apply the theme="dark" attribute on any element inside the style scope where you include the style module:
The most prominent color in the theme. It is used to bring attention to certain elements in the interface. An accompanying contrast color is also defined.
Usually a red color, used for things like error indicators, error messages and buttons that can cause permanent data loss.