V9: How to customize Atomik clone?

Developing with Concrete
1

Having cloned the Atomik theme:

Where should I start revising the theme to my needs? There’s the main scss folder, there’s the presets default folder. There are various variables.scss in both. Which one should I make all my changes in?

2

Trying to change my theme colors. In the _variables.scss I define my color:

$my-body-color: #999999;
$custom-colors: (
    "my-body-color": $my-body-color,
);

body {
    color: $my-body-color;
}

But that has no effect.

In which file of the Atomik theme scss do I change the page font color variable? Or where do I set the overall site page font color? What’s the Atomik scss equivalent of the content.less in the v8 Elemental?

3

Ok, I got it. Not sure it’s the best thing to do, but it works.

  1. Open node_modules/bootstrap/scss/_variables.scss to use as reference for all Bootstrap variables
  2. In application/themes/theme_build/assets/scss/presets/default/_variables.scss assign your own values to the Bootstrap variables or define your own new variables
  3. In application/themes/theme_build/assets/scss/_common.scss below all imports add your styling, e.g.
body {
    h4, h5, h6 {
        font-weight: $font-weight-bold;
    }
    
    h6 {
        text-transform: uppercase;
        font-size: $h6-font-size;
        color: #696969;
    }
    
    a {
        color: $link-color;
        
        &:hover {
            color: darken($link-color, 20%);
        }
    }