How to Personalize Your Community Theme and Colors

Created by Stefan Perchinkov, Modified on Tue, 25 Feb at 3:59 AM by Stefan Perchinkov

This article will teach you how to customize your community branding fully. You can change your group theme, select different colors, apply branding colors, and switch between light and dark modes. Let's dive into the steps to personalize your community's

look and feel.

Switching Between Light and Dark Mode

Step 1: Accessing Membership Settings

1. Go to Memberships: Navigate to the main settings menu and click on "Memberships" on the left

2. Select Communities: Hover over the communities tab at the top and select "Groups" from the dropdown

3. Log In: Log into your group.

Step 2: Changing Themes

1. Go to Settings: Once logged into your group, click on "Settings."

2. Select Themes: Here, you can switch between light mode and dark mode.

Using Community Themes

Step 3: Choosing a Pre-made Theme

1. Select Community Theme: Under the "Community Theme" section, choose from the different pre-made color options.

2. Preview Changes: Watch how the different elements inside your group change in real-time.

Creating a Custom Theme

Step 4: Customizing Your Theme

1. Select Custom Theme: If you prefer to use your brand colors, click on "Custom Theme."

2. Change Element Colors: You can modify the color of every single element in your community. This includes:

  • Sidebar background
  • Primary color (buttons, highlights)
  • Background color
  • Tertiary surface
  • Primary and secondary fonts
  • Fill color
  • Border and arrow colors

Step 5: Editing Specific Elements

1. Open the Color Editor: Click on the pencil icon next to each element to open the color editor.

2. Choose or Enter Color Codes: Select a color or enter the hex color code of your brand.

3. Save Changes: Click "Save" to apply the changes. Note that these themes are only reflected on desktop, not on mobile.

Final Adjustments and Member View

Step 6: Final Customizations

1. Modify Surface Colors: Adjust the surface colors for elements like background and borders.

2. Save and Confirm: Save your changes and confirm them.

Step 7: Viewing as a Member

1. Switch to Member View: Login from a member’s perspective to see the changes.

2. Toggle Modes: Use the sun and moon icons at the top to switch between light and dark modes.

FAQ

1. How do I switch between light and dark mode in my community?
To switch between light and dark mode, go to your community's "Settings" and select "Themes." From there, you can toggle between light mode and dark mode.

2. Can I use my brand colors for my community theme?
Yes, you can create a custom theme by selecting "Custom Theme" under the theme settings. This allows you to modify the color of every element in your community, such as the sidebar, buttons, and fonts.

3. Are the custom themes I create available on mobile?
No, custom themes are only reflected on the desktop version of your community. The mobile version will not display these customizations.

4. How can I preview my community as a member?
To view your community from a member's perspective, log in as a member and use the sun and moon icons at the top to switch between light and dark modes, ensuring your customizations are displayed as intended.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article