---
title: Color Customization
description: "You can customize the color of almost everything in**FluentCommunity** (e.g., **Navbar**, **Sidebar**, **Feed**, **Content**, **Link**, **Text**, **Button**, etc.) according to your preferences. This article covers the detailed process of how to customize color in the overall FluentCommunity. ## Color Customization…"
url: "https://fluentcommunity.co/docs/color-customization/"
updated: "2025-03-11"
category: Customization
---

# Color Customization

You can customize the color of almost everything in**FluentCommunity** (e.g., **Navbar**, **Sidebar**, **Feed**, **Content**, **Link**, **Text**, **Button**, etc.) according to your preferences. This article covers the detailed process of how to customize color in the overall FluentCommunity.

## Color Customization in FluentCommunity

To learn how to change the default color and set a customized color in desired areas of the Fluent Community, follow the steps with screenshots below – 

> **Remember**, the **Fluent Community** interface offers both **Light** and **Dark** themes, and you can **Customize** the **Colors** separately for both modes.

First, go to the **Settings** page and click the **Customize** Colors button in the top right corner.

![](https://fluentcommunity.co/wp-content/uploads/2024/11/1.-Customize-Colors-button-scaled.webp)

#### Light Mode Customization

Once you click the **Customized** **Colors** button, you will be redirected to the **Light** **Mode** tab.

To change the default color, click the **Arrow Icon** inside the **Color Schema** box, and a dropdown list with different color options will appear.

Now, you can choose any **Pre-built Color Template** or click the **Custom** option to set your own customized colors.

After completing the customization, press the**Save Settings** button to save all changes.

![](https://fluentcommunity.co/wp-content/uploads/2024/11/2.-Light-Mode-Color-Schema-field.webp)

Once you choose the **Custom** option, you will get **Three Major Options** for customizing the color. These are:

1. Header
2. Sidebar
3. General

![](https://fluentcommunity.co/wp-content/uploads/2024/11/3.-Three-options-of-Custom-Color.webp)

##### A. Header

After opening the **Header**option, you can change the color of the areas shown in the screenshot below.

![](https://fluentcommunity.co/wp-content/uploads/2024/11/4.-Header-scaled.webp)

##### B. Sidebar

After opening the **Sidebar** option, you can change the color of the areas shown in the screenshot below.

![](https://fluentcommunity.co/wp-content/uploads/2024/11/5.-Sidebar-scaled.webp)

##### C. General

After opening the **General**option, you can change the color of the areas shown in the screenshot below.

![](https://fluentcommunity.co/wp-content/uploads/2024/11/6.-General.webp)

## Dark Mode Customization

After clicking the **Customized** **Colors** button, go to the**Drak Mode** tab.

> Then, follow the same process shown above as the **Color Customization** for **Dark Mode** is exactly similar to the **[Light Mode](https://fluentcommunity.co/docs/color-customization/#1-toc-title).**

After completing the customization, press the**Save Settings** button to save all changes.

![](https://fluentcommunity.co/wp-content/uploads/2024/11/7.-Dark-Mode-Color-Schema-field-scaled.webp)

If you have any further questions, concerns, or suggestions, please do not hesitate to contact our [@support team](https://wpmanageninja.com/support-tickets/?utm_source=wpmn&utm_medium=home&utm_campaign=site#/). Thank you.