Dark Mode Implementation

[desktopofsamuel]

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]

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)

• https://rude.im/blog/dark-theme-with-stitches-and-next-js
• https://github.com/modulz/stitches-site

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

[sam-b-rose]

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]

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!