pico.colors helpers to change entire theme

[odama626]

I recently wanted to make success / error buttons and think it would be really useful to switch colors on the fly when using pico.colors.css

something like

.pico-color-red on a component -- and it updates all the css variables to change the theme to that color.

I was messing around with chatgpt and think I got an accurate jade color

.pico-color-jade {
  --pico-primary-background: var(--pico-color-jade-550); /* Jade 550 */
  --pico-primary-hover-background: var(--pico-color-jade-600); /* Jade 600 */
  --pico-primary-hover: var(--pico-color-jade-650); /* Jade 650 */
  --pico-primary-border: var(--pico-color-jade-550); /* Border color matches primary background */
  --pico-primary-hover-border: var(--pico-color-jade-600); /* Border color matches hover background */
  --pico-primary-focus: rgba(0, 166, 110, 0.5); /* Focus color directly */
  --pico-primary-inverse: var(--pico-color-light); /* Light color */
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  :not([data-theme]).pico-color-jade {
    --pico-primary-background: var(--pico-color-jade-550); /* Jade 550 */
    --pico-primary-hover-background: var(--pico-color-jade-500); /* Jade 500 */
    --pico-primary-hover: var(--pico-color-jade-250); /* Jade 250 */
    --pico-primary-border: var(--pico-color-jade-550); /* Border color matches primary background */
    --pico-primary-hover-border: var(--pico-color-jade-500); /* Border color matches hover background */
    --pico-primary-focus: rgba(0, 180, 120, 0.375); /* Focus color directly */
    --pico-primary-inverse: var(--pico-color-light); /* Light color */
  }
}

[data-theme="dark"] .pico-color-jade {
  --pico-primary-background: var(--pico-color-jade-550); /* Jade 550 */
  --pico-primary-hover-background: var(--pico-color-jade-500); /* Jade 500 */
  --pico-primary-hover: var(--pico-color-jade-250); /* Jade 250 */
  --pico-primary-border: var(--pico-color-jade-550); /* Border color matches primary background */
  --pico-primary-hover-border: var(--pico-color-jade-500); /* Border color matches hover background */
  --pico-primary-focus: rgba(0, 180, 120, 0.375); /* Focus color directly */
  --pico-primary-inverse: var(--pico-color-light); /* Light color */
}

[odama626]

I was able to hack something together for this

@use "sass:map";
@use "sass:color";
@use "../node_modules/@picocss/pico/scss/themes/default/theme-colors.scss";
@import "./pico-colors.scss";

$colors: "amber", "blue", "cyan", "fuchsia", "green", "grey", "indigo", "jade", "lime", "orange", "pink", "pumpkin",
  "purple", "red", "sand", "slate", "violet", "yellow", "zinc";

$css-var-prefix: --pico-;

@function getThemeColor($theme-color, $key, $mode: "light") {
  @return map.get(map.get(map.get(theme-colors.$color-mappings, $theme-color), $mode), $key);
}

@mixin light($theme-color) {
  // Primary colors
  #{$css-var-prefix}primary: getThemeColor($theme-color, "primary", "light");
  #{$css-var-prefix}primary-background: getThemeColor($theme-color, "primary-background", "light");
  #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
  #{$css-var-prefix}primary-underline: getThemeColor($theme-color, "primary-underline", "light");
  #{$css-var-prefix}primary-hover: getThemeColor($theme-color, "primary-hover", "light");
  #{$css-var-prefix}primary-hover-background: getThemeColor($theme-color, "primary-hover-background", "light");
  #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
  #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
  #{$css-var-prefix}primary-focus: getThemeColor($theme-color, "primary-focus", "light");
  #{$css-var-prefix}primary-inverse: getThemeColor($theme-color, "primary-inverse", "light");
}

@mixin dark($theme-color) {
  // Primary colors
  #{$css-var-prefix}primary: getThemeColor($theme-color, "primary", "dark");
  #{$css-var-prefix}primary-background: getThemeColor($theme-color, "primary-background", "dark");
  #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
  #{$css-var-prefix}primary-underline: getThemeColor($theme-color, "primary-underline", "dark");
  #{$css-var-prefix}primary-hover: getThemeColor($theme-color, "primary-hover", "dark");
  #{$css-var-prefix}primary-hover-background: getThemeColor($theme-color, "primary-hover-background", "dark");
  #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
  #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
  #{$css-var-prefix}primary-focus: getThemeColor($theme-color, "primary-focus", "dark");
  #{$css-var-prefix}primary-inverse: getThemeColor($theme-color, "primary-inverse", "dark");
}

@function hex-to-rgb($hexColor) {
  @return "#{color.channel($hexColor, "red", $space: rgb)},#{color.channel($hexColor, "green", $space: rgb)},#{color.channel($hexColor, "blue", $space: rgb)}";
  // @return "#{color.red($hexColor)},#{color.green($hexColor)},#{color.blue($hexColor)}";
}

@each $color in $colors {
  .pico-color-theme-#{$color} {
    $values: map.get($base-colors, $color);
    @each $name, $value in $values {
      --pico-primary-#{$name}: #{$value};
      --pico-primary-#{$name}-rgb: #{hex-to-rgb($value)};
    }
  }

  [data-theme="light"],
  :root:not([data-theme="dark"]) .pico-color-theme-#{$color} {
    @include light($color);
  }

  // Dark color scheme (Auto)
  // Automatically enabled if user has Dark mode enabled
  @media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) .pico-color-theme-#{$color} {
      @include dark($color);
    }
  }

  // Dark color scheme (Forced)
  // Enabled if forced with data-theme="dark"
  [data-theme="dark"] .pico-color-theme-#{$color} {
    @include dark($color);
  }
}

[Yohn]

I like where you're going with this, especially for a different success / error color combos, and including al the theme colors in this too, but as you pointed out it primarily works with the buttons, where as I could see it being useful for more than just buttons, but to have the backgrounds on anything able to be that color class selected, and have the borders, and text color within that element all readable.

Heres a Codepen with the generated CSS from of all the color themes block, when I was just testing seeing what was generated.

[odama626]

I just updated the code snippet above, it includes --pico-primary-50 through --pico-primary-900 now and the rgb variants so you can adjust the transparency if you want.

also, it changes the class to .pico-color-theme-[color] since .pico-color-[color] just sets color: to the primary from that palette in pico.colors

for changing the background -- I like that Idea, I am doing something similar manually with the color variables in a couple of places. I was looking at how bootstrap does it -- and they use text-bg-color https://getbootstrap.com/docs/5.3/components/badge/#background-colors

I don't really like that class name but maybe something similar? it could be something like invert but it uses the primary as background instead? then you could mix it with a theme to change it maybe?

so maybe... <div class='pico-color-theme-jade highlight' />?

maybe at that point the form valid vs invalid would just become an alias?

[odama626]

Here, I created a stackblitz with your fork and added the scss in with it

https://stackblitz.com/edit/solidjs-templates-q6gppcc4?file=src%2FApp.tsx