# Developing Discourse Themes & Theme Components **URL:** https://meta.discourse.org/t/developing-discourse-themes-theme-components/93648 **Category:** Developer Guides **Tags:** reference, tutorial, theme-guides **Created:** [August 1, 2018, 12:00pm UTC](https://meta.discourse.org/t/developing-discourse-themes-theme-components/93648 "2018-08-01T12:00:39Z") **Posts on this page:** 1 **Showing post:** 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: [August 1, 2018, 12:00pm UTC](https://meta.discourse.org/t/developing-discourse-themes-theme-components/93648/1 "2018-08-01T12:00:40Z")
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 develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: > [@Theme Developer Tutorial: 1. Introduction](https://meta.discourse.org/t/theme-developer-tutorial-1-introduction/357796): > > This tutorial will teach you how to create a Discourse Theme or Theme Component from the ground up. While this topic assumes no previous experience working on Discourse themes, it does assume some prior experience using [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML), [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS) and [JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript). It’ll also help if you [know your way around GitHub](https://guides.github.com/activities/hello-world/). What are Discourse themes? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Themes In general, themes are not suppo… ## Themes vs. Theme Components **Discourse Themes** can be used to customize the frontend user experience using CSS and JavaScript. Each theme has its own git repository, and community admins can generally install and manage them via the Discourse admin panel, even on shared hosting platforms. **Theme Components** are themes which are intended for use alongside other Theme Components, as part of an overall Theme. From a development point of view, Theme Components and Themes are almost identical. In these guides, the phrase “Theme” and “Theme Component” are used interchangeably. ## Prerequisites Firstly, make sure you understand [how to use existing themes and theme components](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) in Discourse. Using ready-made themes is the quickest and safest way to customize your community. If you need more, then it’s time to consider writing your own theme. As part of [Discourse’s overall architecture](https://meta.discourse.org/t/349939), Discourse Themes are built using standard HTML, CSS, JavaScript technologies, and make use of Ember concepts for more advanced UIs. These reference guides assume a base-level understanding of these technologies, and link out to external references where possible. Discourse is a fast-moving project, and as such any custom theme will [require maintenance over time](https://meta.discourse.org/t/261388). Make sure you consider this as part of your planning & development processes. ## Getting Started - [Theme CLI](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950) - [Theme Creator](https://meta.discourse.org/t/get-started-with-theme-creator-and-the-theme-cli/108444) - [File structure of theme](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848) ## Frontend Customization - [Color Schemes](https://meta.discourse.org/t/61196) - [JavaScript API](https://meta.discourse.org/t/41281) - [Outlets](https://meta.discourse.org/t/32727) - [Transformers](https://meta.discourse.org/t/349954) - [modifyClass](https://meta.discourse.org/t/262064) ## More! Check out the rest of the [Developer Guides](https://meta.discourse.org/c/documentation/developer-guides/56) ! * * * This document is version controlled - suggest changes [on github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/01-developing-themes.md). --- _[View the full topic](https://meta.discourse.org/t/developing-discourse-themes-theme-components/93648)._