Grid/label defaults are unreadable in dark mode

Would you like to work on this feature?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

What problem are you trying to solve?

.ct-label and .ct-grid are hardcoded to a black-based rgba():

.ct-label { fill: rgba(0, 0, 0, .4); color: rgba(0, 0, 0, .4); }
.ct-grid { stroke: rgba(0, 0, 0, .2); }

On a dark background these become nearly invisible. Axis labels and grid lines disappear, leaving just the series lines/points floating with no reference. #1256 raised the same underlying issue and was closed with the suggestion to override these in CSS, which works but means every consumer rendering on a dark background has to rediscover and duplicate the same fix.

Describe the solution you'd like

Add a prefers-color-scheme: dark variant alongside the existing rules, mirroring the same opacity values inverted to white:

@media (prefers-color-scheme: dark) {
  .ct-label {
    fill: rgba(255, 255, 255, .6);
    color: rgba(255, 255, 255, .6);
  }
  .ct-grid {
    stroke: rgba(255, 255, 255, .2);
  }
}

prefers-color-scheme now has solid cross-browser support, so Chartist can ship a sensible dark default out of the box, the same way it already ships a light default.

Describe alternatives you've considered

Overriding .ct-label/.ct-grid in consumer-side CSS, as suggested in #1256. Still valid for anyone wanting a different look, but it's not a substitute for a readable out-of-the-box default.

Documentation, Adoption, Migration Strategy

Additive and backward compatible: it only activates when the OS/browser reports a dark color scheme, doesn't change any existing light-mode output, and doesn't affect consumers who already override .ct-label/.ct-grid themselves (their rules still win by specificity/order). No migration needed. Happy to send a PR for this if it's a welcome direction.