Building your own color scheme

February 28, 2019

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:

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.
Change the data-theme setting in the first line of the code to 'custom' i.e. instead of:
```
html[data-theme='orange-beige']
```
It should instead say:
```
html[data-theme='custom']
```
Change the colour codes as needed, then save changes; your new colours will be visible when you preview a page.

hhtml[data-theme=orange-beige] {
  --white: #FFFFFF;
  --black: #000000;
  --green: #317E91;
  --dark: #363D4D;
  --gray: #393E46;
  --light: #DED7D3;
  --lighter: #EDE9E6;
  --lightest: #FBF8F6;
  --color: #E2603D;
  --text-color:#212529;
  --headings-color: #363D4D;
  --button-color: #FFFFFF;
  --link-color: #E2603D;
  --link-color-hover: #363D4D;
  --cards-bg: #FFFFFF;
}

html[data-theme=green-beige] {
  --white: #FFFFFF;
  --black: #000000;
  --green: #317E91;
  --dark: #434542;
  --gray: #393e46;
  --light: #dfd5ce;
  --lighter:#e5ded8;
  --lightest: #f2efea;
  --color: #556052;
  --text-color:#60605c;
  --headings-color: #434542;
  --button-color: #FFFFFF;
  --link-color: #af6b58;
  --link-color-hover: #434542;
  --cards-bg: #FFFFFF ;
}

html[data-theme=burgundy-gray] {
  --white: #FFFFFF;
  --black: #000000;
  --green: #317E91;
  --dark: #30475e;
  --gray: #393e46;
  --light: #ddd;
  --lighter: #e8e8e8;
  --lightest: #f7f7f7;
  --color: #c05555;
  --text-color:#363D4D;
  --headings-color: #30475e;
  --button-color: #FFFFFF;
  --link-color: #c05555;
  --link-color-hover: #495464;
  --cards-bg: #FFFFFF;
}

html[data-theme=green-gray] {
  --white: #FFFFFF;
  --black: #000000;
  --green: #317E91;
  --dark: #363D4D;
  --gray: #4a4a4a;
  --light: #d5d5cf;
  --lighter: #e6e6e2;
  --lightest: #f1f1ef;
  --color: #374818;
  --text-color:#4a4a4a;
  --headings-color: #363D4D;
  --button-color: #FFFFFF;
  --link-color: #c19434;
  --link-color-hover: #343435;
  --cards-bg: #FFFFFF;
}

html[data-theme=blue-gray] {
  --white: #FFFFFF;
  --black: #000000;
  --green: #317E91;
  --dark: #43414e;
  --gray: #6e7076;
  --light: #dbdbe7;
  --lighter: #eaeaf1;
  --lightest: #f9f9fb;
  --color: #7579e7;
  --text-color:#6e7076;
  --headings-color: #43414e;
  --button-color: #FFFFFF;
  --link-color: #7579e7;
  --link-color-hover: #43414e;
  --cards-bg: #FFFFFF;
}

html[data-theme=mint-beige] {
  --white: #FFFFFF;
  --black: #000000;
  --green: #317E91;
  --dark: #1d1d2c;
  --gray: #393e46;
  --light: #e4dab4;
  --lighter: #f1ebd7;
  --lightest: #f7f4e9;
  --color: #3cbcc3;
  --text-color:#363D4D;
  --headings-color: #1d1d2c;
  --button-color: #FFFFFF;
  --link-color: #eba63f;
  --link-color-hover: #1d1d2c;
  --cards-bg: #FFFFFF;
}

html[data-theme=orange-gray] {
  --white: #FFFFFF;
  --black: #000000;
  --green: #317E91;
  --dark: #1F3044;
  --gray: #393e46;
  --light: #ddd;
  --lighter: #e8e8e8;
  --lightest: #f7f7f7;
  --color: #646C79;
  --text-color:#363D4D;
  --headings-color: #1F3044;
  --button-color: #FFFFFF;
  --link-color: #FB9039;
  --link-color-hover: #1F3044;
  --cards-bg: #FFFFFF;
}

html[data-theme=brown] {
  --white: #FFFFFF;
  --black: #000000;
  --green: #317E91;
  --dark: #425664;
  --gray: #393e46;
  --light: #d8cfc7;
  --lighter: #ece8e4;
  --lightest: #F6F4F2;
  --color: #C6AD8F;
  --text-color:#363D4D;
  --headings-color: #425664;
  --button-color: #FFFFFF;
  --link-color: #C6AD8F;
  --link-color-hover: #425664;
  --cards-bg: #FFFFFF;
}

html[data-theme=purple] {
  --white: #322f3d;
  --black: #000000;
  --green: #317E91;
  --dark: #f7f2f4;
  --gray: #d2b8c6;
  --light: #87556f;
  --lighter: #87556f;
  --lightest: #59405c;
  --color: #f2a365;
  --text-color: #d2b8c6;
  --headings-color: #f7f2f4;
  --button-color: #322f3d;
  --link-color: #f2a365;
  --link-color-hover:#f7f2f4;
  --cards-bg: #3b3848;
}

html[data-theme=gray] {
  --white: #313131;
  --black: #000000;
  --green: #317E91;
  --dark: #e9e9e9;
  --gray: #bebebe;
  --light: #525252;
  --lighter: #525252;
  --lightest: #414141;
  --color: #ebcbae;
  --text-color: #bebebe;
  --headings-color: #e9e9e9;
  --button-color: #414141;
  --link-color: #ebcbae;
  --link-color-hover:#e9e9e9;
  --cards-bg: #3b3b3b;
}

html[data-theme=graphite] {
  --white: #191a1f;
  --black: #000000;
  --green: #56a900;
  --dark: #e9e9e9;
  --gray: #bebebe;
  --light: #3e3f4c;
  --lighter: #282930;
  --lightest: #202128;
  --color: #505bda;
  --text-color: #9294a4;
  --headings-color: #c5c7cf;
  --button-color: #f1f1f1;
  --link-color: #9795cf;
  --link-color-hover:#c5c7cf;
  --cards-bg: #23252c;
}

html[data-theme=graphite-green] {
  --white: #383c4a;
  --black: #000000;
  --green: #317E91;
  --dark: #f7f2f4;
  --gray: #c9ccd6;
  --light: #687085;
  --lighter: #4b5162;
  --lightest: #404552;
  --color: #78c048;
  --text-color: #c9ccd6;
  --headings-color: #f7f2f4;
  --button-color: #efeff1;
  --link-color: #f0a818;
  --link-color-hover:#f7f2f4;
  --cards-bg: #404555;
}