Advanced Settings: Getting Started with Theme Variables - Vanilla Success
<main> <article class="userContent"> <p>The <strong>Advanced Settings </strong>section of the Theme Editor brings a JSON variable editor and inline documentation for hundreds of variables that are not currently included in the Theme Editor user interface. </p><p><strong>📝 NOTE</strong>: Using theme variables requires an understanding of basic CSS and JSON formatting. </p><p><strong>✔️ TIP</strong>: Refer to the article below to view all of the available theme variables: </p><div class="js-embed embedResponsive" data-embedjson="{"body":"This document contains a reference to the various documented theming variables for use in the Theme Editor \"Advanced Settings\" variable pane.","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/370-theme-variable-reference","embedType":"link","name":"Theme Variable Reference - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/370-theme-variable-reference </a> </div><h2 data-id="the-advanced-settings-panel">The Advanced Settings panel</h2><p>While editing a theme, click <strong>Advanced Settings</strong> in the right panel to display the variables panel. </p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/F2QV0OTI8QND/advncdsettings-button.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/F2QV0OTI8QND/advncdsettings-button.png" alt="AdvncdSettings button.png" height="451" width="393" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p>The content in this panel will depend on the settings you've already changed in what we'll call the "visual editor," and will automatically be updated in both places whenever a change is made.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/ZXGH8KNXUTWQ/advncdsettings-open.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/ZXGH8KNXUTWQ/advncdsettings-open.png" alt="AdvncdSettings open.png" height="365" width="727" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="preview-theme-variables-changes">Preview Theme Variables changes</h2><p>Changes made in the Advanced Editor will sync back and forth between the visual editor and the Advanced Editor; when adding a theme variable in the menu, you should see it immediately in the preview to the left. For example, as I modify the <em>Primary Buttons</em> options on the right, I'll see those changes reflected in the <em>Primary Button</em> on the left.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/M91OH6C70B77/full-editor-view.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/M91OH6C70B77/full-editor-view.png" alt="full_editor_view.png" height="865" width="1372" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="inline-documentation">Inline documentation</h2><p>Inline autocomplete and documentation has been added for the following sets of variables:</p><ul><li>banner</li><li>titleBar</li><li>userContent</li></ul><p>By typing any of these, you should see the full set of documented variables for those components appear inline.</p><h2 data-id="update-theme-variables-using-the-api">Update Theme Variables using the API </h2><p>For some use-cases, it may make sense to have a technical resource update theme components using the API. All theme variables can be updated this way.</p><p>For more information, check out the article below:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"This document is an up-to-date API reference for all of Vanilla's public APIv2 endpoints.","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/202#\/Theme%20Assets\/get_themes__themeID__assets_variables","embedType":"link","name":"API v2 Reference & Endpoints - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/202#/Theme%20Assets/get_themes__themeID__assets_variables" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/202#/Theme%20Assets/get_themes__themeID__assets_variables </a> </div><h2 data-id="use-theme-variables-with-file-based-themes">Use Theme Variables with file-based themes</h2><p>See developer documentation:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"In this section, we’ll be going through the most common theming options for our most common components. This list is not exhaustive, so if you don’t see what you need, you might need to dig yourself. See “How to theme a component” to learn how to do that. Global The most important variables to set are:…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/278","embedType":"link","name":"Common Theme Components - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/278" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/278 </a> </div><h2 data-id="troubleshooting">Troubleshooting</h2><p>If you're getting an invalid JSON message, you may be missing a quote (“) or a comma somewhere.</p><ul><li>Every line except the last must finish in a comma. </li></ul><h2 data-id="missing-variables">Missing variables?</h2><p>Wish a specific theme variable was available? Tell us about it by <a href="https://success.vanillaforums.com/categories/product-ideas" rel="nofollow noreferrer ugc">submitting an idea in the success community</a></p><p> </p> </article> </main>