Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark Mode Implementation #1

Closed
desktopofsamuel opened this issue Apr 8, 2021 · 3 comments
Closed

Dark Mode Implementation #1

desktopofsamuel opened this issue Apr 8, 2021 · 3 comments

Comments

@desktopofsamuel
Copy link

I'm trying to use StitchesJS for a new project, however, I have only managed to create a dark theme, there isn't much documentation on applying Dark Mode globally. May I suggest a tutorial on creating Dark Mode with Stitches? or is there any resources that I can refer to?

  • Do I have to create a theme provider by myself if I'm not using any existing theme?
  • How can I link the theme class name with package like use-dark-mode?

I have managed to create a dark theme that uses the same dark-mode class, but I don't know how to proceed afterward.

export const dark = theme('dark-mode', {
  colors: {
    primary: '$red500',
    secondary: '$blue700',
  },
  space: {},
  fonts: {},
});


@peduarte
Copy link
Owner

peduarte commented Apr 8, 2021

May I suggest a tutorial on creating Dark Mode with Stitches

Totally. I've made a note of this.

Meanwhile, you can check out these examples (they're not Gatsby but the concept is the same)

Closing this as it's related to the docs and not to this demo repo 🚀 thanks!

@peduarte peduarte closed this as completed Apr 8, 2021
@sam-b-rose
Copy link

Hey @desktopofsamuel 👋 you may have already found a solution, but thought I'd share my short post on how I handled this scenario!

🔗 Dark theme with Stitches

I added an extra bit of logic in the gatsby-ssr.js to set dark or light mode based on previous user preference or the prefers-color-scheme: dark media query, not a necessary step though!

Main point is, you'll need to add darkTheme.className to your root (document.documentElement) when in dark mode.

Hope this helps!

@desktopofsamuel
Copy link
Author

hey @samrose3 thank you so much for your tutorial! I followed your guide and I have successfully set up my own dark mode using stitches!

➡️ https://juxtdesign.co/

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants