Automatically select light/dark mode based off user preference about gatsby-theme-code-notes HOT 8 CLOSED

Hey @timrossback, thanks for raising the issue. This functionality is extremely easy to add since this theme already uses Theme UI for this.

I don't have much time to make this fix so would you be able to tackle it?

from gatsby-theme-code-notes.

I'd be happy to maybe give it a crack @mrmartineau, but I'm really not too familiar with Gatsby or React. I'll see what I can do though.

from gatsby-theme-code-notes.

It should only be a one line change in the index.js file within the gatsby-plugin-theme-ui directory. See here for the docs: https://theme-ui.com/color-modes#initialize-mode-with-prefers-color-scheme-media-query

from gatsby-theme-code-notes.

Yeah, I have absolutely no idea how to do this 😆 Sorry! I was looking through the index.js file, and I just simply don't know enough about how this theme and Theme-UI works hahahaha.

From my abstraction, I think useColorSchemeMediaQuery: true, just needs to be added before the export default colours line or possibly at the very end for maintainability, but since I'm unable to test it locally (good ole' Windows), I really wouldn't feel confident putting forward a PR. Sorry!

Might be one for someone else who is more active with JavaScript, Gatsby and Reach to grab.

from gatsby-theme-code-notes.

Hey @timrossback, that is exactly how I'd do it as well. No worries, I'll see if I can make this change over the next few days.

from gatsby-theme-code-notes.

@timrossback I have done this now and it will ready in the next release.

from gatsby-theme-code-notes.

Great, thank you so much, and I'm so sorry I couldn't be more help!

from gatsby-theme-code-notes.

hey @timrossback, version 1.15.0 has been released with this feature, please update and check it out.

If you're interested to learn how I did it, this commit made the change: 29f80af

from gatsby-theme-code-notes.