How do I install a Theme or Theme Component?

Importing new themes and theme components

To import new themes and components, visit

www.yoursite.com/admin/customize/themes

or via the UI head to Admin > Customize > Themes

Then click on Install here

you’ll see this

You can install popular Discourse theme components from the Popular tab, or import via your device or a repository link by clicking on the respective tabs.

The repository link for each theme is provided by the author on the theme topic. There are also options to import from a specific branch and to specify whether the repository is private.

If you import a theme component, you need to also add it to your actives themes. This is covered in detail in the next section.

Add theme components to a theme

Let’s say you like the Discourse category banners theme component and want to use it. You would proceed as follows

  1. import the theme from the repository like we discussed above
  2. add it as a theme component to your active / user-selectable themes

You can add the component your theme(s) using the “Include component on these themes” setting:

You can also add components from a theme’s overview using the “Included components” setting:

Checking for updates

Sometimes the themes or components you install will have updates.

If a theme or component has updates, an icon will display next to its name like so

If you select that theme or component you can update it with one click by clicking on the update button here:

Programmatically installing themes

If you want to install themes in your app.yml you can use the following format:

run:
  - exec: echo "Beginning of custom commands"

  - file:
      path: /tmp/mythemes.yml
      contents: |
        discourse-gifs:
          url: https://github.com/discourse/discourse-gifs.git
          add_to_all_themes: true

  - exec:
      cd: $home
      cmd: su discourse -c 'bundle exec rake themes:install < /tmp/mythemes.yml'

  - exec: echo "End of custom commands"

