css variablespremium

your page does not repeat your accent color in forty places. it reads one named value, --p-accent, everywhere that color is needed: links, buttons, the scrollbar, the glow behind your avatar. that named value is a css variable. change it once and everything using it changes with it.

the color pickers in appearance are writing those variables for you. this panel is the same thing with the lid off: you set the value yourself, so you are not limited to one flat color per slot. that is how you get a see-through card, a gradient accent, or spacing worked out with maths, none of which a color picker can express.

the variables

there are 8 of them, and this is all of them. anything you set here wins over the picker above it.

setting one

1. 1open appearance, extras and find the css variables panel.
2. 2press add variable, then pick the one you want from the dropdown.
3. 3type or paste a value. the line under the row tells you if it will not work, and why.
4. 4save. your page is built with it from the next load.

to undo one, remove the row and save. the picker's own value takes over again, and nothing else about your page is touched.

recipes worth stealing

--p-card     color-mix(in srgb, #141414 55%, transparent)
--p-accent   linear-gradient(135deg, #e5383b, #7a1fa2)
--p-space    0.7
--p-radius   8px
--p-selection  color-mix(in srgb, var(--p-accent) 45%, transparent)

what you can write

• colors in any form css takes: #e5383b, rgb(229 56 59 / 40%), oklch(70% 0.15 25).
• gradients, lengths and plain numbers.
• the functions that build those out of each other: color-mix, calc, clamp, min, max.
• one value per variable, up to 120 characters.
• up to two references to the other variables above, written as var(--p-accent).

anything else is refused when you save, with the reason shown on the row. you cannot break your page by typing the wrong thing here.

what is not allowed, and why

you cannot load anything from somewhere else. url() and every other way of pointing at a file is rejected, because a page that can fetch an image can quietly collect the ip address of everyone who visits it. images belong in the background and banner pickers, which upload the file to us instead.

you also cannot write css rules, only values. nothing typed here can restyle the site around your page, or anyone else's page.

when it looks wrong

• a color picker seems to do nothing: you have set that variable by hand, and it wins. remove the row to get the picker back.
• the card went invisible: --p-card is mixed with transparency to paint the card, so it has to be a color. a gradient leaves nothing to mix.
• the spacing collapsed: --p-space is a multiplier, not a length. 0.7, not 0.7rem.
• everything reverted: these are premium, and the plan is checked every time your page loads. your rows are kept, so they come back when premium does.