Add theme editor to styling guide

[delucis]

What kind of changes does this PR include?

• Changes or translations of Starlight docs site content

Description

• Adds a color theme editor to the CSS & Styling guide.
• Users can provide hue and chroma values for both color palettes — accent and grayscale — and receive code to copy and use in their projects.
• Check out the deploy preview

starlight-color-picker-sm.mp4

N.B. Slightly work in progress — should be merged after #337 and the JS this spits out of course breaks our size limit checks. Will need to look at filtering out these component files from those. But opening early to get feedback and so that people can play with this!

[changeset-bot]

🦋 Changeset detected

Latest commit: 131bfe3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@astrojs/starlight	Minor
@astrojs/starlight-tailwind	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	131bfe3
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/64d4c333c212c70008313ff3
😎 Deploy Preview	https://deploy-preview-470--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[astrobot-houston]

size-limit report 📦

Path	Size
/index.html	9.48 KB (+0.02% 🔺)
/_astro/*.js	15.85 KB (0%)
/_astro/*.css	8.39 KB (-0.07% 🔽)

[HiDeoo]

Mostly cloned the PR, played with it a bit and did not really checked the code that much yet but first, this is amazing 🤩

Super easy to use, does a great job, not super complicated like some other palette editors. Personally I really like it.

Some personal feedback (and I am no UI specialist so take it with a grain of salt):

• The 0.1 step for the hue might be a bit too much. You basically need to use a keyboard to get a specific value without decimals for example. Maybe a 0.5 step would be better? The chroma one is fine tho imo.
• Could the generated code be in <Code theme="css-variables" /> from astro/components to get syntax highlighting? I think it would be a nice touch vs the plain text unique color.
• I think having a "reset" button would be neat (maybe an icon button if it takes too much space?). I know you can just refresh the page but I think it would be nice to have a button to do it.
• A "randomize" button could be nice too, I've seen that in some other palette editors and it's fun to play with I think.
• I wonder if hue/chroma are well known terms/most people will understand how they work vs RGB for example.
• I am not sure it would be super relevant here but I have seen a lot of theme/palette editors having a manually picked set of presets.
• The color-lib seems to contain a lot of hardcoded values (mostly the lightness). I guess edit to the theme won't be that frequent but I guess it could be easy to forget to update them when changing the theme. It may be a bit too heavy to generate them dynamically by reading & parsing the props.css file relatively in the monorepo but maybe at least a comment in this file to remind to double check when changing the theme could be added?

Super impressive work, I am really looking forward to see this merged and used 🎉

[delucis]

Thanks for the helpful comments @HiDeoo!

The 0.1 step for the hue might be a bit too much.

Played with this and decided even just a step of 1 is fine for hue, although agree for chroma — tried reducing the step to 0.01, but especially in lower values that felt too coarse.

Could the generated code be in <Code theme="css-variables" /> from astro/components to get syntax highlighting?

Unfortunately not — the way Shiki (and by extension the <Code /> component) works is to process your code snippet at build time and add all the necessary wrapper elements and inline styles. But because we’re generating the code on the client, we don’t have access to that pipeline.

I think having a "reset" button would be neat.

A "randomize" button could be nice too.

I have seen a lot of theme/palette editors having a manually picked set of presets.

Added all of these kind of! I had tried to add a reset button a few days ago but was never happy with it. Solved it by adding set of presets including one for “Default” as a reset. The preset buttons include one to generate a random theme.

I wonder if hue/chroma are well known terms/most people will understand how they work vs RGB for example.

Perhaps not. In particular “chroma” which is more often known as saturation to a lot of people. I tried at one point to describe this a bit in the intro, but then felt like maybe it’s enough to let people try a slider and learn what it does? I tried it on someone earlier today and they asked “What’s chroma?” (I did not answer in true user-testing style 😁) and then they tried the slider and were like “Oh, OK, I see.”

The color-lib seems to contain a lot of hardcoded values (mostly the lightness).

Yeah! And in fact it wasn’t possible to build an algorithm that can generate our default theme perfectly because the hand-picked shades vary in hue slightly. But I chatted with @doodlemarks and he suggested we actually switch our default theme to the auto-generated default for consistency.

I don’t think I’ll do it in this PR, but we could eventually even have a pipeline to actually auto-generate the default colour variables using the algorithm instead of relying on manually keeping them in sync.

[HiDeoo]

Wow, just played with the new version, it was already awesome, but now it's even better!

Unfortunately not — the way Shiki (and by extension the <Code /> component) works is to process your code snippet at build time and add all the necessary wrapper elements and inline styles. But because we’re generating the code on the client, we don’t have access to that pipeline.

Yeah, that makes sense, this is what you get from me writing comments way too early in the morning 🤣

Added all of these kind of! I had tried to add a reset button a few days ago but was never happy with it. Solved it by adding set of presets including one for “Default” as a reset. The preset buttons include one to generate a random theme.

I think the solution you came up with is great. And these presets are so cool.

Perhaps not. In particular “chroma” which is more often known as saturation to a lot of people. I tried at one point to describe this a bit in the intro, but then felt like maybe it’s enough to let people try a slider and learn what it does? I tried it on someone earlier today and they asked “What’s chroma?” (I did not answer in true user-testing style 😁) and then they tried the slider and were like “Oh, OK, I see.”

Super interesting to hear this test feedback. And yeah, when you see sliders, you just want to play with them, so I think most people will figure it out like that.

Yeah! And in fact it wasn’t possible to build an algorithm that can generate our default theme perfectly because the hand-picked shades vary in hue slightly. But I chatted with @doodlemarks and he suggested we actually switch our default theme to the auto-generated default for consistency.

I don’t think I’ll do it in this PR, but we could eventually even have a pipeline to actually auto-generate the default colour variables using the algorithm instead of relying on manually keeping them in sync.

This makes total sense and yeah, I think it's wise to do this in a separate PR.

Personally, I cannot cannot think of anything else feature and UI wise I would like to see in this editor imo.

[kevinzunigacuellar]

This is wild request but will it be possible to persist the theme across pages? or is this a bad idea 😆

[ElianCodes]

@kevinzunigacuellar, it might be wild indeed, but I did this on one of the previous versions of my site and wasn't actually that hard! I just set the CSS vars using JS on the rootElement.

I think the question here is more; Do we want to do that, since we'll be shipping it, maintaining it, and might in the long run not be "worth it" for users. (although I admit it would be really cool)

[delucis]

This is wild request but will it be possible to persist the theme across pages? or is this a bad idea 😆

Good question @kevinzunigacuellar! As @ElianCodes said, it wouldn’t be technically too difficult to do — save the theme in local storage and then restore it on each navigation. I did briefly consider this while building, but I’m not 100% convinced it’s a good idea. It could be confusing, especially if you got stuck on some weird theme and now need to understand to get back to this page to reset that. Maybe it the widget persisted in a pop-up across pages or something so it’s always available it could make sense? But there’d definitely be a bunch of UX stuff to think about to make it nice.