SoybeenAdmin is a dashboard template built with Vue 3, Pinia, and TypeScript. With 13.3k stars and 2.3k forks, it is a popular project.
I fixed a bug where the scrollbar color didn't switch to light when dark mode was enabled. The fix for Firefox and Chrome involved updating the CSS property scrollbar-color, but this property doesn’t apply to Safari. Safari doesn't support this property, yet I found several websites that displayed different color scrollbars while dark mode was active.
The solution for Safari is the color-scheme property. This property informs Safari that the element is dark, allowing it to use a light color scrollbar by default.
Although this issue wasn’t difficult, I initially had no idea what was causing it. Chrome, Firefox, and Safari each support different CSS properties, which made it challenging for me to get into frontend development. After checking line by line on MDN, I discovered stylelint. I believe this CSS linter can help alleviate my headaches in the frontend projects I'm involved in.
Top comments (0)