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.

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

Add support for dark mode #10

Open
MartinBspheroid opened this issue Jan 6, 2025 · 2 comments
Open

Add support for dark mode #10

MartinBspheroid opened this issue Jan 6, 2025 · 2 comments
Labels
DOM DOM backend related feature New feature or request

Comments

@MartinBspheroid
Copy link
Collaborator

MartinBspheroid commented Jan 6, 2025

Adjust the fallback color to render elements in both light and dark mode, eg. If the rendering Color for Widget is not defined, fall back to black or white (depending on the mode).
Nowadays, light/dark mode is detected by the browser so we can use the media query to detect the mode and set the theme accordingly from get-go during the initial render.
Provide a hook (e.g., useTheme) that allows users to toggle between light and dark themes. This hook can also store the user's preference in localStorage or cookies.

Ideas/Features:

  • Add support for custom light/dark color fallbacks.
  • Detect system theme and set theme accordingly.
  • Provide a useTheme hook for switching between light and dark modes when user preference is not set or user has set a preference.
  • Support saving user preference in localStorage or cookies.
@MartinBspheroid MartinBspheroid added the feature New feature or request label Jan 6, 2025
@MartinBspheroid
Copy link
Collaborator Author

I've tried to add this but I'm not big fan of it 👎

Detecting user-preferred mode via Rust is possible, but explicitly passing it to each function for changing color seems like a bad design choice.

I would consider doing it like proposed in #11 because it will provide the following extra features:

  • handle system preferred changes automatically without event listeners (just let the browser do it with media query)
  • with CSS nesting being at baseline (eg. should cover all 3 major browsers), light and dark modes code should be pretty maintainable.
  • this will involve changing the background of the whole page as well, and as it's planned to move away from hard-coded CSS, it makes sense to include this change in the list.

@MartinBspheroid
Copy link
Collaborator Author

This looks better to me, but it's still rough around the edges.
I would like to add some ability for users to define their own color schemes and do some customization. Setting it dynamically during run seems like an overkill, so just at start seems enough

@MartinBspheroid MartinBspheroid added the DOM DOM backend related label Jan 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
DOM DOM backend related feature New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant