# Theming
```css
.cp-root {
--cp-accent: #e5484d;
--cp-radius-lg: 4px;
--cp-width: 280px;
}
```
Anything you do not set keeps its default. The panel follows the system color
scheme unless you pass `theme`.
## The full set
```css
.cp-root {
--cp-surface: #ffffff;
--cp-surface-raised: #f4f4f6;
--cp-border: #d6d6da;
--cp-text: #1c1c1e;
--cp-text-muted: #6b6b70;
--cp-accent: #2d7ff9;
--cp-focus: #2d7ff9;
--cp-radius-lg: 16px;
--cp-radius: 10px;
--cp-width: 320px;
--cp-disc-size: 196px;
--cp-panel-h: 344px;
--cp-control-height: 32px;
}
```
Two are worth knowing about before you change them.
`--cp-control-height` sizes the tab bar, the text inputs, the eyedropper and the
footer swatch together, so one value scales every control at once.
`--cp-panel-h` is the height set aside for the mode content. It is the same in
every mode, which is what stops the panel resizing when you switch tabs. Content
taller than it scrolls. Set it to `auto` if you would rather each mode sized
itself, and accept that the panel will jump.
## Fitting a container
The panel is a fixed 320px wide and reserves a fixed height for its mode
content. Both are variables, so it can be made to follow whatever box you put it
in — this is what the cards on the home page do.
```tsx
```
`--cp-width: 100%` lets the panel fill its parent. Nothing else has to change:
the wheel is sized `min(100%, var(--cp-disc-size))`, so it scales down with the
panel rather than overflowing.
`--cp-panel-h` is the height set aside for the mode content, and it is the one
worth understanding:
| Value | What happens |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| a length, the default | Every mode is that tall, so switching tabs never resizes the panel. A mode with less content than that shows empty space below it. |
| `auto` | Each mode is as tall as its own content — no empty space, but the panel resizes when you switch tabs. |
Showing a single mode, `auto` is almost always what you want: there is nothing
to switch to, so the reserved height only leaves a gap.
A length only caps the content when the panel has a height to divide up. With
an auto-height panel the content grows past it instead. Give the panel a
`height` as well and the mode content scrolls within it — `.cp-panel-host` is
already `overflow-y: auto`.
```tsx
// Fills its container, and scrolls the palette rather than growing the page.
```
## If the panel looks wrong
The stylesheet lives in `@layer chroma-panel`, so your CSS always wins. That also
means CSS you did not aim at the picker wins. Any unlayered element rule in your
app beats every rule here, however specific:
```css
/* This restyles the picker's swatches and tabs too. */
button {
border-radius: 7px;
}
```
If the geometry looks off, look for a rule like that first. Scope it, or put your
resets in a layer:
```css
@layer reset, chroma-panel, utilities;
```
## Loading the CSS yourself
For a strict `style-src` policy, or to extract critical CSS:
```tsx
import "chroma-panel/styles.css";
;
```
Injection is keyed on `getRootNode()`. The picker works inside a shadow root or
an iframe, and many panels still produce one `