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

Add theme selection #139

Open
ColinEspinas opened this issue Jan 22, 2022 · 2 comments
Open

Add theme selection #139

ColinEspinas opened this issue Jan 22, 2022 · 2 comments
Labels
enhancement New feature or request

Comments

@ColinEspinas
Copy link
Member

The goal of that issue would be to add theme management.

This would be easy to add thanks to the current style architecture, we just need to changes the CSS variables indicated in the assets/css/theme.css file.
This could maybe be done by giving an id to the theme stylesheet and switching CSS files on theme selection but could cause visual glitches at page load.

This would also imply a new component for theme selection and to store a value to the local storage.
@ColinEspinas ColinEspinas added the enhancement New feature or request label Jan 22, 2022
@rhusiev
Copy link

rhusiev commented Jul 13, 2022

I'd like also the site to also have a presets of themes and color choosers for text, background etc.

@adjagu
Copy link

adjagu commented Jul 27, 2022

I've had good results with the following multi-theme test file: Multi-Theme Test.

Please note: I am not a coder. The linked test file is just a proof of concept.

The above linked html file was tested as a file:/// and served locally. It worked for me both ways. With an empty localStorage the default theme was set, saved, and used upon first visit. Theme was able to be changed and that change was saved across visits.

What browsers were tested?

  • Chromium
  • Firefox
    • Beta, Developer, Nightly, and Stable
  • Google Chrome
  • Vivaldi

Which browsers worked? All of them except Vivaldi. With Vivaldi everything worked except keeping the saved theme data in localStorage after a browser exit and re-open. I tested Vivaldi on other websites that don't use my code and they also did not remember their settings after a browser exit and re-open. I am unsure if this is an issue on my machine or an issue with Vivaldi.

How it works:

  • Without JavaScript:
    • User receives default theme (styling) from css :root.
    • Themes can not be chosen.
    • html data-theme is not used.
  • With JavaScript:
    • User receives default theme upon first visit.
    • Theme choice is set (<html data-theme="theme_name">) and saved.
    • User can choose to select a different theme. That choice will be set and saved.
    • html data-theme is used. This allows multi themes since we can now have specific :roots.

If someone doesn't have JavaScript then they receive styles from the less-specific css :root. JavaScript users receive their styling from the more specific :root[data-theme="default"]: This way upon their very first visit everyone will receive the same default style.

:root,
:root[data-theme="default"] {
	--color-body-background: #eee;
	--color-body-text: #111;
}

For people with JavaScript, themes are set with a <html data-theme="theme_name"> which allows us to use specificity on the :root in the form of :root[data-theme="theme_name"]. I was unable to produce any FOUC (flash of un-styled content) when using this proof of concept.

Maybe you will be able to find something useful in my terrible coding?

@daoudclarke daoudclarke transferred this issue from mwmbl/front-end Dec 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@adjagu @ColinEspinas @rhusiev