# \#theme-guides **URL:** https://meta.discourse.org/tag/theme-guides/820.md [Latest](https://meta.discourse.org/latest.md) · [Categories](https://meta.discourse.org/categories.md) · [Tags](https://meta.discourse.org/tags.md) --- ## [Add settings to your Discourse theme](https://meta.discourse.org/t/add-settings-to-your-discourse-theme/82557)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 6\ **Last updated:** [July 8, 2025, 7:43pm UTC](https://meta.discourse.org/t/add-settings-to-your-discourse-theme/82557 "2025-07-08T19:43:17Z")
Discourse has the ability for themes to have “settings” that can be added by theme developers to allow site owners to customize themes through UI without having to change any line of code and worry about losing their cha… --- ## [Theme Developer Quick Reference Guide](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 2\ **Last updated:** [June 28, 2021, 5:13pm UTC](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448 "2021-06-28T17:13:16Z")
As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under #theme-guides, but if you just need something to jog your memory, this guide may help. General Re… --- ## [Skills for authoring themes and blocks](https://meta.discourse.org/t/skills-for-authoring-themes-and-blocks/401629)
**Author:** [@manuel](https://meta.discourse.org/u/manuel)\ **Replies:** 20\ **Last updated:** [August 31, 2026, 3:54pm UTC](https://meta.discourse.org/t/skills-for-authoring-themes-and-blocks/401629 "2026-08-31T15:54:08Z")
A repository of Claude Code skills for building Discourse themes and block components: https://github.com/discourse/discourse-theme-skills :toolbox: What’s included Theme Authoring Skill — covers a comprehensive scope … --- ## [Objects type for theme setting](https://meta.discourse.org/t/objects-type-for-theme-setting/305009)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 32\ **Last updated:** [April 13, 2026, 1:45am UTC](https://meta.discourse.org/t/objects-type-for-theme-setting/305009 "2026-04-13T01:45:38Z")
We are introducing a new type: objects to the supported types for theme settings which can be used to replace the existing json\_schema type which we intend to deprecate soon. Defining an objects type theme setting To cr… --- ## [Install the Discourse Theme CLI console app to help you build themes](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 16\ **Last updated:** [July 30, 2026, 8:47am UTC](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950 "2026-07-30T08:47:18Z")
The Discourse Theme CLI is a ruby gem that allows you to use your editor of choice when developing Discourse themes and theme components. As you save files the CLI will update the remote theme or component and changes t… --- ## [Create and share a font theme component](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 4\ **Last updated:** [August 19, 2025, 10:34pm UTC](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462 "2025-08-19T22:34:35Z")
Discourse supports importing themes containing assets from a remote repository. This allows theme authors to share fonts and images. Create a new git repository with the font mkdir discourse-roboto-theme cd discourse-r… --- ## [Minimizing Maintenance on Theme Customizations](https://meta.discourse.org/t/minimizing-maintenance-on-theme-customizations/261388)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 0\ **Last updated:** [April 11, 2023, 11:58pm UTC](https://meta.discourse.org/t/minimizing-maintenance-on-theme-customizations/261388 "2023-04-11T23:58:36Z")
Discourse is highly customizable, enabling you to modify almost any aspect of its appearance through themes. To maintain compatibility with ongoing Discourse updates and new features, all themes require occasional maint… --- ## [Get started with Theme Creator and the Theme CLI](https://meta.discourse.org/t/get-started-with-theme-creator-and-the-theme-cli/108444)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 8\ **Last updated:** [May 7, 2026, 2:04pm UTC](https://meta.discourse.org/t/get-started-with-theme-creator-and-the-theme-cli/108444 "2026-05-07T14:04:22Z")
This topic will walk you through how to use the Theme CLI with our Theme Creator site to develop a theme and preview your changes on a live Discourse site. Sign up for an account here on Meta if you haven’t already … --- ## [Add localizable strings to themes and theme components](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 22\ **Last updated:** [August 9, 2024, 7:58pm UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867 "2024-08-09T19:58:55Z")
For those looking to add custom languages and translations to a Discourse theme or theme component, they can now include localised strings, which are made available for use in UI components. Translations are stored in th… --- ## [Structure of themes and theme components](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 0\ **Last updated:** [April 12, 2017, 3:41pm UTC](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848 "2017-04-12T15:41:30Z")
Discourse supports native themes that can be sourced from a .tar.gz archive or from a remote git repository including private repositories. An example theme is at: GitHub - discourse/discourse-simple-theme: Sam's sim… --- ## [Alternative icons](https://meta.discourse.org/t/alternative-icons/206693)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 28\ **Last updated:** [April 7, 2026, 4:36pm UTC](https://meta.discourse.org/t/alternative-icons/206693 "2026-04-07T16:36:02Z")
By default, Discourse bundles icons from the excellent FontAwesome library. But there are a lot of free-to-use icon libraries out there. This topic is the home of alternative icon sets. It lists some theme components tha… --- ## [Theme modifiers: A brief introduction](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 19\ **Last updated:** [October 24, 2025, 6:20am UTC](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605 "2025-10-24T06:20:57Z")
As themes become more ambitious, we’ve been looking for ways to allow them to manipulate core server-side behavior. While they will never be given the same level as control as plugins, we can provide some predefined hook… --- ## [Use Discourse Core Variables in your Theme](https://meta.discourse.org/t/use-discourse-core-variables-in-your-theme/77551)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 0\ **Last updated:** [January 9, 2018, 4:55am UTC](https://meta.discourse.org/t/use-discourse-core-variables-in-your-theme/77551 "2018-01-09T04:55:37Z")
Discourse is incredibly customizable! The goal of this topic is to show you how make use of all the amazing options that are available to you as a theme developer. You know… so that you don’t have to reinvent the wheel … --- ## [Replace Discourse's default SVG icons with custom icons in a theme](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 10\ **Last updated:** [February 24, 2026, 9:24pm UTC](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736 "2026-02-24T21:24:39Z")
You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create… --- ## [Update themes and plugins to support automatic dark mode](https://meta.discourse.org/t/update-themes-and-plugins-to-support-automatic-dark-mode/161595)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 10\ **Last updated:** [November 14, 2025, 10:45am UTC](https://meta.discourse.org/t/update-themes-and-plugins-to-support-automatic-dark-mode/161595 "2025-11-14T10:45:01Z")
Previously, all colors in Discourse were stored as SCSS variables. To support automatic dark mode color scheme switching, we have converted these colors in core to custom CSS properties. You can easily see the full list … --- ## [Add a custom header with a dropdown menu](https://meta.discourse.org/t/add-a-custom-header-with-a-dropdown-menu/33451)
**Author:** [@neil](https://meta.discourse.org/u/neil)\ **Replies:** 0\ **Last updated:** [September 18, 2015, 9:23pm UTC](https://meta.discourse.org/t/add-a-custom-header-with-a-dropdown-menu/33451 "2015-09-18T21:23:11Z")
We’ll be implementing a black header with one link that reveals a menu of more links, like this: In Admin \> Customize \> CSS/HTML, create a new customization. Remember that you can have multiple customizations active … --- ## [Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developing-discourse-themes-theme-components/93648)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 14\ **Last updated:** [March 18, 2025, 11:33pm UTC](https://meta.discourse.org/t/developing-discourse-themes-theme-components/93648 "2025-03-18T23:33:05Z")
Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develo… --- ## [Split up theme Javascript into multiple files](https://meta.discourse.org/t/split-up-theme-javascript-into-multiple-files/119369)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 5\ **Last updated:** [February 16, 2025, 2:30am UTC](https://meta.discourse.org/t/split-up-theme-javascript-into-multiple-files/119369 "2025-02-16T02:30:16Z")
Complex theme javascript can be split into multiple files, to keep things nicely organised. To use this functionality, simply add files to the /javascripts folder in your theme directory. These files can not be edited f… --- ## [End-to-end system testing for themes and theme components](https://meta.discourse.org/t/end-to-end-system-testing-for-themes-and-theme-components/281579)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 1\ **Last updated:** [January 2, 2025, 7:33pm UTC](https://meta.discourse.org/t/end-to-end-system-testing-for-themes-and-theme-components/281579 "2025-01-02T19:33:09Z")
Writing automated tests for themes is an important part of the theme development process which can help ensure that the features being introduced by a theme continues to work well overtime with core Discourse features. … --- ## [Include assets (e.g. images, fonts) in themes and components](https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 1\ **Last updated:** [August 23, 2024, 2:04am UTC](https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459 "2024-08-23T02:04:48Z")
Themes and theme components allow you to handle uploaded assets such as images and fonts. You can control what assets your theme accepts using the site setting: theme authorized extensions Including assets in themes and… --- ## [Designer's Guide to getting started with themes in Discourse](https://meta.discourse.org/t/designers-guide-to-getting-started-with-themes-in-discourse/152002)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 9\ **Last updated:** [April 8, 2024, 9:32pm UTC](https://meta.discourse.org/t/designers-guide-to-getting-started-with-themes-in-discourse/152002 "2024-04-08T21:32:15Z")
So you’re interested in in designing your own theme for Discourse? You’ve arrived at the right topic :smile: This guide will be more focused on the SCSS/CSS aspects of working with themes in Discourse. If you are also k… --- ## [Migrate Discourse theme settings](https://meta.discourse.org/t/migrate-discourse-theme-settings/287783)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 0\ **Last updated:** [January 30, 2024, 10:02pm UTC](https://meta.discourse.org/t/migrate-discourse-theme-settings/287783 "2024-01-30T22:02:00Z")
Introduction As of Discourse version 3.2.0.beta3, Discourse themes/components can leverage a migrations feature to evolve and alter their settings seamlessly. This feature ensures that updates to themes do not disrupt ex… --- ## [Redirect an existing route in a theme component](https://meta.discourse.org/t/redirect-an-existing-route-in-a-theme-component/201900)
**Author:** [@JonathanShaw](https://meta.discourse.org/u/JonathanShaw)\ **Replies:** 0\ **Last updated:** [August 27, 2021, 12:33pm UTC](https://meta.discourse.org/t/redirect-an-existing-route-in-a-theme-component/201900 "2021-08-27T12:33:37Z")
To redirect an existing Discourse route in a theme component, you can use api.modifyClass to modify the route class. More information can be found in the Ember documentation on routing redirection. Here’s an example: \ **Author:** [@zcuric](https://meta.discourse.org/u/zcuric)\ **Replies:** 1\ **Last updated:** [April 8, 2020, 10:01am UTC](https://meta.discourse.org/t/use-ember-promiseproxymixin-in-a-theme/147231 "2020-04-08T10:01:08Z") Recently the Ember.PromiseProxyMixin was added to ember modules in the discourse core. https://github.com/discourse/discourse/pull/9312 It’s very useful Ember mixin which allows you to make async requests and to work e… --- ## [Change font sizes in your themes](https://meta.discourse.org/t/change-font-sizes-in-your-themes/120927)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 0\ **Last updated:** [June 20, 2019, 5:42pm UTC](https://meta.discourse.org/t/change-font-sizes-in-your-themes/120927 "2019-06-20T17:42:34Z")
Global font-size changes The simplest way to change the font size of your entire community would be to override the default value on the HTML element in your theme’s CSS, like this: html { font-size: 17px; /\* default … --- ## [Adding metadata and screenshots to a Theme](https://meta.discourse.org/t/adding-metadata-and-screenshots-to-a-theme/119205)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 0\ **Last updated:** [May 31, 2019, 3:34pm UTC](https://meta.discourse.org/t/adding-metadata-and-screenshots-to-a-theme/119205 "2019-05-31T15:34:25Z")
You can add various pieces of metadata to a theme. Some are stored in the about.json file, and some are stored in the locale files. about.json :link: file format info name (string, required): The default name for the th… --- ## [Install a new language for Highlight.JS via a theme component](https://meta.discourse.org/t/install-a-new-language-for-highlight-js-via-a-theme-component/292480)
**Author:** [@Discourse](https://meta.discourse.org/u/Discourse)\ **Replies:** 0\ **Last updated:** [January 3, 2019, 4:47pm UTC](https://meta.discourse.org/t/install-a-new-language-for-highlight-js-via-a-theme-component/292480 "2019-01-03T16:47:47Z")
I’ve just added a hook to our HighlightJS code so now you can use the plugin API to add a custom language for Highlight.JS. Example (using the beancount language definition): const beancountLang = function(e){var c="\[A…