Add dark mode about badge-generator HOT 4 CLOSED

I'd like to work on this one. Can you assign me?

from badge-generator.

For inspiration

• read and set theme https://dev.to/tqbit/create-your-own-dark-mode-toggle-component-with-vue-js-1284
• DarkMode component through vue-a11y https://darkmode.vue-a11y.com/guide/

from badge-generator.

I'll probably use white text for dark mode. And you're right about the codeblock. I've been looking at it and can't find a solution to switch highlight.js theme yet so keeping the light background should be good for now.

from badge-generator.

Sure!

I've not implemented a dark mode before and the screenshots of a mock are not accessible (poor contrast). So you can suggest a solution.

Maybe white text on a dark grey background will work and special attention for links, navbar, and codeblocks. I'd also be happy to keep the codeblocks light as in screenshot, as the work to change the highlight.js theme will be more complicated

And a toggle for dark mode. There was recent work to have a global store in store.ts if you want to persist darkMode=false there.

from badge-generator.