# Communities - Change your group theme

> Communities themes allow you to customize the appearance of your group interface to match your preferences. Themes can be adjusted for both light and…

- Source: https://docs.ghlcustomercare.com/docs/memberships-and-communities/communities/communities-change-your-group-theme
- Section: Memberships & Communities / Communities
- Reading time: 2 min
- Images: 9, each explained below
- Modified on Thu, 25 Jul, 2024 at 3:52 PM

---
Communities themes allow you to customize the appearance of your group interface to match your preferences. Themes can be adjusted for both light and dark modes, and you can either choose from predefined themes or create your own custom theme.

**In This Article**

-   [Accessing Theme Settings](#admin-owner-view-accessing-theme-settingsmake-sure-to-turn-it-on-from-labs)
-   [Choosing a New Theme](#choosing-a-new-theme)
-   [Creating a Custom Theme](#creating-a-custom-theme)

---

## **Admin/Owner View:  
**Accessing Theme Settings  
Make sure to turn it on from Labs

To change your theme settings:

1.  Open Settings: Inside your community group, click on your right side bar and click on bottom “SETTINGS”.
2.  Navigate to themes: Select "Themes" from the sidebar.

## Choosing a New Theme

If you use multiple groups, try selecting a different theme for each one to help you tell them apart. Your new theme will appear in the broser.

-   **Light or Dark Mode:**
    
    In the Themes section, you can switch between Light Mode and Dark Mode using the buttons at the top.
    

-   ### 
    
    **Select a Predefined Theme:**
    
    Select Communities theme tab and **scroll** through the list of available themes. Click on a theme to preview it. Once you find a theme you like, it will automatically apply to your Communities interface.
    

Note: Themes are reflected only in Web and not mobile.

![Select a Predefined Theme:Select Communities theme tab and scroll through the list of available themes. Click on a theme to preview it. Once you find a theme…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026371615/original/CFh0CNY45tJ8kczPAOIrFsRDRUUUjeZKFw.gif)

**Select a Predefined Theme:Select Communities theme tab and scroll through the list of available themes. Click on a theme to preview it. Once you find a theme you like, it will automatically apply to your Communities interface. (image 1 of 9)**

This animation appears in the "Select a Predefined Theme:Select Communities theme tab and scroll through the list of available themes. Click on a theme to preview it. Once you find a theme you like, it will automatically apply to your Communities interface." section of "Communities - Change your group theme". The text alongside this image reads: Note: Themes are reflected only in Web and not mobile. Immediately after, the guide continues: As a group owner/admin, in the "Custom Themes" tab, users can customize various components of the group interface. For each mode i.e. Light Mode and Dark Mode, the admin will have to customise and Save the customisations separately.
- What this covers: Note: Themes are reflected only in Web and not mobile.
- Controls: scroll
- Next: As a group owner/admin, in the "Custom Themes" tab, users can customize various components of the group interface. For each mode i.e. Light Mode and Dark Mode, the admin will have to customise and Save the customisations separately.

## Creating a Custom Theme

As a group owner/admin, in the "Custom Themes" tab, users can customize various components of the group interface. For each mode i.e. Light Mode and Dark Mode, the admin will have to customise and Save the customisations separately.

S**croll** through the list of available customisation options: 

<table style="width: 100%"><tbody><tr><td dir="ltr" style="width: 50%"><div style="text-align: center">Options</div></td><td dir="ltr" style="width: 50%"><div style="text-align: center">What will change in your group</div></td></tr><tr><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">Sidebar Background</div></td><td style="width: 50%; vertical-align: middle"><div style="text-align: center"><span dir="ltr" style="font-weight: 400">Background colour of the sidebar with top bar</span><br></div></td></tr><tr><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">Primary</div></td><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">Button colours</div></td></tr><tr><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">Background</div></td><td style="width: 50%; vertical-align: middle"><div style="text-align: center"><span dir="ltr" style="font-weight: 400">Surface elements and modals</span><br></div></td></tr><tr><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">Tertiary</div></td><td style="width: 50%; vertical-align: middle"><div style="text-align: center"><span dir="ltr" style="font-weight: 400">Links and elements of selection(radio buttons/checkboxes).</span><br></div></td></tr><tr><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">Surface<br></div></td><td style="width: 50%; vertical-align: middle"><div style="text-align: center"><span dir="ltr" style="font-weight: 400">Base of the interface</span><br></div></td></tr><tr><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center"><span dir="ltr">Primary Font</span></div></td><td style="width: 50%; vertical-align: middle"><div style="text-align: center"><span dir="ltr" style="font-weight: 400">Main Context&nbsp;</span><br></div></td></tr><tr><td style="width: 50%; vertical-align: middle"><div style="text-align: center"><span dir="ltr">Secondary Font</span></div></td><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">Selected context</div></td></tr><tr><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">Fill colour</div></td><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">Hover colour</div></td></tr><tr><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">Borders</div></td><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">All borders</div></td></tr><tr><td dir="ltr" style="width: 50%; vertical-align: middle"><div style="text-align: center">Error</div></td><td style="width: 50%; vertical-align: middle"><div style="text-align: center"><span dir="ltr" style="font-weight: 400; text-align: left">Error in interaction</span></div></td></tr></tbody></table>

Click on the colour swatches to open the colour picker or enter a hex code directly.

![Creating a Custom Theme (image 2 of 9)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026372475/original/h7U0Niz24s5YPfqSqg5fyiRIwoPPoc12MQ.gif)

**Creating a Custom Theme (image 2 of 9)**

This animation appears in the "Creating a Custom Theme" section of "Communities - Change your group theme". The text alongside this image reads: Click on the colour swatches to open the colour picker or enter a hex code directly. Immediately after, the guide continues: Make sure to click on SAVE so all your changes are reflected.
- What to fill in: Click on the colour swatches to open the colour picker or enter a hex code directly.
- Controls: croll, SAVE
- Next: Make sure to click on SAVE so all your changes are reflected.

Make sure to click on **SAVE** so all your changes are reflected.

![Creating a Custom Theme (image 3 of 9)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026549271/original/9WQVbGzzIbNcNDi6mXXN-e1K2LgNZgLNlA.png)

**Creating a Custom Theme (image 3 of 9)**

This screenshot appears in the "Creating a Custom Theme" section of "Communities - Change your group theme". The text alongside this image reads: Make sure to click on SAVE so all your changes are reflected. Immediately after, the guide continues: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.
- How to confirm: Make sure to click on SAVE so all your changes are reflected.
- Controls: croll, SAVE
- Next: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.

## **  
Group View after customisations:**

## 

![Group View after customisations: (image 4 of 9)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026563361/original/XV24fez1NkZjoq7zC73CGV26Crr8FUC8_A.png)

**Group View after customisations: (image 4 of 9)**

This screenshot appears in the "Group View after customisations:" section of "Communities - Change your group theme". The text alongside this image reads: Make sure to click on SAVE so all your changes are reflected. Immediately after, the guide continues: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.
- How to confirm: Make sure to click on SAVE so all your changes are reflected.
- Next: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.

![Group View after customisations: (image 5 of 9)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026563373/original/5MOX0PY81J9k5K3nJ6DvvdF2urc10zdwVA.png)

**Group View after customisations: (image 5 of 9)**

This screenshot appears in the "Group View after customisations:" section of "Communities - Change your group theme". The text alongside this image reads: Make sure to click on SAVE so all your changes are reflected. Immediately after, the guide continues: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.
- How to confirm: Make sure to click on SAVE so all your changes are reflected.
- Next: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.

![Group View after customisations: (image 6 of 9)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026563393/original/hpeIBONaM53qtPZRpnIcXMp_Wg09pqLPfA.png)

**Group View after customisations: (image 6 of 9)**

This screenshot appears in the "Group View after customisations:" section of "Communities - Change your group theme". The text alongside this image reads: Make sure to click on SAVE so all your changes are reflected. Immediately after, the guide continues: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.
- How to confirm: Make sure to click on SAVE so all your changes are reflected.
- Next: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.

![Group View after customisations: (image 7 of 9)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026563405/original/groO5vMbDNCFZhkvVeejeLnvqzJLD2wgOA.png)

**Group View after customisations: (image 7 of 9)**

This screenshot appears in the "Group View after customisations:" section of "Communities - Change your group theme". The text alongside this image reads: Make sure to click on SAVE so all your changes are reflected. Immediately after, the guide continues: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.
- How to confirm: Make sure to click on SAVE so all your changes are reflected.
- Next: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.

![Group View after customisations: (image 8 of 9)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026563439/original/39tWXudI6LhQ3WqOlIXMfzd9KOU0oUrNNA.png)

**Group View after customisations: (image 8 of 9)**

This screenshot appears in the "Group View after customisations:" section of "Communities - Change your group theme". The text alongside this image reads: Make sure to click on SAVE so all your changes are reflected. Immediately after, the guide continues: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.
- How to confirm: Make sure to click on SAVE so all your changes are reflected.
- Next: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.

---

## **Member View:  
**

Group members will see the customised or chosen theme by the admin. Additionally, they can switch between **Light or Dark Mode** in Settings.

![Member View: (image 9 of 9)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026481389/original/vl4U1OUENVXb26Y-E2oq7LpbdU789Wd6Lw.png)

**Member View: (image 9 of 9)**

This screenshot appears in the "Member View:" section of "Communities - Change your group theme". The text alongside this image reads: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.
- What this covers: Group members will see the customised or chosen theme by the admin. Additionally, they can switch between Light or Dark Mode in Settings.
- Controls: Light or Dark Mode

---

Documentation for GHL Customer Care. Support: support@ghlcustomercare.com