This should cover everything you need to install a theme or theme component. If you'd like to learn more about the Discourse theme system, we have a more detailed guide that should provide you with a general overview with more details.
60 Likes
Discourse Category Banners
Material Design Stock Theme
Moonclaw Theme port
Hamburger Theme Selector
Sam's personal "minimal" topic list design
Add /users to top nav
Discourse Vincent theme
Custom hamburger menu links
Tiles Image Gallery
Header submenus
Slick Image Gallery
Night Mode Buttons
Emoji mention theme component
Fakebook, a theme for social media lovers
Big Header - Little Header
TavoWEB theme for Discourse
Atlas, a simple blog-styled theme with an optional sidebar
Add /groups to top nav
Scrollable post content
Two nature-inspired color schemes
Discourse Tab Bar for Mobile
Having issues installing plugins
Google Fonts theme component
Topic Stopwatch
How to add links on home page menu to other site?
Topic List Excerpts Theme Component
Topic List Thumbnails Theme Component
Ghost, a cyberpunk theme for Discourse
Add Likes column
Discourse/discourse-segment-io-plugin installation
Jitsi video conference component
Whereby video meetings component
Unformatted Code Detector theme component
Peacock, a noble theme for Discourse :peacock:
StackBlur backgrounds
Thin header component
Discourse Button Styles
Elementary, a simple theme for Discourse
Add <abbr> tags to words in posts
Optional mobile title switch component
Homepage Feature Component
Is anyone working on a Discourse Wiki?
Trust-Level Avatar Flair
Topic list sidebar navigation
Unanswered Filter
Minimal, “classic” topic list design
Discourse Tag Banners
User Card Directory
Add Category Column
Script to enable Matomo analytics on Discourse
🌺 Hibiscus - Springtime Discourse theme
Alternative Voting Category Style
Category badge adjustment component
Daemonite Material Theme: Ample layout adjustments
Experiment on Meta: horizontal loading slider
Default Composer Category component
Raw post button
Intercom widget
Can't add new class to topic page elements using jQuery?
Font size for code inserts in posts
Custom source code formatting component
Alien Night Theme - A free Dark Theme for Discourse
Media Overlay component
"Last Seen" User Card
Minima, a minimal theme for Discourse
Omit Emoji component
Theme Switcher Component
HubSpot chat integration
Dark Mode Automatic Theme Switcher
Live Topic Timer
Segment Tracking Theme Component
Custom Header Links
Place for total coding beginners to learn how to customise?
Highlight text Theme Component
Discourse Category Headers theme component
Categories Layout Override
Rainbow, a colorful theme for Discourse :rainbow:
Add category links Theme Component
Insert Video component
Warn admins/tl4 when replying to closed topics
[Deprecated] Copy Codeblocks Theme Component
Category Highlighter
Topic Template Placeholder Text theme component
Bugs theme-component
Discourse Units - Convert durations, lengths and masses
D3 Graphviz Theme Component
Star Wars theme
Toggle Whisper :eye:
Essential, a simple theme for Discourse :art:
Radiant, an elegant theme for Discourse
Category Hider Theme Component
Modest, a minimal theme for Discourse
Geometric, a dark theme for Discourse
Component 2. A UI-Light Theme for Discourse
Cannot install plugin - nothing happens
Topic Count in Category Boxes Theme Component
Theme component to use "Category icons" in "Events plugin" calendar
Enhanced category-box display component
Yotsaba B Theme
Expanded Create Topic Component
Inline pdf previews
[Deprecated] Submit from Preview (Mobile)
Insert Link to External Website
Custom header links (icons)
How do I integrate ? cookiebot.com in meinen Forum?
Alternative logos per theme
Fire & Ice, a theme for Discourse :fire: :ice_cube:
Discourse-user-field-prompt
Custom header colour and category icons and login button
Social Share Component
Category icons component
Hide Likes For New Users
How to remove the number of months in the category section
How is this new topic button achieved?
Dark Blue theme
Masonry Image Gallery
Adding a theme component to a multisite installation?
Video Upload to YouTube and Vimeo using Theme Component
Baidu Search component
Discourse Dice Roller
Show original poster avatars on mobile
Zeronoise. A theme aiming to create a pleasant reading experience
Discourse-Compact-Nav Component
🎀 Neomorphism, a modern theme for Discourse
:snowman_with_snow: Olaf, a Frozen inspired theme for Discourse
Warning banner for old Android devices affected by Let's Encrypt changes
"Open external links in a new tab by default" not working
Upgrade Docker Failed
Popsicle, a cool theme for Discourse :dango:
Showcased Categories Theme Component
How can I add a menu item
:santa: Santa, a Christmas theme for Discourse
Christmas Decoration Component :christmas_tree:
Dark Admin Editor
Kanban Board Theme Component
Solarized, a dark theme for Discourse
Discourse Docs Card Filter Component
Clickable Social Icon Links on Profile
Fireworks Component :fireworks:
Grogu, a theme inspired by "The Mandalorian"
Custom Loading Spinner Component
Mario inspired theme for Discourse
Featured Tiles Theme Component
Left side hamburger menu on mobile
MD Composer extras
Yotsaba A Theme
Christmas hats component
Mobile Category List Adjustments
Scroll to Top Component
How to get Solidity syntax highlighting
Topic List Thumbnails Theme Component
Self Service Badges?
Change the Like icon to :+1:
Sunflower, A discourse theme
Require Edit Reason
Link on Top header to Go to Home page of main site
Discourse Vincent theme
Discourse optional Apple iOS hardware Keyboard support
Timeline mute button
Christmas hats component
Altering default buttons in topic
A graceful theme for Discourse
Failing to rebuild app on Discourse since May 7
Iframe Lightboxes
Custom Category Boxes Component
Post Badges component
Discourse Topic Author
Avatar size and shape
Custom header links (icons)
(+ New topic) button on all pages
Dracula a Dark Theme for Discourse
Discourse Topic Status Filter
Discourse Vincent theme
Isabelle, an Animal Crossing inspired theme

Can themes and theme components be installed on the command line like plugins?
In my use case it would be very handy if i could add a couple lines to my container app.yml that automatically installed or updated themes and components as part of the rebuild.

2 Likes

Yes, we have this rake task:

https://github.com/discourse/discourse/blob/b5705348b32fff406d8e7e3463def65eaf635206/lib/tasks/themes.rake#L5-L17

So you would use it to install. Its a bit fiddly you first would place a trivial yaml file on the file system and then run the rake task.

10 Likes

This is awesome! Thanks :-0