Dark Mode Issue Resolved in Tailwind CSS: A Contributor’s Journey

Problem: While contributing to an open-source project using Tailwind CSS, I encountered an issue with dark mode styles not applying correctly on some items.

Issue: Despite having the correct CSS styles defined, dark mode styles weren’t applied as expected in the project. The scrollbar colors were specified to be different for dark mode, but they continued to behave as they do in light mode.

Scrollbar before the fix

Let’s start by understanding the issue at hand. Imagine you have a CSS style defined as ::-webkit-scrollbar-thumb { @apply rounded bg-neutral-400 dark:bg-neutral-700; }. Here, the dark:bg-neutral-700 part is supposed to apply a specific background color in dark mode. However, despite no apparent errors in the code, this style doesn't work as expected when dark mode is enabled.Here are the codes in index.css file.

@layer utilities {
  ::-webkit-scrollbar {
    @apply h-1 w-1;
  }

  ::-webkit-scrollbar-track {
    @apply bg-neutral-200 dark:bg-neutral-800;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded bg-neutral-400 dark:bg-neutral-700;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-neutral-500 dark:bg-neutral-600;
  }
}

Everything seemed to be in order; while other dark mode styles on the same CSS page worked flawlessly, only the dark mode styles related to the scrollbar weren’t functioning as intended.Also all styles related to scrollbar was working except the dark mode styles. It took me some time to pinpoint the source of the issue.

Contribution and Solution: I researched the issue thoroughly and discovered that the dark mode configuration needed updating due to the Tailwind CSS upgrade in “tailwind.config.js”.

According to the official Tailwind website, The selector strategy replaced the class strategy in Tailwind CSS v3.4.1.

How to initialize dark mode in tailwind.config.js

Open your tailwind.config.js file and locate the darkMode property. By default, it might be set to something like false or an empty array. Update it to [ 'selector', '[data-theme="dark"]' ]. This tells Tailwind CSS to apply dark mode styles when the [data-theme="dark"] attribute is present. But in my project it was configured like this based on class strategy.

Initial Configuration in tailwind.config.js(before upgrade):

module.exports = {
  darkMode: ['class', '[data-theme="dark"]'],
  // Other Tailwind CSS configurations...
}

Configuration After Upgrade in tailwind.config.js:

module.exports = {
  darkMode: ['selector', '[data-theme="dark"]'],
  // Other Tailwind CSS configurations...
}

Testing and Validation

After making this configuration change, I thoroughly tested my application with dark mode enabled. I verified that dark mode styles such as dark:bg-neutral-700 were now being applied correctly on the scrollbar. Using browser developer tools, I inspected elements to ensure that the expected styles were being applied based on the presence of the [data-theme="dark"] attribute.

But, this necessary change, caused another complication which I will tell you about it on my next part 2 article here.

Conclusion

Contributing to open-source projects not only allows you to learn and grow but also gives you the opportunity to solve real-world issues and improve the software for everyone.

This experience taught me the importance of staying updated with framework changes and understanding how configuration updates can impact functionality.

https://medium.com/@hilalsem/overcoming-specificity-challenges-arising-fromtailwinds-dark-mode-strategy-update-a-contributor-s-34ae4d9b3d11

Dark Mode - Tailwind CSS

If you want to play my forked project: https://github.com/elinoza/svgps.app

https://medium.com/@hilalsem/overcoming-specificity-challenges-arising-fromtailwinds-dark-mode-strategy-update-a-contributor-s-34ae4d9b3d11