# Theme and colors

> The community's theme under Brand and appearance › Theme, the ready-made themes, the saved themes (up to 10), the editor with Colors, Font, Corners and density and Navigation (side menu or top bar, native elements), generating a theme from an image, the contrast warning and the colors in e-mails.

The **theme** is the single place for the community's look: mode (light, dark or automatic), colors, font, corners, density and navigation (side menu or top bar). It paints the whole interface for every member (buttons, links, tabs, highlights, menu and header), and **activating a theme changes it all at once**.

## What it is for

- To make the community look like **yours**: the school in its brand orange, the coworking space in the green of its storefront, the company in the blue from its brand guide.
- To keep **variations** and switch whenever you want: the everyday theme, a Christmas one, one for event week. Each one stays saved and comes back with one click.

## How it works

### Where it is

**Settings › Brand and appearance** has two parts:

| Part | What it has |
|---|---|
| **Images** | Logo, logo for dark backgrounds, favicon and social media image. They are the **brand**: they don't change when you switch themes. See [Images and SEO](/configuracoes/imagens-e-seo) |
| **Theme** | *"Everything about how the community looks: mode, colors, font, corners, density and menu. Activating a theme changes it all at once."* |

Name, description, language and time zone stay in **Settings › General**; the domain, the texts and each space's layout are also outside the theme.

### Community themes

At the top of the **Theme** card, the **Community themes** list shows the saved themes, with the name, the thumbnail and the **Active** badge on the one in use. The community keeps **up to 10** (the counter shows, for example, *"3 of 10"*); ready-made themes don't count.

Every community starts with one saved theme called **Current**, active, with the look it already had (mode, colors, browser bar color and menu state). Nothing changes on screen until you activate another one. A new community starts with **Light** saved and active.

Each saved theme has:

| Action | What it does |
|---|---|
| **Activate** | Switches the theme for the whole community. First it shows **What changes** (mode, colors, font, corners, density, side menu, navigation and the elements that appear or disappear) and asks for confirmation. Anyone with the page open sees the change on the next load |
| **Edit** | Opens the editor. On the active theme, *"when you save, the community changes right away"* |
| **Duplicate** | Saves a copy (counts toward the limit of 10) |
| **Rename** | Changes only the name |
| **Restore** | *"Colors, font, corners, density and menu go back to those of the original theme. The name stays."* The origin is the ready-made theme it started from, the proposal generated from the image or, for **Current**, the look the community had |
| **Delete** | Removes the theme from the list, with confirmation. The active theme can't be deleted: activate another one first |

With 10 saved themes, saving one more shows *"The community already has 10 saved themes. Delete one to save another."*

### Ready-made themes

Below, **Ready-made themes**: **Light**, **Dark**, **Premium dark**, **Ocean**, **Forest** and **Editorial**. The dark ones only appear when the dark theme is enabled for the community (see [Dark mode](/configuracoes/modo-escuro)).

Clicking a theme shows a preview of the community with it, without saving anything. Then:

- **Use this theme** saves the ready-made theme as a community theme, with its name, and activates it.
- **Customize** opens the editor with its values. When you save, the default name is *"<theme> customized"* (for example, *"Ocean customized"*).

Ready-made themes don't carry the navigation: using or customizing one keeps the active theme's (side menu or top bar, menu state and hidden elements).

### The editor

At the top, the **Preview**, with light and dark side by side, changes as you edit: *"Nothing changes in the community until you save and activate."* Below, the **Theme name** and four tabs:

**Colors**

