Choose a theme and dark mode

A theme sets your community's brand colors, fonts, corner radius, and shadows, separately for light mode and dark mode. Use themes to match your brand's color scheme and to choose whether members see your community in light or dark mode by default.

Who can do this: Owners and admins. Members choose their own light or dark mode. · Where: Web (admin console). Members switch modes on the web and in the Mateflow app. · Plan: Themes and colors aren't limited by plan. Custom CSS depends on your platform plan.

Open the Themes page

Go to Admin → Appearance → Themes. You can also click Manage colors & fonts in Themes → on the Branding page.

• Active Theme shows the theme members see now. It has a Live badge.
• Theme Library lists your other themes. Search them or sort them, for example by Recently Updated.
• The buttons at the top are App Theme, Settings, and Add Theme.

Add a new theme from a preset

1. Click Add Theme.
2. Enter a Theme Name (up to 50 characters).
3. Choose a preset. Use Search presets... or the Category filter to find one. A theme always starts from a preset.
4. To make it live right away, tick Publish immediately.
5. Click Create Theme.

To copy an existing theme instead, open its ⋯ menu, click Clone, enter a New Theme Name, and click Clone Theme. The copy keeps all light and dark colors, typography, spacing, borders, and shadows.

Edit a theme's colors and fonts

Click Customize on the active theme, or open another theme's ⋯ menu and click Edit. The editor opens as Edit Theme: and the theme name.

1. Under Color Mode, choose Light or Dark. Each mode has its own colors, so set both.
2. On the Colors tab, set colors such as Background, Primary, Accent, Card, and Sidebar. Each text color shows its contrast ratio. Click Smart Adjust to fix a color that doesn't meet the WCAG AA contrast level.
3. On the Typography tab, choose the Font Family and Letter Spacing.
4. On the Other tab, set the Border Radius and Shadow. Custom CSS is here too, if your platform plan includes it.
5. Check the Live Preview. Switch between Feed, Post, Profile, and UI, and between Desktop View and Mobile View.
6. Click Save.

Saving the active theme changes what members see. To try changes safely, edit a theme in the library and publish it when it's ready.

Publish a theme

Click Publish on a theme in the Theme Library. It becomes the Active Theme, and the previous one moves back to the library. Only one theme is live at a time.

You can delete any theme except the live one: open its ⋯ menu, click Delete, and confirm. Deleting can't be undone.

Restore an earlier version of a theme

Mateflow saves a snapshot of a theme every time it's edited, published, or reverted.

1. Open the theme's ⋯ menu and click History.
2. In Version History, find the version you want and click Revert.
3. Confirm. Mateflow first saves the current state as a new snapshot, so you can undo the revert.

Set the default light or dark mode

The default mode applies to everyone who hasn't picked their own.

1. On the Themes page, click Settings.
2. In Default Appearance, choose Light, Dark, or System (Auto). System (Auto) follows each person's device setting.
3. Click Save Settings.

How members switch between light and dark mode

Members can override your default at any time:

• Web: click the avatar, then Appearance (or go to Settings → Appearance). Under Theme, choose Follow community, System, Light, or Dark. Follow community shows which mode you set as the default.
• App: open Settings and privacy → Appearance. Under Theme, choose Match community, Match system, Light, or Dark.

Members can't pick a different theme. Your published theme's colors apply to everyone, in the mode they choose.

Give the Mateflow app its own colors

By default, the Mateflow app uses colors taken from your live web theme. To change them for the app only:

1. Click App Theme on the Themes page.
2. Choose Light or Dark, then set the colors you want to change. Colors you leave empty use the app's defaults. Derive from web fills in a starting draft from your web theme.
3. Click Save.

The app override is saved with your live theme, and the app keeps its own fonts. To make the app follow your web theme again, click Clear override and confirm.

Related articles

• Customize your logo, favicon, and social image
• Customize your homepage
• Customize navigation, links, and footer
• Set your display language and theme