Override SCSS from theme

Hi all,

Just starting with Zola [Version 0.14.1] (and web dev) but experienced coder. I am using the Karzok theme and want to change the colours. It looks like they are defined in karzok/sass/ in scss files. I know that I can directly edit them there, but I want to do it in my directory structure and leave the theme untouched. What is the best way to do this?

Solution:

  1. Add @import "../themes/karzok/sass/main.scss"; to /yoursite/sass/main.scss. Must use relative paths!!!
  2. e.g. to change main theme background colour:
    Add:
html {
    background-color: #0074d9;
}

It wasn’t working for me because, 1) I didn’t realise that I would have to use relative paths, AND, I forgot a semicolon after the import, lol.

1 Like