In the theme folder you will find "assets/scss" folder which contains all the theme styles written in SCSS.

To change any style / CSS you need to modify here. In SCSS folder you will find a folder named "components" which contains a bunch of .scss files which are part of the whole theme's style. and all those files are imported in a specific order in "screen.scss" file located in "scss" folder root outside of "components" folder. please don't edit or reorder line of codes that file without understanding. It may break theme styles.

To change the Theme color please follow the steps below.

  • Open the _color-and-font.scss file in your code editor.
  • Now you have to change the color hexcode (#xxxxxx) in this file and save the file.
  • If you have followed the previous Prerequisite for development instruction, and already running terminal with the gulp command then the file changes will be detected and if there is no error in your file then it will be automatically compiled.

The _color-and-font.scss file looks like below.

/*=====================================================
    Font
=====================================================*/
$font-family: 'Lato', sans-serif;
/*=====================================================
    Colors
=====================================================*/
$theme: (
    body-bg: #ffffff,
    theme-color: #4183F2,
    theme-color-lighten-10: #548ff3,
    theme-color-lighten-50: #a0c1f9,
    light-bg-color: #F5F8FC,
    text-color-normal: #505763,
    text-color-dark: #333840,
    text-color-light: #939DAD,
    border-color: #E8E9EB,
    shadow: 0px 5px 25px 0px rgba(0,0,0, 0.1),
    code-bg: #1d2635,
    code-header: #060d18,
    success: #0ca910,
    error: #f0134d,
);

$black: #000;
$white: #fff;

/*** PLEASE DO NOT EDIT BELOW THIS LINE ***/
:root { 
    @each $name, $value in $theme {
        --#{$name}: #{$value};
    }
}
assets/scss/components/_color-and-font.scss

After modifying the theme when you are done and want to install the final theme in your live site, do the following.

  • Go to running terminal ( terminal is navigated to development theme folder and running gulp command to watch the file changes )
  • Press Ctrl + C or Cmd + C in your keyboard to end the running task.
  • After ending running task enter this command, gulp build. This command will build the production ready ( live site ready ) theme package within a folder named "build".
  • After doing the gulp build if you need you can configure the theme options ( such as disqus shortname, social links etc ) then use this command gulp zip. It will make a folder named "dist" and make a zip of the contents of "build" folder within "dist" folder.
gulp build
gulp zip

Now you can upload this newly created zip in your ghost admin panel.