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

docsite: Add theme toggle #302

Merged
merged 6 commits into from
Mar 21, 2024
Merged

docsite: Add theme toggle #302

merged 6 commits into from
Mar 21, 2024

Conversation

juliaogris
Copy link
Member

@juliaogris juliaogris commented Mar 18, 2024

Add theme toggle to docs and template in top right corner. Theme doc stores
user preferences in local-storage, and takes OS prefers dark-theme into
account if set. For the docs page if nothing is set it defaults to light.

Refactor CSS color variables and version SVG files in preparatory steps.

Fixes: evylang/todo#71


Preview at https://evy-lang-stage--302-2ikl2shu.web.app/preview/

Update SVG files with version number in filename so we can include them in our
long expire cache policy. While at it, change the evy-e.svg DOM node from
<embed> (not officially supported, dates back to Flash days), to <object>.
This also explains previous strange behavior with embed on ios. We cannot
just use an <img> for this SVG file as that does not render it interactive.

Link: https://vecta.io/blog/best-way-to-embed-svg
Link: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
Commit-group: 1/2
Update SVG files with version number in filename so we can include them in our
long expire cache policy. While at it, change the evy-e.svg DOM node from
<embed> (not officially supported, dates back to Flash days), to <object>.
This also explains previous strange behavior with embed on ios. We cannot
just use an <img> for this SVG file as that does not render it interactive.

Link: https://vecta.io/blog/best-way-to-embed-svg
Link: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
Gen-command: make docs
Commit-group: 2/2
Refactor CSS variables by grouping them unter :root in preparation for light
theme. Also rename "primary" to "accent" (the blueish link color) as this is
the more accurate design term.
Fix color of code links - it was white where it was supposed to be the sidebar
color.
Add theme toggle to docs and template in top right corner. Theme doc stores
user preferences in local-storage, and takes OS prefers dark-theme into
account if set. For the docs page if nothing is set it defaults to light.

Minimal demo: frontend/css/switch.html

Commit-group: 1/2
Add theme toggle to docs and template in top right corner. Theme doc stores
user preferences in local-storage, and takes OS prefers dark-theme into
account if set. For the docs page if nothing is set it defaults to light.

Minimal demo: frontend/css/switch.html

Fixes: evylang/todo#71
Gen-command: make docs
Commit-group: 2/2
Copy link
Member

@camh- camh- left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📗

@juliaogris juliaogris merged commit 6c9abe3 into main Mar 21, 2024
3 checks passed
@juliaogris juliaogris deleted the theme-toggle branch March 21, 2024 04:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

docsite: Theme toggle
2 participants