search

khmyznikov / pwa-install

Installation dialog for Progressive Web Application. Provides a more convenient user experience and fixes the lack of native dialogs in some browsers.
https://www.khmyznikov.com/pwa-install
MIT License
379 stars 61 forks source link

Dark mode should only detect "dark" class #90

Closed angelofan closed 1 month ago

angelofan commented 1 month ago

My website has a button to manually switch between dark and light mode. The button click event implements the switch by adding or removing the "dark" class to the top level HTML tree.

Why use Dark Mode by adding a "dark" class?

Tailwind CSS recommends doing this. Dark mode in Tailwind CSS:

Now instead of dark:{class} classes being applied based on prefers-color-scheme, they will be applied whenever the dark class is present earlier in the HTML tree.

How you add the dark class to the html element is up to you, but a common approach is to use a bit of JavaScript that reads a preference from somewhere (like localStorage) and updates the DOM accordingly.

<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
</body>
</html>

By referring to Tailwind CSS, we can learn some tips.

For dark mode detection, the package should leave the decision to the developer. Package only detecting the dark class of the outer DOM.

Packages should not detect @media (prefers-color-scheme: dark). Since it is read-only, projects cannot change the appearance of components by toggling this value.

What developers do in their projects

Package only do

The package only needs to add the dark mode CSS to the dark class, no other behavior is required.

More

This issue also resolves #16 .

khmyznikov commented 1 month ago

Hey man. The idea of this component is to mimic or be aligned with the browser UI. This concerns the language and dark mode. Because user experience start from this custom dialog and continues in browser UI, and it's important to keep it consistend.

angelofan commented 1 month ago

OK, thanks for the clarification. This plugin is designed to complement the browser's capabilities, not to extend functionality to project. I understand now.

khmyznikov commented 1 month ago

@angelofan you actually extend your project, but keeping the UX consistent between the app and browser.