With the release of Auden we changed our approach, we are not using Sass for preprocessing CSS. We switched to PostCSS. This brings much more flexibility and makes it so much easier and faster to customize the theme.

With the use of CSS Custom Properties (which can be considered as variables) we have the possibility of changing these properties without the need for regenerating the theme assets.

So let's take a look what can be customized using these custom properties and how. For this we will only use the Ghost Admin panel, for more advanced changes on the theme, please check the documentation.

Changing the colors

A very common requirement. Auden comes with the two main colors used in the theme:

Primary: #e50b4f
Secondary: #f9d400

In order to change them go to your Ghost site's Admin Panel and click on Code Injection. In the Site Header section add the following lines of code (with your colors):

<style>
    body {
       --color-primary: #48c774; /*change the color*/
       --color-secondary: #249cee; /*change the color*/
    }
</style>

Press Save and reload your site. That's it!

Besides the colors you have the possibility to adjust other properties similarly to how it was done for the primary and secondary colors.

List of properties

    --global-max-width: 1280px; // The width of the website
    --global-radius: 5px;  // Radius applied to all elements, such as cards, buttons..
    --color-primary: #e50b4f;
    --color-primary-light: #f4165b; // Primary color lighter version
    --color-primary-dark: #cd0a47; // Primary color darker version
    --color-secondary: #f9d400;
    --color-secondary-light: #ffdc14; // Secondary color lighter version
    --color-secondary-dark: #e0be00; // Secondary color lighter version
    ...
    --color-error: #fc3860;
    --color-success: #48c774;
    --color-warning: #fddd57;
    --color-info: #249cee;
    
    // These are text and background colors using already defined custom properties
    --color-text: var(--color-dark); 
    --color-text-accent-1: var(--color-dark-accent-1);
    --color-text-accent-2: var(--color-grey-darker);
    --color-text-accent-3: var(--color-grey-dark);
    --color-bg: var(--color-white);
    --color-bg-accent-1: var(--color-light);
    --color-bg-accent-2: var(--color-light-accent);
    --color-bg-accent-3: var(--color-grey-lighter);

Changing the Config

Auden comes with the following config settings by default:

  // Basic Config
  let config = {
    /* Replace it with your domain: ghost_host: 'https://yoursite.domain' */
    ghost_url: 'http://localhost:3368', 
    
    /* Settings > Integrations > New Custom Integration. Copy Key. Replace ghost_key below. */
    ghost_key: '55a4116f266aa7f13f51a90d72', 

    /* Default Color Scheme. Values: preference(detects user setting), light, dark. */
    color_scheme_default: 'preference',

    /* Enable Progress Bar for posts */
    enable_progress_bar: true,

    /* Enable lightbox for post images */
    enable_image_lightbox: true,

    /* Enable Scroll Top Button */
    enable_scroll_top: true,

    /* Replace 'biron-demo' with your disqus account shortname */
    disqus_shortname: 'biron-demo'  
  }

To edit this, you can either edit the theme files or you can override these settings from the Ghost Admin Panel. To do this go to your Ghost site's Admin Panel and click on Code Injection. In the Site Header section add the changes you want.

For example, to change the default color scheme (by default is by user preference), add this:

<script>
  config.color_scheme_default = 'dark';
</script>

This will set the dark theme as the default one for everyone.

Further if you want to change some other options, you can do so like this:

<script>
  config.color_scheme_default = 'dark';
  config.enable_scroll_top = false;
  config.disqus_shosrtname = 'mydisqus';
</script>

So you don't have to change any theme files, all of these options can changed using only the Ghost Admin. Those are the main parts of the theme you can easily change using only the Ghost Admin Panel.

For more options advanced customization check out the theme development section in the documentation.

Tags:#ghost theme#ghost development