Pieter Bruegel the Elder, The Tower of Babel (1563)
Pieter Bruegel the Elder, The Tower of Babel, 1563

CSS: change any color

Themes read their colors from variables. Change the variable once and the whole site follows.

CSS: change any color">
Design, themes & CSS4 steps
Short answer

Themes read their colors from variables. Change the variable once and the whole site follows.

Step by step

  1. 1

    Go to Design & theme → Custom CSS.

  2. 2

    Paste the code below and change the hex colors (#…) to yours.

  3. 3

    --p = main color, --a = accent, --bg = background, --tx = text.

  4. 4

    Save design and refresh your site.

Copy this code

CSS
:root {
  --p: #0F7C86;   /* main color: buttons, links */
  --a: #FF8A73;   /* accent: badges, sale tags */
  --bg: #FFFFFF;  /* page background */
  --tx: #111111;  /* text */
}
/* Only the buttons */
.btn-primary, .t-btn-p { background: #E01E37 !important; color: #fff !important; }

Paste it in Dashboard → Design & theme → Custom CSS, then press “Save design”.

Did this guide help?

Related guides

Change your site colorsChange your site colorsDashboard → Design & theme → Colors: main color, accent, background and text. Save and refresh …Add custom CSSAdd custom CSSDashboard → Design & theme → Custom CSS. Anything you write there is added to every page of you…CSS: header background and heightCSS: header background and heightGive the header a solid color, a blur or more space with a few lines of CSS.