Theming

While we've worked hard to make Flarum as beautiful as we can, each community will probably want to make some tweaks/modifications to fit their desired style.

Admin Dashboard

The admin dashboard's Appearance page is a great first place to start customizing your forum. Here, you can:

  • Select theme colors
  • Toggle dark mode and a colored header
  • Upload a logo and favicon (icon shown in browser tabs)
  • Add HTML for custom headers and footers
  • Add custom LESS/CSS to change how elements are displayed

CSS Theming

CSS is a style sheet language that tells browsers how to display elements of a webpage. It allows us to modify everything from colors to fonts to element size and positioning to animations. Adding custom CSS can be a great way to modify your Flarum installation to match a theme.

A CSS tutorial is beyond the scope of this documentation, but there are plenty of great online resources to learn the basics of CSS.

Flarum actually uses LESS, which makes it easier to write CSS by allowing for variables, conditionals, and functions.

Extensions

Flarum's flexible extension system allows you to add, remove, or modify practically any part of Flarum. If you want to make substantial theming modifications beyond changing colors/sizes/styles, a custom extension is definitely the way to go. To learn how to make an extension, check out our extension documentation!