Feature Request: Light theme

[firinael]

Feature Requested A version of the theme using light (white?) background colours.

Relevant Screenshots I'm thinking based on the old Mac aesthetic: A light version of this theme while keeping it as colourful and having the gradients, but with a pure white background and everything else, would be awesome.

Checklist

• [x] The feature would be useful to more users than just me. (→ If it's only relevant to you, have you considered using a CSS Snippet?)

[WillsterJohnson]

Thrown together a mock-up of what this might look like. @firinael is this what you envisioned?

The green and yellow need tweaking to prevent the h3 from looking so muddy, but other than that I'm liking the Apple logo colors

[LEFD]

Your mock-up looks really good! Would you be able to push your dev branch, so I could check it out for myself?

[WillsterJohnson]

sure, heres the branch https://github.com/WillsterJohnson/royal-velvet/tree/light-theme

[LEFD]

Just checked it out. I'm impressed by how good it looks, considering you only changed the color vars. I really like that code blocks etc. are lighter than the background. Would you be willing to iron out the small issues?

[WillsterJohnson]

I'm impressed by how good it looks, considering you only changed the color vars

It's a well designed bit of CSS, totally customisable off the back of just a few vars.

Would you be willing to iron out the small issues?

sure, I think the only problems are the transparent colors and the muddy h3 gradient.

It would make sense to change the names of some of the variables given that they're no longer dark theme specific (eg, --black is white in light theme), so I'll change those to be more light/dark agnostic also. The color names are close enough to keep.

I'd like to know your thoughts on reducing the .theme-dark and .theme-light sections down to just some hue variables and doing the rest in css math. The dark theme would remain visually identical, and the light theme would fall into strict boundaries. My reasoning being is that the entire UI being controlled by a handful of variables would mean that customising this theme via a snippet would be incredibly easy and take up about 10 lines of css.

That reduction aside, I'll get the colors corrected and start hunting bugs tonight.

[LEFD]

It would make sense to change the names of some of the variables given that they're no longer dark theme specific (eg, --black is white in light theme), so I'll change those to be more light/dark agnostic also. The color names are close enough to keep.

go ahead

I'd like to know your thoughts on reducing the .theme-dark and .theme-light sections down to just some hue variables and doing the rest in css math.

Could you provide a quick example?

[WillsterJohnson]

instead of;

.theme-dark {
  --pink: hsl(330, 100%, 75%);
  --pink-100: hsla(330, 100%, 75%, 0.1);
  // all other colors
}
.theme-light {
  --pink: hsl(...);
  --pink-100: hsla(...);
  // all other colors
}
// snippet must overwrite all colors and color variants directly

do;

.theme-dark {
  --global-sat: 100%;
  --global-lit: 75%;
  --pink-hue: 330;
  // other hues only
}
.theme-light {
  // same here
}
body {
  --pink: hsl(var(--pink-hue), var(--global-sat), var(--global-lit);
  // etc
}
// snippet need only modify ~10 values (sat, lit, hues of pink/orange/yellow/green/cyan/purple/red/pink-purple)

The low level control also will make any future style settings customisations easier if they alter color in any way. I'm not tied to it, this is just my preference when working on websites; if things are related, enforce it with a --var

[LEFD]

This makes perfect sense. Just wanted to make sure we are on the same track. I'm not all that familiar with CSS as this theme is basically the only place where I use it.

[WillsterJohnson]

cool, I'll get to work on the following

• [x] reduce theme to hues & sat/lit
• [x] theme agnostic variable naming
• [x] implement light theme w/ new variable layout
• [ ] bug hunt
• [x] a11y considerations for light theme

[LEFD]

30 implemented a light mode. I will keep this issue open for now, for feedback purposes.

[caro401]

43 is related to this, @LEFD or @WillsterJohnson you have more context on the light variant than I do, do you have thoughts about how to resolve?

[LEFD]

@caro401 #43 seems to be related to both light and dark mode, but I'll look into it.