Allow Custom Background Color Variables For Side Panels Separate from `var(--slate-1`)`

[metaboulie]

Description

While developing custom themes, I found that the current implementation ties background colors of side panels to var(--slate-1), which limits flexibility in customization. To offer greater creative control, I suggest introducing a dedicated set of variables for background colors of side panels, separate from var(--slate-1).

This enhancement would allow users to modify background areas independently without affecting the broader color scheme defined by the slate variables. It would also promote more consistent and tailored design choices across different components or sections.

Suggested solution

---

Alternative

No response

Additional context

No response

[mscolnick]

Thanks for filing this. Yeah, we have many instances where we are using radix colors as CSS variables instead of semantic colors like background, foreground, accent, and muted.

I think you could still override this variable (let me know if you are unable to).

Open to suggestions how we could fix this

1. We could move more colors slate-1 to semantic colors popover-background. But I worry we will end up with too many semantic colors.
2. An option I would prefer that would require more investigation would be to pick 1 or 2 colors and use OKLCH to generate a color scheme. Here are a couple of demos:
   • https://observablehq.com/@clhenrick/sequential-color-palette-generation-using-oklch
   • https://observablehq.com/@clhenrick/exploring-oklch-color
   • we could even create a marimo app that helps creates these schemes and CSS sheets

[ghost]

Yeah, I can't override --slate-1. I've tried the following syntaxes to override it but none of them works

:root {
  --slate-1: #f8fafc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --slate-1: #0f172a;
  }
}

:root {
  --slate-1: light-dark(#7adf9c, #56c6e6); 
}

And some instances, like code editor are colored neither through semantic colors nor radix colors.

I love the idea of creating a marimo app that helps creates these schemes and CSS sheets