Material Design 3 - Dynamic colors by Beercss

Overview

Color is used to express style and communicate meaning. With dynamic color, Material puts personal color preferences and individual needs at the forefront of systematic color application.

Dynamic color

Dynamic color describes the capability of variable color sources to remap system UI and in-app color experiences.

The color system enables apps to respond to user preferences and dynamic conditions, such as wallpaper selection or in-app content (such as music and video thumbnail art.)

Accessibility

Dynamic color is designed to meet accessibility standards for color contrast. The system of tonal palettes is central to making any color scheme accessible by default.

In a dynamic color scheme, colors are paired based on distance in tone so that contrast requirements are met regardless of changing hues.

Okay but, how to apply dynamic colors on Beercss?

I'm really excited to show how easy this can be. I developed a codepen here https://codepen.io/leo-bnu/pen/LYWxjVG. Basically It has two steps:

1) Write your html without any color on elements.

2) Call a js function to set a theme or mode.

// to get/set themeawait ui("theme", "url|path|color|file|blob");// to get/set modeui("mode", "light|dark");

And just let the framework do the job for you. Try out.

Have a nice day!