# Theme Developer Quick Reference Guide **URL:** https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448 **Category:** Developer Guides **Tags:** reference, theme-guides **Created:** [March 1, 2019, 4:22pm UTC](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448 "2019-03-01T16:22:45Z") **Posts on this page:** 3 **Page:** 1
### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse) #### Post date: [March 1, 2019, 4:22pm UTC](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448/1 "2019-03-01T16:22:45Z")
As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under [#theme-guides](https://meta.discourse.org/tag/theme-guides), but if you just need something to jog your memory, this guide may help. ### General Resources [📜 Beginner’s guide](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) [📜 Designer’s guide](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002/1) [📜 Developer’s guide](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648) [🖌 Theme Creator](http://theme-creator.discourse.org) [🖥 Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950) [📔 Theme Directory](https://meta.discourse.org/c/customization/theme/61/none) [🧩 Component Directory](https://meta.discourse.org/c/customization/theme-component/120) [🔧 Theme Modifiers](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605) [🔧 Themeable site settings](https://meta.discourse.org/t/-/374376) ### File/Folder Structure [read more](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848) ```plaintext about.json settings.yml common/, desktop/, mobile/ {common|desktop|mobile}.scss head_tag.html header.html after_header.html body_tag.html footer.html embedded.scss (common only) locales/ en.yml ... assets/ (arbitrarily named files, referenced in about.json) stylesheets/ (arbitrarily named files, can be imported from each other, and common/desktop/mobile.scss) javascripts/ (arbitrarily named files. Supports .js, .gjs and .hbs) ``` ### about.json [structure info](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848), [available metadata](https://meta.discourse.org/t/adding-metadata-to-a-theme/119205) ```json { "name": "My Theme", "component": false, "license_url": null, "about_url": null, "authors": null, "theme_version": null, "minimum_discourse_version": null, "maximum_discourse_version": null, "assets": { "variable-name": "assets/my-asset.jpg" }, "color_schemes": { "My Color Scheme": { "primary": "222222" } } } ``` ### SCSS [🔗 Available CSS Variables](https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/color_definitions.scss) ### Javascript [read more](https://meta.discourse.org/t/using-the-pluginapi-in-site-customizations/41281) ```gjs // {theme}/javascripts/api-initializers/init-theme.gjs import { apiInitializer } from "discourse/lib/api"; export default apiInitializer((api) => { // Your code here }); ``` [🔗 JS Plugin API](https://github.com/discourse/discourse/blob/main/frontend/discourse/app/lib/plugin-api.gjs) [🔗 Multi-file Javascript](https://meta.discourse.org/t/splitting-up-theme-javascript-into-multiple-files/119369) ### Settings [read more](https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557) `settings.yml`: ```yaml fruit: default: apples|oranges type: list description: # Old method. It's better to define these in the locale files (see below) en: English Description fr: Description Française ``` Access from JavaScript: ```js console.log(settings.fruit); ``` Access from gjs templates: ```gjs ``` Access from scss: ```scss html { font-size: #{$global-font-size}px; background: $site-background; } ``` ### Themeable site settings [read more](https://meta.discourse.org/t/-/374376) `about.json`: ```json "theme_site_settings": { "enable_welcome_banner": false } ``` Access from JavaScript: ```js @service siteSettings; this.siteSettings.enable_welcome_banner; ``` Access from gjs templates: ```gjs ``` ### Translations [read more](https://meta.discourse.org/t/adding-localizable-strings-to-themes-and-theme-components/109867) `locales/en.yml` ```yaml en: my_translation_key: "I love themes" theme_metadata: # These are used in the admin panel. They are not made available to your js/hbs files description: This theme lets you do amazing things on your Discourse settings: fruit: A description of the whitelisted_fruits setting ``` Access from JavaScript: ```js import { i18n } from "discourse-i18n"; i18n(themePrefix("my_translation_key")); ``` Access from gjs templates: ```gjs import { i18n } from "discourse-i18n"; ``` * * * This document is version controlled - suggest changes [on github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/02-quick-reference.md). ---
### Author: ![pacharanero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pacharanero/32/500583_2.png) [@pacharanero](https://meta.discourse.org/u/pacharanero) #### Post date: [September 13, 2020, 12:57pm UTC](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448/2 "2020-09-13T12:57:22Z")
This is super useful. Could I also suggest that a useful reference to add is the list of available color transformations: > ---
### Author: ![vinyll](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vinyll/32/222495_2.png) [@vinyll](https://meta.discourse.org/u/vinyll) #### Post date: [June 28, 2021, 5:13pm UTC](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448/4 "2021-06-28T17:13:16Z")
I must be missing something here, I’m trying to use `I18n.t(themePrefix("my_translation_key"))` but the Firefox console reports that themePrefix is undefined. How can I invoke that function from an api function?