There are multiple ways how to change colors of this theme. Color schemes can be managed under Appearance / Customize / Color Scheme.nn
n
Predefined Color Scheme
nChoose one of predefined color schemes.n
Pick Colors
nHere you can pick link and accent colors and the color scheme will be generated automatically based on those two colors.n
Paste Generated CSS
n
- n
- Open default color scheme .scss file. It should open directly in your browser, but some browsers may download it on your disk instead.
- Copy all the code from that link to any text editor. If your browser downloaded your file, open that file in the text editor. You can use for example Notepad++ for Windows or Brackets for Mac.
- Make your changes. Basically you just need to change color variables at the top of the file. Most prominent is the $accent variable on line 27. By default, it looks like this:n
$accent: #74aa7b; // main accent color
nThere are many online tools where you can generate a hex code for your color, for example colorpicker.com. Just change #74aa7b to hex code of your custom color (don’t forget that it has to start with # sign). Feel free to change values of other color variables in the file as well.
- Copy your changed code and paste it to the left column on sassmeister.com (SCSS). Please note that any typo in your syntax may lead into an error when generating your CSS code. So double check code in your file when there is any issue converting your SASS into CSS.
- Copy generated code from right column (CSS)
- Paste this generated code under Appearance / Customize into Generated CSS field (Color Scheme Source has to be set to Paste Generated CSS for this field to be visible).
n
n
n
n
n
n
n
Load From Child Theme
nFollow the steps as described above (in Paste Generated CSS), but there is a change in the last step. Instead of pasting your code in Customizer, paste it into child theme style.css. You can access this file either via FTP, or directly in admin under Appearance / Editor.