This content originally appeared on DEV Community and was authored by Leonardo Rafael Wehrmeister
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 theme
await ui("theme", "url|path|color|file|blob");
// to get/set mode
ui("mode", "light|dark");
And just let the framework do the job for you. Try out.
Have a nice day! 🍺🍺🍺
This content originally appeared on DEV Community and was authored by Leonardo Rafael Wehrmeister
Leonardo Rafael Wehrmeister | Sciencx (2022-06-29T20:19:22+00:00) Material Design 3 – Dynamic colors by Beercss. Retrieved from https://www.scien.cx/2022/06/29/material-design-3-dynamic-colors-by-beercss/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.