Theme toggle

[argyleink]

Instead of only relying on the system preference, it'd be nice to offer an extension preference for theme. Use same logic as color syntax, but allow dark/light/auto.

[zeaccs]

Would like to help with this issue too, but it seems it's not possible to overwrite the prefers-color-scheme value by using javascript. 🤔

[argyleink]

Would like to help with this issue too, but it seems it's not possible to overwrite the prefers-color-scheme value by using javascript. 🤔

hi @zeaccs! thanks for expressing interest in contributing 🎉

here's a summary of what needs to happen to get this feature:

1. get the options into the extension dropdown by following what colormode did
2. update the CSS, which is currently what "auto" should do, so that it can be overwritten
3. setup the visbug web component to accept color-scheme="light" attribute which will override auto
4. at this point, you should be able to test the solution by loading the test page at localhost:3000 and then toggling light/dark as the color-scheme attribute
5. tie up visbug's on load logic (extension and web component lifecycle) to check this value and sync it up
6. build the extension locally (DevBug) and test using the context menu in the installed DevBug extension.
7. if visbug's attribute can be set on load on the element or the users choice from the extension context menu, than this is good to go!

it looks like a lot, but i think following what colormode has done will get your 90% of the way. there's a paved path you can piggy back on, since there's a few angles to synchronize and orchestrate.

let me know if you want to chat about this in slack or gitter, i can provide more help as/if you get blocked 👍🏻

[zeaccs]

@argyleink Yes, slack please.

[argyleink]

VisBug on Slack