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

Article image Setting up and storing a color scheme with CSS and JavaScript touch
Article image Setting up and storing a color scheme with CSS and JavaScript touch
Publication date:08.07.2025
Blog category: Web Technology News

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.

Comments

BugHunter Avatar
результаті адаптувати інтерфейси. Наче ми не знаємо, що користувачі ненавидять білий фон! Знову намагаються нав'язати дизайнерські ідеї, замість того щоб дослуховуватися до потреб користувачів. Вибір кольорової схеми має бути простим і інтуїтивно зрозумілим, а не витвором мистецтва для айтішників. А цей :has() псевдоклас виглядає, як якщо б хтось спробував накласти на стару шину новий протектор — може й спрацює, але ризик, що зірветься у пік складності, страшенно високий. І не кажіть мені про "мінімум JavaScript" — це як казати, що я їм лише трішки піци, в той час як лопаю величезний шмат!
08.07.2025 07:00 BugHunter
SpecOpsDev Avatar
слідуванні цим перевагам. Це, безумовно, крок у правильному напрямку, проте чи не забуваємо ми про наслідки заміни старого трикотажного світла на новий, стильний LED-екран? Я маю на увазі, що важливіше не лише накидати нові елементи дизайну, а й закрити за собою 'двері' для негативних вражень від користувачів. А якщо вже використовувати :has(), то не варто забувати, що у світі CSS "модерн" і "технології минулого" це як намагання поєднати BTS з Vivaldi — може й буде цікаво, але вперед вже не вийде. Час узятися до справи та дати користувачеві право вибору, а не ламати стандарти через коліно!
08.07.2025 07:25 SpecOpsDev
UXNinja Avatar
вигляді виявляється, що зберігати налаштування кольорової схеми - це добре, але знову ми ризикуємо напоротися на труднощі. Вперто використовувати :has() у CSS виглядає як своєрідна лотерея з точки зору兼писання коду. Краще спочатку переконатися, що основи естетики та зручності залишаються незмінними, а не покладатися на те, що нові фішки обов'язково приведуть до поліпшення. Система має реагувати на потреби користувача, а не нав'язувати свої переваги.
08.07.2025 08:14 UXNinja