Pursuit styling / themability; variables & dark mode

#1

I took a peek at around the purescript org and saw that the main styles are built with Less and shared across a couple of projects. If the Less variables were CSS variables (or used in tandem with), it would be trivial to support (prefers-color-scheme: dark) with a nice black background. With Sourcehut, they only support prefers dark via the browser/OS so no cookie, localStorage, etc. state. They use the media query to select new variables. Having variables also makes it easier for users to override theming in userContent.css (I have changed a lot of “dark” themes to black because it looks better on my OLED and I appreciate when it’s easy to override).

Approach 1) ax Less entirely, maintain the same styles selectors, but just use the CSS variables. The set of variables is small enough that I don’t think it warrants separate theme files. The upside would be removing any build step and the lessc dependencies that’s just a comment in the Less file; the downside would be losing IE, Netsurf, et. al. support and the comments in the file come along for the payload ride without a tool to strip them out.

Approach 2) same as approach 1, but use PostCSS and preset-envs stuff to specify desired browser support. Upside would be the ability remove comments and get browser support via magic; massive downside of a more-complex-than-needed dependency.

Approach 3) use Less to generate .foo { color: @blue; color: var(--blue, @blue) }. Upsides would be removing the comments, supporting browsers, not changing anything about the current state of use-lessc-like-the-comment-says; downside of manually covering browser support and still keeping the Less dep.

Other approaches would likely involve changing markup or classnames which seems more prone to getting wrong.

If skipping managing a user preference management, I believe this would be a fairly small-scoped “fix”, but there would be a couple of details to iron out:

  • base font-weight: 400 to font-weight: 500 for the additional contrast?
  • accent colors need a tweak to saturation to mimic the same feel?
  • some SVGs would need a proper media query inside its own styling (although a) there appears to be no SVGs even a PureScript logo, and b) this extends nicely to responsive favicons)

I’m not sure though if there was some redesign with the new registry that was in the pipeline, otherwise, I would donate my time to do this.

5 Likes
#2

Relevant: pursuit moonlight

2 Likes
#3

Yes, for instance something like user style this could an even smaller and easier for powerusers to override. It would likely be just the variables at the top then wash your hands from the rest.

#4

very good and useful
thank you

#5

I did open a pull request although so far, it’s not looking like a winner. Maybe scope will change to make things more themable?

1 Like