Building your own color scheme

The pre-prepared CSS rules provide several stylish options for laying out your page colors, but if you'd prefer to dive-in and do it yourself it's very easy to customize your pages with your own color scheme.

The first thing we'll need is the CSS layout which we can modify; you could manually type this in but it far easier to just grab whichever color scheme you want to use as a base from the presets available below. For this example, we'll use the Light colour preset.

Creating Your Colour Scheme

To create your own colour scheme, follow these steps:

  1. Open the CSS Tool in the Publii app, which you can find in the Tools section. Copy your chosen base colour scheme code and paste it into the tool.
  2. Change the data-theme setting in the first line of the code to 'custom' i.e. instead of:

    html[data-theme='light']

    It should instead say:

    html[data-theme='custom']
  3. If you only want to change the colours for the elements, you can modify the colour codes in the first group of variables at the beginning of the code. Change the colour codes as needed, then save changes; your new colours will be visible when you preview a page.
  4. More advanced users can change the colours of specific elements by modifying the var values in the second group of variables that correspond to the element you want to change e.g. to change the text colour from the primary colour value to the secondary colour value, we'd change the text-color-normal: var(--primary-color line to text-color-normal: var(--secondary-color).
html[data-theme='light'] {
--black: #000000;
--gray: #6C6C6F;
--green: #5CB85C;
--light: #E6E7EB;
--lighter: #F7F8FB;
--red: #EF5350;
--yellow: #FFC439;
--white: #FFFFFF;
--primary-color: #101010;
--secondary-color: #C12;
--tertiary-color: #8D8D94;
--quaternary-color: #CCCCCC;
--background: var(--white);
--link-color: var(--secondary-color);
--link-color-hover: var(--primary-color);
--link-invert-color: var(--primary-color);
--link-invert-color-hover: var(--secondary-color);
--border-color-darkest: var(--primary-color);
--border-color-darker: var(--tertiary-color);
--border-color-normal: var(--quaternary-color);
--border-color-lighter: var(--light);
--button-primary-background: var(--primary-color);
--button-primary-border: var(--primary-color);
--button-primary-color: var(--white);
--input-background: var(--white);
--input-border-color: var(--quaternary-color);
--input-border-color-focus: var(--primary-color);
--input-text-color: var(--gray);
--code-inline-background: var(--secondary-color);
--headings-color: var(--primary-color);
--text-color-normal: var(--primary-color);
--text-color-lighter: var(--gray);
--text-color-lightest: var(--tertiary-color);
--logo-color: var(--primary-color);
--menu-link-color: var(--primary-color);
--menu-link-color-hover: var(--secondary-color);
--dropdown-menu-bg: var(--primary-color);
--dropdown-menu-link-color: var(--quaternary-color);
--dropdown-menu-link-color-hover: var(--white);
--dropdown-menu-link-background-hover: rgba(255, 255, 255, .15);
--icon-color: var(--primary-color);
--icon-color-hover: var(--secondary-color);
--icon-alternative-color: var(--primary-color);
--icon-alternative-color-hover: var(--secondary-color);
--contrast-section-bg: #F4F1E5;
--contrast-section-border-color: var(--tertiary-color);
--contrast-section-text-color: var(--text-color-lighter);
--contrast-section-link-color: var(--primary-color);
--contrast-section-link-color-hover: var(--secondary-color);
--image-overlay-hover: var(--secondary-color);
--highlight-message: var(--quaternary-color);
--info-message: #71B8ED;
--success-message: #5BC68A;
--warning-message: var(--secondary-color);
}
 html[data-theme='dark'] {
--black: #000000;
--gray: #444444;
--green: #5CB85C;
--light: #333333;
--lighter: #191919;
--red: #EF5350;
--yellow: #FFC439;
--white: #FFFFFF;
--primary-color: #101010;
--secondary-color: #DF6F27;
--tertiary-color: #8D8D94;
--quaternary-color: #999999;
--background: var(--primary-color);
--link-color: var(--white);
--link-color-hover: var(--quaternary-color);
--link-invert-color: var(--white);
--link-invert-color-hover: var(--quaternary-color);
--border-color-darkest: var(--primary-color);
--border-color-darker: var(--tertiary-color);
--border-color-normal: var(--gray);
--border-color-lighter: var(--light);
--button-primary-background: var(--white);
--button-primary-border: var(--white);
--button-primary-color: var(--primary-color);
--input-background: var(--primary-color);
--input-border-color: var(--gray);
--input-border-color-focus: var(--secondary-color);
--input-text-color: var(--tertiary-color);
--code-inline-background: var(--secondary-color);
--headings-color: var(--white);
--text-color-normal: var(--quaternary-color);
--text-color-lighter: var(--quaternary-color);
--text-color-lightest: var(--tertiary-color);
--logo-color: var(--white);
--menu-link-color: var(--white);
--menu-link-color-hover: var(--secondary-color);
--dropdown-menu-bg: var(--lighter);
--dropdown-menu-link-color: var(--quaternary-color);
--dropdown-menu-link-color-hover: var(--white);
--dropdown-menu-link-background-hover: rgba(255, 255, 255, .1);
--icon-color: var(--quaternary-color);
--icon-color-hover: var(--secondary-color);
--icon-alternative-color: var(--quaternary-color);
--icon-alternative-color-hover: var(--secondary-color);
--contrast-section-bg: var(--lighter);
--contrast-section-border-color: rgba(255, 255, 255, .3);
--contrast-section-text-color: var(--quaternary-color);
--contrast-section-link-color: var(--white);
--contrast-section-link-color-hover: var(--quaternary-color);
--image-overlay-hover: var(--secondary-color);
--highlight-message: var(--quaternary-color);
--info-message: #71B8ED;
--success-message: #5BC68A;
--warning-message: var(--secondary-color);
}
html[data-theme='blue'] {
--black: #000000;
--gray: #4C5A8C;
--green: #5CB85C;
--light: #4C5A8C;
--lighter: #3F4C7C;
--red: #EF5350;
--yellow: #FFC439;
--white: #FFFFFF;
--primary-color: #FFFFFF;
--secondary-color: #F76C6C;
--tertiary-color: #24305E;
--quaternary-color: #f8E9A1;
--background: var(--tertiary-color);
--link-color: var(--quaternary-color);
--link-color-hover: var(--quaternary-color);
--link-invert-color: var(--primary-color);
--link-invert-color-hover: var(--quaternary-color);
--border-color-darkest: var(--primary-color);
--border-color-darker: rgba(255, 255, 255, .2);
--border-color-normal: rgba(255, 255, 255, .3);
--border-color-lighter: var(--light);
--button-primary-background: var(--secondary-color);
--button-primary-border: var(--secondary-color);
--button-primary-color: var(--primary-color);
--input-background: var(--tertiary-color);
--input-border-color: var(--gray);
--input-border-color-focus: var(--secondary-color);
--input-text-color: var(--primary-color);
--code-inline-background: var(--secondary-color);
--headings-color: var(--primary-color);
--text-color-normal: var(--primary-color);
--text-color-lighter: var(--primary-color);
--text-color-lightest: rgba(255, 255, 255, .8);
--logo-color: var(--primary-color);
--menu-link-color: var(--primary-color);
--menu-link-color-hover: var(--secondary-color);
--dropdown-menu-bg: var(--secondary-color);
--dropdown-menu-link-color: var(--white);
--dropdown-menu-link-color-hover: var(--white);
--dropdown-menu-link-background-hover: rgba(255, 255, 255, .1);
--icon-color: var(--secondary-color);
--icon-color-hover: var(--primary-color);
--icon-alternative-color: var(--primary-color);
--icon-alternative-color-hover: var(--quaternary-color);
--contrast-section-bg: var(--secondary-color);
--contrast-section-border-color: rgba(255, 255, 255, .4);
--contrast-section-text-color: rgba(255, 255, 255, .8);
--contrast-section-link-color: var(--primary-color);
--contrast-section-link-color-hover: var(--quaternary-color);
--image-overlay-hover: var(--secondary-color);
--highlight-message: var(--quaternary-color);
--info-message: #71B8ED;
--success-message: #5BC68A;
--warning-message: var(--secondary-color);
}
html[data-theme='brown'] {
--black: #000000;
--gray: #403d34;
--green: #5CB85C;
--light: #CDCCC5;
--lighter: #ebeae4;
--red: #EF5350;
--yellow: #FFC439;
--white: #FFFFFF;
--primary-color: #403d34;
--secondary-color: #dd7346;
--tertiary-color: #97908F;
--quaternary-color: #fcfbf7;
--background: var(--quaternary-color);
--link-color: var(--secondary-color);
--link-color-hover: var(--primary-color);
--link-invert-color: var(--primary-color);
--link-invert-color-hover: var(--secondary-color);
--border-color-darkest: var(--primary-color);
--border-color-darker: var(--tertiary-color);
--border-color-normal: var(--light);
--border-color-lighter: var(--lighter);
--button-primary-background: var(--secondary-color);
--button-primary-border: var(--secondary-color);
--button-primary-color: var(--white);
--input-background: var(--quaternary-color);
--input-border-color: var(--light);
--input-border-color-focus: var(--secondary-color);
--input-text-color: var(--gray);
--code-inline-background: var(--secondary-color);
--headings-color: var(--primary-color);
--text-color-normal: var(--primary-color);
--text-color-lighter: var(--gray);
--text-color-lightest: var(--tertiary-color);
--logo-color: var(--primary-color);
--menu-link-color: var(--primary-color);
--menu-link-color-hover: var(--secondary-color);
--dropdown-menu-bg: var(--secondary-color);
--dropdown-menu-link-color: var(--quaternary-color);
--dropdown-menu-link-color-hover: var(--white);
--dropdown-menu-link-background-hover: rgba(255, 255, 255, .15);
--icon-color: var(--secondary-color);
--icon-color-hover: var(--tertiary-color);
--icon-alternative-color: var(--quaternary-color);
--icon-alternative-color-hover: var(--primary-color);
--contrast-section-bg: var(--tertiary-color);
--contrast-section-border-color: rgba(255, 255, 255, 0.25);
--contrast-section-text-color: var(--lighter);
--contrast-section-link-color: var(--white);
--contrast-section-link-color-hover: var(--lighter);
--image-overlay-hover: var(--secondary-color);
--highlight-message: var(--tertiary-color);
--info-message: #71B8ED;
--success-message: #5BC68A;
--warning-message: var(--secondary-color);
}
 html[data-theme='yellow'] {
--black: #000000;
--gray: #615B56;
--green: #5CB85C;
--light: #ECECEC;
--lighter: #F6F6F4;
--red: #EF5350;
--yellow: #FDDF22;
--white: #FFFFFF;
--primary-color: #241C15;
--secondary-color: #1F4B52;
--tertiary-color: #241C15;
--quaternary-color: #CCCCCC;
--background: var(--white);
--link-color: var(--primary-color);
--link-color-hover: var(--secondary-color);
--link-invert-color: var(--primary-color);
--link-invert-color-hover: var(--secondary-color);
--border-color-darkest: var(--primary-color);
--border-color-darker: var(--tertiary-color);
--border-color-normal: var(--quaternary-color);
--border-color-lighter: var(--light);
--button-primary-background: var(--secondary-color);
--button-primary-border: var(--secondary-color);
--button-primary-color: var(--white);
--input-background: var(--white);
--input-border-color: var(--quaternary-color);
--input-border-color-focus: var(--primary-color);
--input-text-color: var(--gray);
--code-inline-background: var(--secondary-color);
--headings-color: var(--primary-color);
--text-color-normal: var(--primary-color);
--text-color-lighter: var(--gray);
--text-color-lightest: var(--tertiary-color);
--logo-color: var(--primary-color);
--menu-link-color: var(--primary-color);
--menu-link-color-hover: var(--secondary-color);
--dropdown-menu-bg: var(--primary-color);
--dropdown-menu-link-color: var(--quaternary-color);
--dropdown-menu-link-color-hover: var(--white);
--dropdown-menu-link-background-hover: rgba(255, 255, 255, .1);
--icon-color: var(--primary-color);
--icon-color-hover: var(--secondary-color);
--icon-alternative-color: var(--primary-color);
--icon-alternative-color-hover: var(--secondary-color);
--contrast-section-bg: var(--yellow);
--contrast-section-border-color: var(--gray);
--contrast-section-text-color: var(--gray);
--contrast-section-link-color: var(--primary-color);
--contrast-section-link-color-hover: var(--secondary-color);
--image-overlay-hover: var(--secondary-color);
--highlight-message: var(--quaternary-color);
--info-message: #71B8ED;
--success-message: #5BC68A;
--warning-message: #FD6022;
}
html[data-theme='gray'] {
--black: #000000;
--gray: #7e7d7b;
--green: #5CB85C;
--light: #E2E0DD;
--lighter: #F3F2F0;
--red: #EF5350;
--yellow: #FFC439;
--white: #FFFFFF;
--primary-color: #555555;
--secondary-color: #DD3333;
--tertiary-color: #7e7d7b;
--quaternary-color: #CCCCCC;
--background: var(--white);
--link-color: var(--secondary-color);
--link-color-hover: var(--primary-color);
--link-invert-color: var(--primary-color);
--link-invert-color-hover: var(--secondary-color);
--border-color-darkest: var(--primary-color);
--border-color-darker: var(--quaternary-color);
--border-color-normal: var(--quaternary-color);
--border-color-lighter: var(--lighter);
--button-primary-background: var(--secondary-color);
--button-primary-border: var(--secondary-color);
--button-primary-color: var(--white);
--input-background: var(--white);
--input-border-color: var(--quaternary-color);
--input-border-color-focus: var(--primary-color);
--input-text-color: var(--gray);
--code-inline-background: var(--secondary-color);
--headings-color: var(--primary-color);
--text-color-normal: var(--primary-color);
--text-color-lighter: var(--gray);
--text-color-lightest: var(--tertiary-color);
--logo-color: var(--primary-color);
--menu-link-color: var(--primary-color);
--menu-link-color-hover: var(--secondary-color);
--dropdown-menu-bg: var(--secondary-color);
--dropdown-menu-link-color: var(--white);
--dropdown-menu-link-color-hover: var(--white);
--dropdown-menu-link-background-hover: rgba(255, 255, 255, .15);
--icon-color: var(--secondary-color);
--icon-color-hover: var(--primary-color);
--icon-alternative-color: var(--primary-color);
--icon-alternative-color-hover: var(--secondary-color);
--contrast-section-bg: var(--lighter);
--contrast-section-border-color: var(--quaternary-color);
--contrast-section-text-color: var(--text-color-lighter);
--contrast-section-link-color: var(--primary-color);
--contrast-section-link-color-hover: var(--secondary-color);
--image-overlay-hover: var(--secondary-color);
--highlight-message: var(--quaternary-color);
--info-message: #71B8ED;
--success-message: #5BC68A;
--warning-message: var(--secondary-color);
}
html[data-theme='biscay'] {
--black: #000000;
--gray: #526677;
--green: #5CB85C;
--light: #526677;
--lighter: #3e5365;
--red: #EF5350;
--yellow: #FFC439;
--white: #FFFFFF;
--primary-color: #FFFFFF;
--secondary-color: #9E5A63;
--tertiary-color: #314455;
--quaternary-color: #D67A7C;
--background: var(--tertiary-color);
--link-color: var(--quaternary-color);
--link-color-hover: var(--quaternary-color);
--link-invert-color: var(--primary-color);
--link-invert-color-hover: var(--quaternary-color);
--border-color-darkest: var(--primary-color);
--border-color-darker: rgba(255, 255, 255, .2);
--border-color-normal: rgba(255, 255, 255, .3);
--border-color-lighter: var(--lighter);
--button-primary-background: var(--secondary-color);
--button-primary-border: var(--secondary-color);
--button-primary-color: var(--primary-color);
--input-background: var(--tertiary-color);
--input-border-color: var(--gray);
--input-border-color-focus: var(--secondary-color);
--input-text-color: var(--primary-color);
--code-inline-background: var(--secondary-color);
--headings-color: var(--primary-color);
--text-color-normal: var(--primary-color);
--text-color-lighter: var(--primary-color);
--text-color-lightest: rgba(255, 255, 255, .8);
--logo-color: var(--primary-color);
--menu-link-color: var(--primary-color);
--menu-link-color-hover: var(--secondary-color);
--dropdown-menu-bg: var(--secondary-color);
--dropdown-menu-link-color: var(--white);
--dropdown-menu-link-color-hover: var(--white);
--dropdown-menu-link-background-hover: rgba(255, 255, 255, .1);
--icon-color: var(--quaternary-color);
--icon-color-hover: var(--primary-color);
--icon-alternative-color: rgba(255, 255, 255, .6);
--icon-alternative-color-hover: var(--primary-color);
--contrast-section-bg: var(--secondary-color);
--contrast-section-border-color: rgba(255, 255, 255, .4);
--contrast-section-text-color: rgba(255, 255, 255, .8);
--contrast-section-link-color: var(--primary-color);
--contrast-section-link-color-hover: rgba(255, 255, 255, .6);
--image-overlay-hover: var(--secondary-color);
--highlight-message: var(--light);
--info-message: #6EA1C6;
--success-message: var(--green);
--warning-message: var(--secondary-color);
}
html[data-theme='dandelion'] {
--black: #000000;
--gray: #9fa3ac;
--green: #5CB85C;
--light: #eac75a;
--lighter: #EFCC5F;
--red: #EF5350;
--yellow: #FEDA6A;
--white: #FFFFFF;
--primary-color: #393f4d;
--secondary-color: #1d1e22;
--tertiary-color: #393f4d;
--quaternary-color: #FEDA6A;
--background: var(--quaternary-color);
--link-color: var(--primary-color);
--link-color-hover: var(--gray);
--link-invert-color: var(--primary-color);
--link-invert-color-hover: var(--secondary-color);
--border-color-darkest: var(--primary-color);
--border-color-darker: var(--tertiary-color);
--border-color-normal: var(--quaternary-color);
--border-color-lighter: var(--light);
--button-primary-background: var(--primary-color);
--button-primary-border: var(--primary-color);
--button-primary-color: var(--white);
--input-background: var(--white);
--input-border-color: var(--light);
--input-border-color-focus: var(--primary-color);
--input-text-color: var(--gray);
--code-inline-background: var(--primary-color);
--headings-color: var(--primary-color);
--text-color-normal: var(--primary-color);
--text-color-lighter: var(--gray);
--text-color-lightest: var(--tertiary-color);
--logo-color: var(--primary-color);
--menu-link-color: var(--primary-color);
--menu-link-color-hover: var(--primary-color);
--dropdown-menu-bg: var(--primary-color);
--dropdown-menu-link-color: var(--quaternary-color);
--dropdown-menu-link-color-hover: var(--quaternary-color);
--dropdown-menu-link-background-hover: rgba(255, 255, 255, .1);
--icon-color: var(--primary-color);
--icon-color-hover: var(--primary-color);
--icon-alternative-color: var(--quaternary-color);
--icon-alternative-color-hover: var(--gray);
--contrast-section-bg: var(--primary-color);
--contrast-section-border-color: var(--gray);
--contrast-section-text-color: var(--gray);
--contrast-section-link-color: var(--quaternary-color);
--contrast-section-link-color-hover: var(--white);
--image-overlay-hover: var(--quaternary-color);
--highlight-message: var(--tertiary-color);
--info-message: #4C93C9;
--success-message: #579371;
--warning-message: #C73535;
}