<scripttype=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Documentation","name":"Advanced Customisation","headline":"Advanced Customisation","description":"Learn how to build Congo manually.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-09T00:00:00\u002b00:00","datePublished":"2020-08-09T00:00:00\u002b00:00","dateModified":"2020-08-09T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/docs\/advanced-customisation\/","wordCount":"472","keywords":["advanced","css","docs"]}</script>
<p>Congo ships with a few colour schemes out of the box. To change the basic colour scheme, you can set the <code>colorScheme</code> theme parameter to one of the default configurations. Valid options are <code>congo</code> (the default), <code>avocado</code>, <code>fire</code> and <code>ocean</code>.</p>
<p>In addition to the default scheme, you can also create your own and restyle the entire website to your liking. Schemes are created by by placing a <code><scheme-name>.css</code> file in the <code>assets/css/schemes/</code> folder. Once the file is created, simply refer to it by name in the theme configuration.</p>
<p>Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as <code>neutral</code>, <code>primary</code> and <code>secondary</code> variants, each containing ten shades of colour.</p>
<p>Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official <ahref=https://tailwindcss.com/docs/customizing-colors#color-palette-reference>Tailwind colour palette reference</a>.</p>
<h2id=overriding-the-stylesheet>Overriding the stylesheet <aclass=heading-anchorhref=#overriding-the-stylesheetaria-label=Anchor>#</a></h2>
<p>Sometimes you need to add a custom style to style your own HTML elements. Congo provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a <code>custom.css</code> file in your project’s <code>assets/css/</code> folder.</p>
<p>The <code>custom.css</code> file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.</p>
<h2id=building-from-source>Building from source <aclass=heading-anchorhref=#building-from-sourcearia-label=Anchor>#</a></h2>
<p>If you’d like to make a major change, you can take advantage of Tailwind CSS’s JIT compiler and rebuild the entire theme CSS from scratch.</p>
</code></pre></div><p>Once installed, you can edit the <code>themes/congo/tailwind.config.js</code> to change the styles that are applied throughout the theme. You can also adjust specific styles in <code>themes/congo/assets/css/main.css</code>.</p>
<p>To allow for easy theme colour changes, Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as <code>neutral</code>, <code>primary</code> and <code>secondary</code> variants, each containing ten shades of colour. In order to change the colour across the entire theme, simply edit the <code>tailwind.config.js</code> file accordingly.</p>
<p>For a full list of colours available, and their corresponding configuration values, see the official <ahref=https://tailwindcss.com/docs/customizing-colors#color-palette-reference>Tailwind docs</a>.</p>
<p>After editing the configuration, you need to rebuild the theme’s stylesheets. This will run the Tailwind JIT compiler in watch mode which aids with testing style changes.</p>
<p>Now whenever you make a change, the CSS files will be rebuilt automatically. This mode is useful to run when using <code>hugo server</code> to preview your site during development. Asset files will be minified by Hugo at site build time.</p>
