How are theme setting fields created?

[Biscuit]

When you import the theme below from Github, “theme settings” appear set under Customize > Theme > Theme_Name.

Custom header links (icons)

This is a theme component that will allow you to add linked icons to the Discourse header easily. Screenshots Desktop [Capture3] Mobile [Capture] This component includes a theme setting that allows you to add as many links as you want, determine their icons, and decide which devices they show up on! [Capture4] The pattern for links is as follows: Title,Icon,URL,View,Target Title is… well…the title you want the link to have. URL is where you want the user to go when they click. Incl…

The Github files include a YML file with the theme settings inside it. The “Import theme” process presumably uses that YML file to make the setting fields appear. But, when I’m writing my own theme (not plugin), how do I create theme settings / parameters like this?

[tshenry (Taylor)]

This should be what you are looking for : How to add settings to your Discourse theme

[Biscuit]

How did I miss that topic!

Looks like it can’t be done via the interface and requires the files to be placed on Github. Never posted on Github before, so will have to give it a try, to test myself.

Thank you.

[tshenry (Taylor)]

No problem

You don’t technically need to do anything on GitHub, the Discourse Theme CLI (console app to help you build themes) is really all you need to get started. It’s an extremely handy tool and easy to set up. I highly recommend giving it a try!

[sarahann (Sarah)]

Does anyone know how one would access variables in the theme settings in Javsscript?

<script type="text/discourse-plugin" version="0.8.13">
    console.log(themeSettings.myvalue); 
</script>

I keep getting “themesettings is not defined” in the dev tools

[tshenry (Taylor)]

You almost had it. It’s actually just settings not themeSettings

[sarahann (Sarah)]

Thank you @tshenry! I also had it in the wrong file.

My code was in /common/header.html instead of /common/head_tag.html

Thank you for your help!