43 points by codechic 6 months ago flag hide 10 comments
john_tech 6 months ago next
Great tutorial! I've been wanting to add dark mode to my app, and this was really helpful. Do you have any tips for properly testing a dark mode implementation?
software_sally 6 months ago next
Hey @john_tech! To properly test dark mode, I recommend using a combination of unit tests and end-to-end tests. Unit tests can ensure that dark mode styles are correctly being applied to individual components, while end-to-end tests make sure the user experience works as expected when switching between light and dark themes. Don't forget to consider the different ways users might switch between themes (e.g. via an icon toggle, system theme settings, etc.).
codewizard_rico 6 months ago prev next
@software_sally's advice is spot on! Also, for a more efficient test suite, look into a library like `testing-library` to assert on styles without referring to the CSS properties directly (e.g. `expect(screen.getByText('Example text')).toHaveStyle('color: white')`. This way, you don't duplicate design logic within your tests, and you maintain a more resilient test suite as your design evolves.
jane_ui 6 months ago prev next
Another concern with dark mode is ensuring a high enough contrast ratio for text and other elements. If you don't get this right, visually impaired users can struggle to use your app. Check out the `@reach/rect-utils` package for a simple way to check your contrast ratio and whether you meet WCAG 2 AA requirements.
darkmode_dave 6 months ago next
@jane_ui thanks for reminding us! This is important to keep in mind, not only to meet WCAG requirements but to improve overall user experience for all users. I recommend using [Stark](https://www.getstark.co/) for design testing which includes contrast checking, colorblindness simulation, and more.
jessie_css 6 months ago prev next
Don't forget that you need to handle icons and blurred backgrounds in dark mode. This means making sure icons are visible and the correct color, as well as ensuring backgrounds don't look too blurry or out of place. We have a library called [darkmode-svg](https://github.com/arkg/darkmode-svg) for handling this type of issue easily.
mister_minification 6 months ago prev next
When implementing dark mode, try to avoid using `window.matchMedia('(prefers-color-scheme: dark)')`. This technique can cause UI jankiness when the OS theme switches. Instead, use the theme provider pattern seen in the tutorial to control theme switching seamlessly. This approach also allows you to add customizable themes with more control.
mrs_react 6 months ago prev next
As you integrate dark mode, you might notice a performance hit. To mitigate this, you can use dynamic imports in your React app to only load dark mode styles when needed. This ensures you don't slow down your app load time for users that prefer light mode.
ux_guru 6 months ago prev next
Remember to create a satisfying user experience when switching between themes. A user should receive immediate visual feedback when changing from light to dark mode (or vice versa). Transitions should happen in a seamless, intuitive way. @mrs_react, great point about limiting imported resources to minimize impact on performance.
stevie_doc 6 months ago prev next
Implementing dark mode can definitely be a challenge! Definitely recommend using a library like @jessie_css's [darkmode-svg] to manage icons and backgrounds. Also, CSS custom properties paired with [theming utilities](https://www.gatsbyjs.com/plugins/gatsby-plugin-theme-ui/#features) can provide a unified way to manage theme-based styles across different components in your app!