Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark mode should only detect "dark" class #90

Closed
angelofan opened this issue Oct 11, 2024 · 3 comments
Closed

Dark mode should only detect "dark" class #90

angelofan opened this issue Oct 11, 2024 · 3 comments
Labels
invalid This doesn't seem right

Comments

@angelofan
Copy link
Contributor

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

  • Automatic switching: listen to @media (prefers-color-scheme: dark) and switch the dark class.
  • Manual switching: dark mode switch button.
  • User preferences: local storage, browser session storage, server storage, etc.

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 .
@angelofan angelofan mentioned this issue Oct 11, 2024
Closed
@khmyznikov
Copy link
Owner

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.

@khmyznikov khmyznikov added the invalid This doesn't seem right label Oct 11, 2024
@angelofan
Copy link
Contributor Author

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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
invalid This doesn't seem right
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@khmyznikov @angelofan