| Field | What it is |
|---|---|
| **Mode** | **Light** (*"Light background, as always."*), **Dark** or **Automatic** (follows each person's device). Dark and Automatic only with the dark theme enabled |
| **Primary color** | *"Links, icons, active tabs, highlights and soft backgrounds."* |
| **Secondary color** | *"The main action buttons."* |
| **Menu, header and browser** | **Side menu background**, **Side menu text**, **Header background**, **Header text** and **Browser bar on mobile**. *"Left blank, each uses the app's default background and text."* |

Each color (primary and secondary) has **11 shades**, from 50 (the lightest) to 950 (the darkest); **shade 500** is the base color. **Generate shades** *"Fills all 11 shades from the base color. Every shade stays editable afterwards."* The shades the interface uses are highlighted.

The **Colors of which mode** selector switches between **Light** and **Dark**. The dark scales are generated from the light colors; **Adjust the dark shades** unlocks shade-by-shade adjustment, **Generate from light** generates them again and **Back to generated** undoes the adjustment.

**Font**: **Headings** and **Text**, each with one of nine options: **System font** (the default), Inter, Manrope, DM Sans, Plus Jakarta Sans, Poppins, Lora, Merriweather and IBM Plex Sans. *"Fonts served by Memberfy, in two weights. While they load, text shows in the system font."*

**Corners and density**

| Field | Options |
|---|---|
| **Corners** | **Rounded** (12 px on cards, the default), **Soft** (6 px) or **Square** (almost no rounding). Avatars and pills stay round |
| **Density** | **Comfortable** (the usual spacing) or **Compact** (*"Tighter rows, cards and fields: more fits on screen."*). Compact applies on screens from 1024 px; on phones and smaller screens it stays comfortable, so taps stay easy |

**Navigation**

| Field | Options |
|---|---|
| **Navigation** | **Side menu** (*"Sections and spaces in a menu on the left (today's)."*, the default) or **Top bar** (*"Sections in the header, each opening its spaces. On phones, a strip of sections below the header."*) |
| **Side menu starting state** | **Full** or **Compact**. *"Applies to anyone who hasn't picked their own in My Account › Appearance."* See [Side menu](/configuracoes/menu-lateral). With the **Top bar**, the field disappears: *"With the top bar there is no compact menu: the side menu's starting state does not apply."* |

With the **Top bar**:

- **On a computer**, each section becomes a header item that opens its spaces in a dropdown. Sections that don't fit the width go to **More**, and **Administration** comes last, for those with a role. The badges for news, mentions and unread messages show on each item, as in the side menu. There is no side menu and no compact menu.
- **Edit menu**, inside **Administration** (owner and admin), brings the side menu back in that browser tab, since that is where sections and spaces are reordered and edited. **Done editing** goes back to the bar.
- The cookie notice and the **Powered by Memberfy** mark (when the plan requires it) leave the foot of the menu for a footer.
- **On phones**, a strip with the sections sits below the header; tapping a section opens its spaces in a sheet that slides up from the bottom of the screen, with the badges and the padlock. The header's menu button goes away, and visitors find **Sign in** right in the header.

**Native elements**: *"Turn off what the community does not use. It disappears for everyone, the team included; the page is still reachable by its address and nothing leaves Settings or Administration."* Applies with the side menu and with the top bar.

| Element | When hidden |
|---|---|
| **People shortcut** | *"The People tab leaves the avatar panel."* |
| **Overall leaderboard** | *"The shortcut leaves the avatar panel."* |
| **Events I organize** | *"The shortcut goes away; organizers get there from the event."* |
| **Language selector** | *"The language follows the browser and each member's saved choice."* |
| **Report a problem in the header** | *"It leaves the header and stays in the avatar panel."* |
| **Who is viewing the page** | *"The group of avatars leaves the page headers."* |

Member chat and the member count on the Hub have their own switch, in **Features** and **Visibility**.

**Never hideable**: *"So nobody is left without the essentials, these always stay:"* **Notification bell**, **Billing and subscription notices**, **Payment fields**, **Terms and privacy**, **Avatar panel, with My Account and Sign out**, **Sign in and Create account for visitors** and **Settings and Administration for those with a role**.

To save, **Save Changes**. Editing a saved theme writes over it; starting from a ready-made one creates a new theme.

### Contrast

Every color below the recommended contrast on its background shows up under **Contrast below the recommended**, with the ratio (*"The recommended minimum is 4.5:1."*). The warning **doesn't block**: when you save, the screen asks *"Save with low contrast?"* and you choose **Save anyway** or go back to adjust.

### Generate from an image

**Generate from an image** proposes a theme with the colors of an image: upload a **PNG, JPG or WebP up to 5 MB** (SVG isn't accepted for upload) or use the **community's logo**.

- Memberfy extracts the main colors from the image and the AI picks, from them, the primary color, the secondary, the menu and the header, in light and dark. Mode, font, corners, density and menu stay those of the active theme.
- **Contrast is guaranteed**: colors that don't pass are adjusted before the proposal appears.
- The proposal opens in the editor **without saving**. Review, adjust and save: then it becomes one of the saved themes (counts toward the limit of 10).
- Each generation uses **1 AI use from the plan**, the same quota as **Improve with AI**. With the quota used up, the usual message appears and the editor stays manual.
- The uploaded image **is not stored** and doesn't leave Memberfy: only the list of colors goes to the AI.

### Missing image

Where an image is optional and nobody uploaded one (the cover of a course, an event, a content post, a download, a classified ad, a call for papers, the photo of a room, the image of a product, a plan or an add-on in the store), the card and the page show a **gradient in the community's colors** instead of an empty gray frame.

### In e-mails

The e-mails the community sends (invitations, welcome, payment, event, parcel and booking notices, certificates and [campaigns](/notificacoes/campanhas-de-email)) use the **active theme's light primary color** on buttons and links, in **shade 600**, the same as the app's solid buttons. The button text is white or dark, whichever reads better on the color, and links are darkened as much as needed to read well on white. The certificate and the public forms and surveys also use the active theme's light colors. Activate another theme and the next e-mails already go out with its colors.

### Who can

The **owner** and **admins**: view, create, edit, activate, restore and delete themes, and generate from an image. Each person can still pick light or dark and a full or compact menu for themselves, in **My Account › Appearance**.

## Step by step

*Role: owner or admin.*

**Use a ready-made theme**

1. **Settings › Brand and appearance**, **Theme** card.
2. Under **Ready-made themes**, click a theme to see the preview.
3. **Use this theme** and confirm with **Activate**.

**Create the theme with your brand colors**

1. Under **Ready-made themes**, click **Customize** on the theme closest to what you want.
2. In the **Colors** tab, under **Primary color › Base color (shade 500)**, pick the color (or type its code, like `#e2187d`) and click **Generate shades**. Repeat under **Secondary color**.
3. If you want, adjust **Font**, **Corners and density** and **Navigation**, watching the **Preview**.
4. Give it a **Theme name** and **Save Changes**.
5. In the **Community themes** list, **Activate** the new theme and confirm.

**Go back to the previous look**

In the **Community themes** list, **Activate** on **Current**.

## Examples

**School in orange.** Primary `#FD7A05` (links and tabs), secondary `#C2410C` (buttons, a darker orange so the white text stays readable), Poppins font for headings.

**Coworking space with a Christmas theme.** **Duplicate** the everyday theme, rename it to *"Christmas"*, change the colors and save. On the 20th, **Activate** *"Christmas"*; on the 26th, **Activate** the usual one.

**Community with four sections.** In the **Navigation** tab, **Top bar**, and under **Native elements** turn off **Overall leaderboard** and **Language selector**, which the community doesn't use. The sections move into the header and the content gets the full width.

**Community without a designer.** **Generate from an image** with the logo, review the preview, save and activate.

## Tips

- Use the brand color as the primary and a darker version of it as the secondary.
- Avoid very light colors for the secondary: buttons have white text.
- Before touching the active theme, **Duplicate** it and edit the copy: you see the preview without changing anyone's community.
- Check the community on your phone after activating.

## Common errors and how to fix them

| Situation | What to do |
|---|---|
| Buttons became unreadable | Pick a darker secondary; the contrast warning shows which color is weak |
| I saved and the community didn't change | Saving doesn't activate: click **Activate** on the theme (unless you edited the active theme) |
| I can't save another theme | The community has 10: delete one you no longer use |
| I can't delete a theme | It's the active one: activate another first |
| The dark themes don't appear | The dark theme isn't enabled for the community yet. See [Dark mode](/configuracoes/modo-escuro) |
| **Generate from an image** rejected the file | Upload PNG, JPG or WebP up to 5 MB (SVG isn't accepted) |
| I want the look I had | **Activate** on **Current**, or **Restore** it if you edited it |

## Frequently asked questions

**Does switching themes change the logo?**
No. Logo, logo for dark backgrounds, favicon and social media image belong to the brand and live in **Images**.

**Can each member pick the colors?**
No. The colors belong to the community's theme. Each person only picks light or dark and a full or compact menu, for themselves.

**Can I schedule a theme switch?**
Not yet: switching is done with **Activate**, right away.

**Does hiding a native element block the page?**
No. It leaves the header or the avatar panel for everyone, but the page still opens by its address, and nothing leaves **Settings** or **Administration**.

**With the top bar, how do I reorder sections?**
In **Administration › Edit menu**: the side menu comes back in that tab until **Done editing**.

**Do e-mails change color too?**
Yes, with the active theme's light colors. See [In e-mails](#in-e-mails).

**What does Generate from an image cost?**
1 AI use from the plan per generation, the same quota as **Improve with AI**.

## In the API

- Ready-made themes: [`GET /api/appearance/themes`](/api/referencia/communities/list-ready-made-themes).
- Community themes (owner and admin, community from `X-CommunityId`): [`GET`](/api/referencia/communities/list-community-themes) and [`POST /api/community-themes`](/api/referencia/communities/create-community-theme), [`GET`](/api/referencia/communities/get-community-theme), [`PATCH`](/api/referencia/communities/update-community-theme) and [`DELETE /api/community-themes/{id}`](/api/referencia/communities/delete-community-theme), [`POST /api/community-themes/{id}/activate`](/api/referencia/communities/activate-community-theme) and [`/restore`](/api/referencia/communities/restore-community-theme). In place of `{id}`, `active` is the active theme. The 11th theme, deleting the active one, a font, corners, density or menu outside the list, a color that isn't hexadecimal and a dark theme without it being enabled answer `422`.
- Navigation: `values.navigation.layout` (`sidebar`, the default, or `top`) and `values.navigation.hiddenNative` (the whole list of hidden elements, from `people`, `leaderboard`, `organizedEvents`, `languageSelector`, `reportProblem` and `presence`; `[]` = nothing hidden), next to `sidebarDefault`. Out of the list, `422` on the field (`values.navigation.layout` or `values.navigation.hiddenNative[i]`). On activation they go to `navigation.layout` and `navigation.hiddenNative` in the community read. Themes saved before, **Current** and the ready-made ones read `sidebar` and `[]`.
- Proposal from an image: [`POST /api/communities/appearance/theme-from-image`](/api/referencia/communities/propose-theme-from-image), with the file (`file`, multipart) or `{ "source": "logo" }`. It returns the proposal in `values`, without saving; to keep it, send `values` to `POST /api/community-themes` with `origin: "image"`. AI quota used up: `429`.
- `themePalette` and `themeColor` are still in the community's `GET`, copied from the active theme's light colors, with `activeThemeId`. They **are no longer saved** through `PUT /api/communities/{id}`: if sent, they answer `400` on the field. On community creation they are still accepted and become the colors of the initial **Light** theme. See [Responses and errors](/api/respostas-e-erros#appearance-and-themes).

## Through the assistant (MCP)

*Minimum role: admin.*

- *"Which themes does the community have?"*: `list_community_themes`; the ready-made ones, `list_theme_presets`; one theme with all its values, `get_community_theme` (without an id, the active one).
- *"Create a theme with the blue #2563EB based on Ocean"*: `create_community_theme`; `update_community_theme` changes one (without an id, the active one).
- *"Activate the Christmas theme"*: `activate_community_theme`; `restore_community_theme` and `delete_community_theme` too. All three ask for confirmation.
- *"Suggest a theme from our logo"*: `suggest_community_theme_from_logo` returns the proposal without saving and uses 1 AI use from the plan; to keep it, the assistant calls `create_community_theme` with `origin: "image"`. Through the assistant, only from the logo; any other image is uploaded in the app.

- *"Put the navigation on top and hide the leaderboard"*: `update_community_theme` with `navigation.layout: "top"` and `navigation.hidden_native: ["leaderboard"]` (the whole list; `[]` shows everything again). The values are `people`, `leaderboard`, `organized_events`, `language_selector`, `report_problem` and `presence`. The `activate_community_theme` confirmation shows the navigation before → after, and `get_community_settings` returns `appearance.navigation_layout` and `appearance.hidden_native`.

The colors left `update_community_settings` (`primary_color`, `secondary_color`, `reset_colors`, `mobile_bar_color`). See [Community and structure](/mcp/ferramentas-comunidade#themes).

## Related

- [Dark mode](/configuracoes/modo-escuro)
- [Side menu](/configuracoes/menu-lateral)
- [Images and SEO](/configuracoes/imagens-e-seo)
- [General settings](/configuracoes/configuracoes-gerais)