We can put CSS in our generators that works with the user’s dark mode setting on their device. But it would be great if that was built-in to the default styles. Doesn’t have to be anything fancy, this would do for a start:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #aaa;
  }
}

It seems some of the templates may override such styles and make the body white and such anyway. So maybe that’s something to look into as well.

  • @perchanceMEnglish
    2•3 months ago

    Yeah I have thought about this. I can’t do it by default on existing generators, because generators may have colors specified on elements. So automatic dark mode would, for example, make it so manually-specified black text would be invisible against the black background.

    The other problem is that even if I only enable it on new generators, then many users only test their generators on their specific mode (i.e. only test on light) so they don’t realise that the text colors they’ve chosen look really bad, or invisible in dark mode. So I’d need to have some way to deal with that. Maybe a button in the editor UI that toggles dark/light mode easily.

    If you have ideas/preferences here, please let me know!

    • @wthit56OPEnglish
      2•3 months ago

      Yeah, I see what you mean. For a different angle… if everyone is only using it in light mode currently, dark mode not looking great won’t bother those people anyway.

      And for those that are trying to use perchance in dark mode, they’re not getting a good experience anyway. At least if the site is trying to help them out there’s a chance it’s more usable in dark mode without just sitting there blinded.

      And it could encourage them to give feedback to the creator that the generator looks crap in dark mode… which could result in more creators actually sorting that out.

    • @wthit56OPEnglish
      1•3 months ago

      I just noticed that in the generator I’m working on, which has no styles in its HTML for the page background… it actually does respond to dark mode. Sort of. The background goes dark at least, but the text does not become light.

      Unclear exactly where that’s coming from though. If that part could be improved a little, then it might just be fine as-is. And it could be considered for the commonly used templates to have dark mode improvements made.