Setting up and storing a color scheme with CSS and JavaScript touch

Зображення до статті Setting up and storing a color scheme with CSS and JavaScript touch
Зображення до статті Setting up and storing a color scheme with CSS and JavaScript touch

The author of the article, Henry Blaley Vromman, discusses a new approach to creating a "Dark Theme" feature that respects the customization of the username color scheme and allows you to set up the site and the minimum JavaScript. He explains how to use the new one: HAS () CSS pseudo-class and built-in HTML interactive elements to interact with the user without JavaScript. This allows you to maintain a color scheme, such as "Dark Theme", without the need for JavaScript, except for a small number of code to store user choice.

🚀 Black Vromman also discusses the importance of taking into account the user system settings, using the "first light mode" approach. This means that the default is used by a light color scheme that is replaced by dark for users who choose it. He explains how to use the media feature Prefers-Color-Scheme to determine the user settings and set a color-sele, respectively.

💡 Concerning the provision of control, the author recommends that users be chosen between light (default) and dark color schemes at page level. It argues that the use of built -in HTML items to handle the user's actions instead of, say, invested

, improves the chances of providing quality experience for users with assimilant technologies.

🧠 Blaley Vromman explains that a JavaScript was required to respond to us user's choice, for example, to install an event handler on

  • 📌 Use a new CSS: HAS () new pseudo-class to interact with the user without JavaScript.
  • 📌 Supporting a color scheme, such as "Dark Theme", unnecessary in JavaScript, except for a small number of code to store user choice.
  • 📌 How to apply Prefers-Color-Scheme media to determine user settings and set a color-sele, respectively.
  • 📌 The importance of giving users the opportunity to choose between light (default) and dark color schemes at page level.
🧩 Summary: Henry Blaley Vromman is considering a new approach to creating a Dark Theme, which respects the user-colored color scheme and allows you to set up a site and minimum JavaScript. He explains how to use the new one: HAS () CSS pseudo-class and built-in HTML interactive elements to interact with the user without JavaScript.
🧠 Own considerations: In addition to the Blade Woman approach, you can consider the use of CSS variables to store user settings. This will give more flexibility to change the color scheme in the future, for example, if you want to add additional color themes. You should also consider the use of CSS Grid or FlexBox to create an adaptive user interface that looks good on all types of screens and devices.