Customizing Global Theme Styles - HL Vanilla Community
<main> <article class="userContent"> <p>In the theme editor there is a WYSIWYG editor for these variables. For file based themes you can set the values of the variables in your <code class="code codeInline" spellcheck="false" tabindex="0">assets/variables.neon</code> file.</p><h3 data-id="basic-customizations">Basic Customizations</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">global.mainColors.bg</code> : The background color of your site.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">global.mainColors.fg</code> : The foreground (text) color of your site.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">global.mainColors.primary</code> : The primary (brand) color of your site. This is the default color for elements like the title bar and links.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">global.links.default</code> : Your link color.</li></ul><p>You can get your theme up and running pretty well with just the basic customizations because many of the other styles are calculated from them. If you want to do further customizations then read on.</p><h3 data-id="advanced-customizations">Advanced Customizations</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">global.body.backgroundImage</code> : Give the URL of a background image for the main content of the site.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">global.fonts.families.body</code> : Change the font family of the site. Note that if you are using a custom font then you will have to load it yourself.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">global.meta.text.color</code> : Meta text is small text that gives additional information such as dates. It should be a subtle color. It defaults to 85% of the global foreground color.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">global.links.state</code>: Your link hover/active color if you want a specific color for these states.</li></ul> </article> </main>