Customize

Changing the colors

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

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>