> For the complete documentation index, see [llms.txt](https://rosea.gitbook.io/universe-moodle-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rosea.gitbook.io/universe-moodle-theme/demo-content/course-colors.md).

# Course Colors

<figure><img src="/files/N6xBl3mrSvJAuxjx38yD" alt=""><figcaption></figcaption></figure>

In order to access customized color options for courses, you must include the following custom fields:

### 1. Custom Fields

*Site administration -> Courses -> Course custom fields*

1. Custom Course Logo - **customcourselogo** - *Picture*
2. Custom Course Logo (Dark Mode) - **customcoursedmlogo** - *Picture*
3. Custom Course Favicon - **customcoursefavicon** - *Picture*
4. Custom Site Title - **customcoursename** - *Short text*
5. Top Bar Color - **topbarcolor** - *Short text*
6. Top Bar Color #2 - **topbarcolor2** - *Short text*
7. Top Bar Button Text Color - **topbartextcolor** - *Short text*
8. Top Bar Button Hover Text Color - **topbartexthovercolor** - *Short text*
9. Top Bar Button Hover Bacground Color - **topbarbghovercolor** - *Short text*
10. Top Bar Color (Dark Mode) - **dmtopbarcolor** - *Short text*
11. Top Bar Color #2 (Dark Mode) - **dmtopbarcolor2** - *Short text*
12. Top Bar Button Text Color (Dark Mode) - **dmtopbartextcolor** - *Short text*
13. Top Bar Button Hover Text Color (Dark Mode) - **dmtopbartexthovercolor** - *Short text*
14. Top Bar Button Hover Background Color (Dark Mode) - **dmtopbarbghovercolor** - *Short text*
15. Main Color #1 - **maincolor1** - *Short text*
16. Footer Background Color - **footerbgcolor** - *Short text*
17. Footer Text Color - **footertextcolor** - *Short text*

<figure><img src="/files/Rk7gRuTAvzpaTXkIaiyo" alt=""><figcaption></figcaption></figure>

To add your own customized color, simply go to the course settings.

{% tabs %}
{% tab title="Step 1" %}

<figure><img src="/files/SnQR9dKmfUxjigcwphkT" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Step 2" %}

<figure><img src="/files/QVU4gb7aeZZWsMN1Tp34" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Main Content" %}

<figure><img src="/files/Blmwq33oudKumZ8h87Gf" alt=""><figcaption></figcaption></figure>

1\. Custom Course Logo & Custom Course Logo (Dark Mode)

2\. Custom Site Title

3\. Top Bar Color & Top Bar Color (Dark Mode)

4\. Main Color #1

5\. Gradient: Main Color #1 & Main Color #2
{% endtab %}

{% tab title="Footer" %}

<figure><img src="/files/Spsge7LSu4S0pPRv0dvL" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Favicon" %}

<figure><img src="/files/vHj7DdlgwFqykQOv85Qv" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### 2. Please install the custom plugin (for custom Logo and favicon)

{% hint style="info" %}

### Important plugin for custom course logo

To add a custom logo on the course page, kindly install the plugin provided below.\
<https://moodle.org/plugins/customfield_picture>
{% endhint %}

{% embed url="<https://moodle.org/plugins/customfield_picture>" %}

### 3. Add all fields from the list below:

<details>

<summary>List of all custom fields</summary>

#### **1. Custom Course Logo**

**Add a new custom field -> Picture**\
**Short name:** customcourselogo\
**Description:** Depends on you\
**Visible to:** Everyone

#### **2. Custom Course Logo (Dark Mode)**

**Add a new custom field -> Picture**\
**Short name:** customcoursedmlogo\
**Description:** Depends on you\
**Visible to:** Everyone

#### **3. Custom Course Favicon&#x20;*****(recommended size: 64x64)***

**Add a new custom field -> Picture**\
**Short name:** customcoursefavicon\
**Description:** Depends on you\
**Visible to:** Everyone

#### **4. Top Bar Color**

**Add a new custom field -> Short text**\
**Short name:** topbarcolor\
**Description:** Top bar color\
**Visible to:** Nobody

#### **5. Top Bar Color (Dark Mode)**

**Add a new custom field -> Short text**\
**Short name:** dmtopbarcolor\
**Description:** Top bar color on the dark mode\
**Visible to:** Nobody

#### 6. Main Color #1 (Primary button, Gradient Color #1)

**Add a new custom field -> Short text**\
**Short name:** maincolor1\
**Description:** \
**Visible to:** Nobody

#### 7. Main Color #2 (Gradient Color #2)

**Add a new custom field -> Short text**\
**Short name:** maincolor1\
**Description:** \
**Visible to:** Nobody

#### 8. Footer Color

**Add a new custom field -> Short text**\
**Short name:** footercolor\
**Description:** \
**Visible to:** Nobody

</details>

### Tutorials:

{% embed url="<https://www.youtube.com/watch?v=D5mhgTiWcWg>" %}