search

thombruce / toodles

✅ A super simple todo app
https://toodles.thombruce.com/
GNU General Public License v3.0
0 stars 0 forks source link

add darkMode styles to body #96

Closed thombruce closed 1 year ago

thombruce commented 1 year ago

closes #95

Internal use. Do not delete.

netlify[bot] commented 1 year ago

Deploy Preview for toodles ready!

Name Link
Latest commit b98e12586b2057a93a9a278f1024e35cebcb50e8
Latest deploy log https://app.netlify.com/sites/toodles/deploys/64a05ff73e8884000883695c
Deploy Preview https://deploy-preview-96--toodles.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions[bot] commented 1 year ago

Coverage Summary for `./packages/web`

Status Category Percentage Covered / Total
🟢 Lines 66.72% / 60% 395 / 592
🟢 Statements 66.72% / 60% 395 / 592
🟢 Functions 61.36% / 60% 27 / 44
🟢 Branches 68.85% / 60% 42 / 61
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
packages/web/src/components/ContextTag.vue 20% 100% 0% 20% 4-15
packages/web/src/components/HashTag.vue 20% 100% 0% 20% 4-15
packages/web/src/components/ProgressBar.vue 70.17% 66.66% 100% 70.17% 16-23, 26-34
packages/web/src/components/ProjectTag.vue 20% 100% 0% 20% 4-15
packages/web/src/components/TagTag.vue 71.42% 100% 0% 71.42% 6-7
packages/web/src/components/TodoItem.vue 80.7% 40% 28.57% 80.7% 21, 26-27, 33-40
packages/web/src/components/TodoList.vue 73.68% 100% 100% 73.68% 11-15
packages/web/src/components/TodoPriority.vue 20% 100% 0% 20% 4-15
packages/web/src/components/TodoText.vue 61.7% 57.14% 85.71% 61.7% 15-18, 21-25, 30, 33-36, 39-42
packages/web/src/models/Todo.ts 87.65% 75% 88.88% 87.65% 27-32, 46-47, 63-64
packages/web/src/plugins/dexie.ts 46.29% 100% 66.66% 46.29% 21-22, 25-31, 35-54
packages/web/src/plugins/lunr.ts 78.57% 100% 0% 78.57% 10-12
packages/web/src/plugins/timepiece.ts 71.42% 60% 50% 71.42% 14-19
packages/web/src/stores/todos.ts 72.57% 90% 83.33% 72.57% 21, 25, 29-31, 35-37, 41-43, 47-49, 53-55, 59-61, 65-67, 71-73, 77-79, 83-85, 89-91, 95-97, 103, 107-115
thombruce commented 1 year ago
thombruce commented 1 year ago

darkMode toggle should ideally have three options:

  1. Dark
  2. Light
  3. System

...meaning a toggle switch is sort of out of the question. Best options are dropdown select or radio buttons. I think radio buttons are the preferred way to do this, but they would clutter up the navigation interface. So if we do go that route...

thombruce commented 1 year ago

Last push sorts CSS into more appropriate files by name (tailwind.css for Tailwind imports, base.css for base Toodles styles).

The intention is maybe to have discrete files (e.g. forms.css) for grouped elements, thereby creating reusable styles... These can still be overwritten at the component level.

Rather than applying text-color-500 and dark:text-color-400 to elements like the ContextTag, consider applying both of these styles in a context-color or similarly named class, so that just the one style needs to be applied. Do this in, for example, a tags.css file.

Some colours might be more broadly reusable. For instance, priority colours being essentially red, amber and green; these might be our error, warning and success colours. If so, we should consider options to configure them as a shared sort of utility color. See Using the default colors and Aliasing color names here: https://tailwindcss.com/docs/customizing-colors#using-the-default-colors

If colors have several utilities and are likely to be modified together, consider something like that. But be wary of how forked projects might want to theme things differently. Just because I have priorities success-warning-error coded does not mean that descendant projects will as well. Put some thought into these choices.

thombruce commented 1 year ago

Clear to merge if we want. Though it might be worth squeezing in saving the language setting to localeStorage as it should be similar to how we're storing darkMode setting.

thombruce commented 1 year ago

Done.

All that might be left is to add...

  1. A FontAwesome cog icon attached to the settings link
  2. Miniature versions of the toggleable settings in the nav bar
  3. Graphics indicating the function of "Light", "Dark" and "System"

These are all bonuses at this point though, and I'm happy to leave all three for a future effort.

Ready to merge!