dark mode toggle, modularization into Svelte components, filter "and/or" mode #295
Conversation
- update tailwind darkmode config to be class based - check os settings when initilizing and save user selection in local storage - toggle classes for dark mode - update tag dark mode css to use classes - componentize button/button links for consistent styles dark/hover/disable - componentize tag wrapper - componentize checkbox
for more information, see https://pre-commit.ci
- create component for dark mode toggle logic - create component for back to top scroll button (and add to youtube page) - create component for resource nav - create component for Filter Form - move functions into lib/utils - move scrolling constants to lib/constants - update tag wrapper component - replace forms in resource and youtube page with component
for more information, see https://pre-commit.ci
- lower the contrast on the un-selected item - add label updates for selected item on screen reader
for more information, see https://pre-commit.ci
|
We use Bootstrap Icons for the icons (I'll update the README in another PR with this info). Icons ideas: |
|
Updated icons: |
There was a problem hiding this comment.
Thanks @dmlb for this featureset! Great usability progress and welcome features with the filter modes and dark mode toggle.
Still some work to be done with refactoring (namely reducing duplication in filter handlers), but this is a huge step in the right direction. Further refactoring can be done in other PRs.
A couple minor points to address before shipping.
|
Any opinions on using TypeScript enums for categorical options in the codebase rather than strings? No need to push any changes re. them (the types |
VeckoTheGecko
changed the title
|
I think that all good now. Let me know if we're good to merge @dmlb and we'll get this shipped |
good to go 👍 |
Describe your changes
Related issue number/link
Dark mode button: #282 (comment)
Refactoring: Contributes to #299 (previously #209)
Filter mode: Fixes #141