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 Dark Mode user prefers & other a11y fixes ⌨️♿️ #282

Merged
merged 4 commits into from
Jun 23, 2023

Conversation

dmlb
Copy link
Contributor

@dmlb dmlb commented Jun 20, 2023

Describe your changes

  • add tailwind classes for dark mode
  • clear all contrast errors
  • add darkColor for tags (schema, interfaces, yml, template)
  • show keyboard focus on entire tag (label and input wrapper)
  • fix label for/id pair break when apostrophe
  • add SR only new tab warnings
  • add keyboard functionality to back to top button
  • add more structural HTML elements (ol, nav)
Screen Shot 2023-06-19 at 6 19 42 PM Screen Shot 2023-06-19 at 6 21 08 PM

Related issue number/link

Add keyboard support related to recent merge #223
contrast fixes for text:background 5:1 related to #70 (comment)

dmlb and others added 4 commits June 19, 2023 18:19
- add tailwind classes for dark mode
- clear all contrast errors
- add darkColor for tags (schema, interfaces, yml, template)
- show keyboard focus on entire tag (label and input wrapper)
- fix label for/id pair break when apostrophe
- add SR only new tab warnings
- add keyboard functionality to back to top button
Copy link
Collaborator

@VeckoTheGecko VeckoTheGecko left a comment

Choose a reason for hiding this comment

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

Took me a wihle to wrap my head around everything, but after some sleuthing I agree with it all.

Colossal effort @dmlb !! A lot of attention put into the look of the site which I'm sure everyone will appreciate. I particularly like the YT feed and resource button animations on the home page, very satisfying 😄

src/routes/resources/+page.svelte Show resolved Hide resolved
@VeckoTheGecko
Copy link
Collaborator

Do you know if it would be easy to add a manual dark/light theme switcher in the website (kinda like how the pandas docs has a system, light, and dark preference).

No need to implement mainly just curious to see you think its easy/possible. If easy, I can create a low priority issue for it.

@VeckoTheGecko VeckoTheGecko merged commit dfb99b4 into ClimateTown:main Jun 23, 2023
2 checks passed
@dmlb
Copy link
Contributor Author

dmlb commented Jun 23, 2023

Do you know if it would be easy to add a manual dark/light theme switcher in the website (kinda like how the pandas docs has a system, light, and dark preference).

No need to implement mainly just curious to see you think its easy/possible. If easy, I can create a low priority issue for it.

It's doable for sure, need a little planning :)

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.

None yet

2 participants