Theme and colors

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:

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:

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).

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 " 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

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

Navigation

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.

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) 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

#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.

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.
• Community themes (owner and admin, community from X-CommunityId): GET and POST /api/community-themes, GET, PATCH and DELETE /api/community-themes/{id}, POST /api/community-themes/{id}/activate and /restore. 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, 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.

#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.

#Related

• Dark mode
• Side menu
• Images and SEO
• General settings