Load the theme, late

[peterbe]

I have @use "node_modules/@picocss/pico/scss/pico"; and it's great.
Suppose I like the "jade" theme, I can use

@use "node_modules/@picocss/pico/scss/pico" with (
    $theme-color: "jade"
);

Also, great.

But what if I want to write a little app that let's the user choose . How do I do that? (not the JS part, the CSS part).

Each client doesn't have SCSS but I was thinking, of using the CSS variables.
From https://picocss.com/docs/css-variables I can for example, take the CSS for Orange and inject it with:

const ORANGE = `
/* Orange color for light color scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme=light],
:root:not([data-theme=dark]) {
  --pico-text-selection-color: rgba(244, 93, 44, 0.25);
  --pico-primary: #bd3c13;
  --pico-primary-background: #d24317;
   ...
`
...
const s = document.createElement("style");
s.textContent = ORANGE;
document.head.appendChild(s);

This works. Things become orange at client-render-time.

But is there a better way?
Is there a way to get to all the color snippets like the orange example?

[vardumper]

I would have added additional color schemes for this on the SCSS side. So, instead of just using only light and dark schemes, you could add a jade (or light-jade and dark-jade if needed) scheme.
Similar to the light (and dark) schemes, which only set css variables, that are applied when the data-theme attribute changes.

So, for example, you could add a _jade.scss

@use "../../helpers/functions";
@use "theme-colors";

@mixin theme {
// Text selection color
#{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "jade");
  
#{$css-var-prefix}primary: theme-colors.get("primary", "jade");
#{$css-var-prefix}primary-background: theme-colors.get("primary-background", "jade");
 
#{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "jade");
#{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "jade");
#{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "jade");
 
#{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "jade");
}

and then in schemes add

[data-theme="jade"],
  :root:not([data-theme="jade"]) {
    @include jade.theme;
}

Untested. Oh I really hope I am not wrong about this. Hehe.

[vardumper]

Nevermind my answer, all of the above was a wild guess. Seems it's not working like this and does in fact require some testing. I'll post an update once I get to that.