From abeade809924c3f3116812b32a9bbe023379c105 Mon Sep 17 00:00:00 2001
From: Furkan Yavuz <furknyavuz@gmail.com>
Date: Fri, 10 Sep 2021 13:42:47 +0300
Subject: [PATCH] brand-color to theme-color change

---
 README.md                                     |   8 --
 .../event-data/event-data.component.html      |  16 +--
 .../event-data/event-data.component.scss      |   2 +-
 .../button/button1/button1.component.html     |   8 +-
 .../button/button1/button1.component.scss     |  33 +++--
 .../button/button1/button1.component.ts       |   3 +-
 .../common/card/card1/card1.component.html    |   6 +-
 .../common/card/card1/card1.component.scss    |   4 +-
 .../common/card/card1/card1.component.ts      |   2 +-
 .../card/event-card/event-card.component.html |  60 ++++----
 .../pricing-card/pricing-card.component.html  |   2 +-
 .../testimonial-card.component.scss           |   4 +-
 .../testimonial-card.component.ts             |   2 +-
 .../color-chart/color-chart.component.html    |  10 +-
 .../dropdown-menu.component.html              |   2 +-
 .../dropdown-menu.component.scss              |  14 +-
 .../common/rate-bar/rate-bar.component.html   |   2 +-
 .../swiper-wrapper.component.scss             |   2 +-
 .../bottom-nav/bottom-nav.component.scss      |  12 +-
 .../nav/common/footer/footer.component.scss   |   8 +-
 .../dashboard-layout-top-nav.component.scss   |   8 +-
 .../landing-layout-top-nav.component.scss     |   8 +-
 .../cookie-popup/cookie-popup.component.scss  |   8 +-
 .../timeline/timeline.component.html          |   2 +-
 .../timeline/timeline.component.scss          |   8 +-
 .../create-event/create-event.component.scss  |   6 +-
 .../dashboard/dashboard.component.scss        |   2 +-
 .../event/event.component.scss                |   2 +-
 .../learn/learn.component.scss                |   2 +-
 .../my-profile/my-profile.component.html      |  10 +-
 .../my-profile/my-profile.component.scss      |   4 +-
 .../public-profile.component.html             |  10 +-
 .../public-profile.component.scss             |   2 +-
 .../side-content/side-content.component.html  |   4 +-
 .../landing-layout/home/home.component.scss   |  12 +-
 .../landing-layout.component.html             |   2 +-
 .../landing-layout.component.scss             |   2 +-
 .../landing-layout/login/login.component.html |   2 +-
 .../maintenance/maintenance.component.html    |   2 +-
 .../maintenance/maintenance.component.scss    |   2 +-
 .../not-found/not-found.component.html        |   2 +-
 .../not-found/not-found.component.scss        |   2 +-
 .../product/product.component.scss            |  10 +-
 .../sign-up-success.component.scss            |   2 +-
 .../sign-up/sign-up.component.html            |   2 +-
 .../verify-account.component.html             |   4 +-
 .../verify-account.component.scss             |   2 +-
 .../callback/callback.component.scss          |   2 +-
 .../external/external.component.scss          |   2 +-
 src/app/service/theme/theme.service.ts        |  38 ++---
 src/styles/animation/animation.scss           |   4 +-
 src/styles/loading/loading.scss               |   4 +-
 src/styles/rate/rate.scss                     |  10 +-
 src/styles/ribbon/ribbon.scss                 |   2 +-
 src/styles/styles.common.scss                 |   4 +-
 src/styles/theme/blue-theme/blue-theme.scss   | 132 +++++++++---------
 src/styles/theme/green-theme/green-theme.scss | 132 +++++++++---------
 src/styles/theme/red-theme/red-theme.scss     | 132 +++++++++---------
 .../theme/yellow-theme/yellow-theme.scss      | 132 +++++++++---------
 59 files changed, 456 insertions(+), 460 deletions(-)

diff --git a/README.md b/README.md
index bf628f78..45abc9bb 100644
--- a/README.md
+++ b/README.md
@@ -131,14 +131,6 @@ PORT=4200
 
 Check project's current **nodejs** and **npm** version from **[package.json](package.json)**.
 
-## Landing Screen Images
-
-To be able to update home screen images, we are using open source project **[Scale by Flexiple](https://2.flexiple.com/scale/all-illustrations)**.
-
-Find our brand color at **[brand.scss](src/styles/brand/brand.scss)** and apply at the website and download images.
-
-<br/>
-
 ## Brand Color Scale Generator
 
 To be able to generate brand color scales, we are using **[Colllor](http://colllor.com)**.
diff --git a/src/app/component/common/block/event-data/event-data.component.html b/src/app/component/common/block/event-data/event-data.component.html
index ef279fb8..8497c349 100644
--- a/src/app/component/common/block/event-data/event-data.component.html
+++ b/src/app/component/common/block/event-data/event-data.component.html
@@ -61,35 +61,35 @@ <h4 *ngIf="date">{{timeItem}}</h4>
   </div>
   <div class="event-last-item">
     <app-button1 (click)="onEditClick()" *ngIf="isEditable && !inProgress && !showRateBar && !completed"
-                 [brandColor]="true" [icon]="'pen'" [isSleekButton]="true" [text]="'Edit'">
+                 [themeColor]="'default'" [icon]="'pen'" [isSleekButton]="true" [text]="'Edit'">
     </app-button1>
     <app-button1 (click)="onBuyNowClick()"
                  *ngIf="!isEditable && isPremium && attendeeButton && !showRateBar && !completed"
-                 [brandColor]="true" [icon]="'shopping-cart'" [isSleekButton]="true"
+                 [themeColor]="'default'" [icon]="'shopping-cart'" [isSleekButton]="true"
                  [text]="'Buy Now ' + (price ? '(' + price + '$)' : '')">
     </app-button1>
     <app-button1 (click)="onAttendClick()"
                  *ngIf="!isEditable && !isPremium && attendeeButton && !showRateBar && !completed"
-                 [brandColor]="true" [isSleekButton]="true" [text]="'Attend'">
+                 [themeColor]="'default'" [isSleekButton]="true" [text]="'Attend'">
     </app-button1>
     <app-button1 (click)="onDropClick()" *ngIf="!isEditable && dropButton && !showRateBar && !completed && !isPremium"
                  [hoverWithColor]="false"
                  [isSleekButton]="true" [lighterContrast]="true" [text]="'Drop'" [transparent]="true">
     </app-button1>
     <app-button1 (click)="onMarkAsCompletedClick()" *ngIf="markAsCompleted && !showRateBar && !completed"
-                 [brandColor]="true" [isSleekButton]="true" [text]="'Mark As Completed'" [icon]="'check'">
+                 [themeColor]="'default'" [isSleekButton]="true" [text]="'Mark As Completed'" [icon]="'check'">
     </app-button1>
-    <app-button1 *ngIf="!isEditable && dropButton && !showRateBar && !completed && isPremium" [brandLightColor]="true"
+    <app-button1 *ngIf="!isEditable && dropButton && !showRateBar && !completed && isPremium" [themeLightColor]="true"
                  [isSleekButton]="true" [text]="'Attended'">
     </app-button1>
-    <app-button1 *ngIf="completed" [cursor]="'not-allowed'" [brandLightColor]="true" [isSleekButton]="true"
+    <app-button1 *ngIf="completed" [cursor]="'not-allowed'" [themeLightColor]="true" [isSleekButton]="true"
                  [text]="'Completed'">
     </app-button1>
     <app-button1 (click)="onRateClick()" *ngIf="showRateBar"
-                 [brandColor]="true" [isSleekButton]="true" [text]="'Rate'">
+                 [themeColor]="'default'" [isSleekButton]="true" [text]="'Rate'">
     </app-button1>
     <app-button1 *ngIf="inProgress" [cursor]="'not-allowed'"
-                 [brandLightColor]="true" [isSleekButton]="true" [text]="'In Progress'" [icon]="'hourglass'">
+                 [themeLightColor]="true" [isSleekButton]="true" [text]="'In Progress'" [icon]="'hourglass'">
     </app-button1>
     <div (click)="onCategoryClick()" class="event-categories">
       <p *ngIf="category && !subCategory && !leafCategory"><a class="link">{{'#' + category.name}}</a></p>
diff --git a/src/app/component/common/block/event-data/event-data.component.scss b/src/app/component/common/block/event-data/event-data.component.scss
index 444b4e7b..8b21158c 100644
--- a/src/app/component/common/block/event-data/event-data.component.scss
+++ b/src/app/component/common/block/event-data/event-data.component.scss
@@ -142,7 +142,7 @@
 }
 
 .content-information-row-data {
-  color: var(--brand-color);
+  color: var(--theme-color);
   font-weight: 400;
   font-size: 1.1em;
 }
diff --git a/src/app/component/common/button/button1/button1.component.html b/src/app/component/common/button/button1/button1.component.html
index bcb4ca6a..57a874b4 100644
--- a/src/app/component/common/button/button1/button1.component.html
+++ b/src/app/component/common/button/button1/button1.component.html
@@ -1,11 +1,11 @@
-<button class="button1" [class]="classType" [class.attendee]="isAttendee" [class.brand-color]="brandColor"
+<button class="button1" [class]="classType" [class.attendee]="isAttendee"
         [class.fixed-width]="fixedWidth" [class.hover-with-color]="hoverWithColor"
         [class.lighter-contrast]="lighterContrast" [class.mobile-view]="mobileView"
         [class.sleek-button]="isSleekButton" [class.success]="success" [class.transparent]="transparent"
-        [class.contribute]="isContribute" [class.brand-light-color]="brandLightColor"
+        [class.contribute]="isContribute" [class.theme-light-color]="themeLightColor"
         [class.always-light]="alwaysLight" [class.always-dark]="alwaysDark" [class.selected]="selected"
-        [style.color]="themeColor ? 'var(--brand-color-' + themeColor + '-theme)' : ''"
-        [style.border-color]="themeColor ? 'var(--brand-color-' + themeColor + '-theme)' : ''"
+        [class.theme-color]="!transparent && themeColor"
+        [class.transparent-theme-color]="transparent && themeColor"
         [disabled]="loading || disabled" [style.cursor]="cursor" [class.relative-to-parent]="relativeToParent"
         [ngClass]="themeColor + '-theme'">
   <i aria-hidden="true" *ngIf="icon" [class]="'fas fa-' + icon + ' fa-lg fa-fw'"></i>
diff --git a/src/app/component/common/button/button1/button1.component.scss b/src/app/component/common/button/button1/button1.component.scss
index 024fb3a8..133d86c0 100644
--- a/src/app/component/common/button/button1/button1.component.scss
+++ b/src/app/component/common/button/button1/button1.component.scss
@@ -26,11 +26,6 @@
   margin: 0;
 }
 
-.button1.brand-color {
-  color: whitesmoke;
-  background-color: var(--brand-color);
-}
-
 .button1.always-light {
   color: var(--contrast-light-mode);
   background-color: var(--color-light-mode);
@@ -41,9 +36,20 @@
   background-color: var(--color-dark-mode);
 }
 
-.button1.brand-light-color {
+.button1.transparent.transparent-theme-color {
+  border: 1px solid var(--success);
+  color: var(--theme-color);
+  border-color: var(--theme-color);
+}
+
+.button1.theme-light-color {
+  color: whitesmoke;
+  background-color: var(--theme-color-lighter-4);
+}
+
+.button1.theme-color {
   color: whitesmoke;
-  background-color: var(--brand-color-lighter-5);
+  background-color: var(--theme-color);
 }
 
 .button1.transparent {
@@ -56,7 +62,7 @@
 }
 
 .button1.selected {
-  box-shadow: 0 0 3px 3px var(--brand-color-lighter-1);
+  box-shadow: 0 0 3px 3px var(--theme-color-lighter-1);
 }
 
 .button1.lighter-contrast {
@@ -106,13 +112,12 @@
     box-shadow: 0 3px 15px 1px var(--shadow);
   }
 
-  .button1.brand-color:hover {
-    background-color: var(--brand-color);
-    color: white;
+  .button1.transparent.transparent-theme-color:hover {
+    color: var(--theme-color);
   }
 
-  .button1.brand-light-color:hover {
-    background-color: var(--brand-color-lighter-5);
+  .button1.theme-light-color:hover {
+    background-color: var(--theme-color-lighter-4);
     color: whitesmoke;
     box-shadow: initial;
   }
@@ -126,6 +131,6 @@
   }
 
   .button1.selected:hover {
-    box-shadow: 0 0 3px 3px var(--brand-color-lighter-1);
+    box-shadow: 0 0 3px 3px var(--theme-color-lighter-1);
   }
 }
diff --git a/src/app/component/common/button/button1/button1.component.ts b/src/app/component/common/button/button1/button1.component.ts
index a17f6037..6c64b429 100644
--- a/src/app/component/common/button/button1/button1.component.ts
+++ b/src/app/component/common/button/button1/button1.component.ts
@@ -10,8 +10,7 @@ export class Button1Component {
 
   @Input() text = 'Button';
   @Input() classType = 'top-right-bottom-left-rounded-box';
-  @Input() brandColor = false;
-  @Input() brandLightColor = false;
+  @Input() themeLightColor = false;
   @Input() transparent = false;
   @Input() success = false;
   @Input() isContribute = false;
diff --git a/src/app/component/common/card/card1/card1.component.html b/src/app/component/common/card/card1/card1.component.html
index 6184d643..4f3ca3c7 100644
--- a/src/app/component/common/card/card1/card1.component.html
+++ b/src/app/component/common/card/card1/card1.component.html
@@ -2,13 +2,13 @@
      [class.card1-small]="isSmall"
      [class.no-margin]="!margin" [class.no-shadow]="!shadow" [style.height]="height ? height : ''"
      [style.width]="width ? width : ''" class="card1" [class.testimonial-size]="testimonialSizeActive">
-  <div *ngIf="topWrapper" [class.card1-top-wrapper-in-brand-color]="topWrapperInBrandColor"
+  <div *ngIf="topWrapper" [class.card1-top-wrapper-in-theme-color]="topWrapperInThemeColor"
        class="card1-top-wrapper">
   </div>
   <div *ngIf="topLayer" class="layers top-layer">
     <svg [style.margin-top]="topLayerMarginTop"
          [style.min-height]="topLayerMinHeight" viewBox="0 0 1000 250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax slice">
-      <path d="M 0,250 1000,120 V 0 H 0 Z" style="fill: var(--brand-color-lighter-2);"></path>
+      <path d="M 0,250 1000,120 V 0 H 0 Z" style="fill: var(--theme-color-lighter-2);"></path>
     </svg>
   </div>
   <div *ngIf="!headerProfileImg && enableHeader && !enableHeaderFullImg" class="card1-header" [class]="headerType">
@@ -48,7 +48,7 @@ <h3>{{title}}</h3>
   <div *ngIf="bottomLayer" class="bottom-layer">
     <svg style="min-height: 210px;" xmlns="http://www.w3.org/2000/svg">
       <path transform="translate(100 100)" d="M28.9,-40.6C39.8,-43.8,52.4,-40.7,53.9,-32.9C55.4,-25,45.8,-12.5,45.4,-0.2C44.9,12,53.7,24,49.3,26.9C45,29.8,27.5,23.6,17.1,32.7C6.7,41.9,3.4,66.3,-3.1,71.6C-9.5,76.9,-18.9,63.1,-26.9,52.5C-34.8,42,-41.2,34.7,-48.2,26.5C-55.3,18.3,-63,9.2,-64.9,-1.1C-66.9,-11.4,-63.1,-22.8,-59.3,-36.6C-55.4,-50.4,-51.6,-66.6,-41.7,-63.9C-31.9,-61.2,-15.9,-39.7,-3.4,-33.8C9,-27.8,18.1,-37.4,28.9,-40.6Z"
-            [style.fill]="bottomLayerBackgroundColor ? bottomLayerBackgroundColor : 'var(--brand-color-lighter-2)'"
+            [style.fill]="bottomLayerBackgroundColor ? bottomLayerBackgroundColor : 'var(--theme-color-lighter-2)'"
             stroke="null" fill-opacity="0.4"/>
     </svg>
   </div>
diff --git a/src/app/component/common/card/card1/card1.component.scss b/src/app/component/common/card/card1/card1.component.scss
index dfe476d7..dc67e8a9 100644
--- a/src/app/component/common/card/card1/card1.component.scss
+++ b/src/app/component/common/card/card1/card1.component.scss
@@ -41,8 +41,8 @@
   left: 0;
 }
 
-.card1-top-wrapper.card1-top-wrapper-in-brand-color {
-  background-color: var(--brand-color);
+.card1-top-wrapper.card1-top-wrapper-in-theme-color {
+  background-color: var(--theme-color);
 }
 
 .card1-header {
diff --git a/src/app/component/common/card/card1/card1.component.ts b/src/app/component/common/card/card1/card1.component.ts
index 3f373786..142f0896 100644
--- a/src/app/component/common/card/card1/card1.component.ts
+++ b/src/app/component/common/card/card1/card1.component.ts
@@ -25,7 +25,7 @@ export class Card1Component {
   @Input() bottomWrapper = true;
   @Input() bottomWrapperColor = '';
   @Input() topWrapper = false;
-  @Input() topWrapperInBrandColor = false;
+  @Input() topWrapperInThemeColor = false;
   @Input() height = undefined;
   @Input() width = undefined;
   @Input() maxHeight = false;
diff --git a/src/app/component/common/card/event-card/event-card.component.html b/src/app/component/common/card/event-card/event-card.component.html
index cc1d3546..780c3a10 100644
--- a/src/app/component/common/card/event-card/event-card.component.html
+++ b/src/app/component/common/card/event-card/event-card.component.html
@@ -39,12 +39,12 @@
         <path
             class="change-color-in-svg"
             d="M874.19 1026.69H961.13C962.39 1026.69 963.49 1025.68 963.49 1024.33C963.49 1023.07 962.48 1021.97 961.13 1021.97H871.92V1024.33C871.92 1025.59 872.93 1026.69 874.19 1026.69Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path843"/>
         <path
             class="change-color-in-svg"
             d="M871.92 1021.97C872.09 1017 875.29 1012.7 880.01 1011.02L908.82 1001C910.08 1000.58 911.35 1001.25 911.68 1002.52C912.94 1006.73 916.06 1015.75 922.21 1021.98H961.13C962.39 1021.98 963.49 1022.99 963.49 1024.34C963.49 1025.69 962.48 1026.7 961.13 1026.7H874.19C872.93 1026.7 871.92 1025.69 871.92 1024.43V1021.97V1021.97Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path845"/>
         <path
             d="M871.92 1021.97C872.09 1017 875.29 1012.7 880.01 1011.02L908.82 1001C910.08 1000.58 911.35 1001.25 911.68 1002.52C912.94 1006.73 916.06 1015.75 922.21 1021.98H961.13C962.39 1021.98 963.49 1022.99 963.49 1024.34C963.49 1025.69 962.48 1026.7 961.13 1026.7H874.19C872.93 1026.7 871.92 1025.69 871.92 1024.43V1021.97V1021.97Z"
@@ -147,12 +147,12 @@
         <path
             class="change-color-in-svg"
             d="M942.71 1026.69H1029.65C1030.91 1026.69 1032.01 1025.68 1032.01 1024.33C1032.01 1023.07 1031 1021.97 1029.65 1021.97H940.44V1024.33C940.44 1025.59 941.45 1026.69 942.71 1026.69Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path893"/>
         <path
             class="change-color-in-svg"
             d="M940.44 1021.97C940.61 1017 943.81 1012.7 948.53 1011.02L977.34 1001C978.6 1000.58 979.87 1001.25 980.2 1002.52C981.46 1006.73 984.58 1015.75 990.73 1021.98H1029.65C1030.91 1021.98 1032.01 1022.99 1032.01 1024.34C1032.01 1025.69 1031 1026.7 1029.65 1026.7H942.71C941.45 1026.7 940.44 1025.69 940.44 1024.43V1021.97Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path895"/>
         <path
             d="M940.44 1021.97C940.61 1017 943.81 1012.7 948.53 1011.02L977.34 1001C978.6 1000.58 979.87 1001.25 980.2 1002.52C981.46 1006.73 984.58 1015.75 990.73 1021.98H1029.65C1030.91 1021.98 1032.01 1022.99 1032.01 1024.34C1032.01 1025.69 1031 1026.7 1029.65 1026.7H942.71C941.45 1026.7 940.44 1025.69 940.44 1024.43V1021.97Z"
@@ -180,7 +180,7 @@
         <path
             class="change-color-in-svg"
             d="M999.36 763.7L1016.21 647.62C1017.98 635.66 1026.82 625.97 1038.53 623.19L1083.6 612.49L1129.01 612.91L1170.96 622.93C1185.87 626.47 1195.56 640.87 1193.28 656.04L1188.39 688.22L1180.13 706.08C1179.71 707.09 1179.46 708.1 1179.2 709.11L1166.33 763.78L999.36 763.7Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path907"/>
         <path
             d="M1040.5 675.789L1144.26 679.959L1142.05 701.389L1038.39 696.669L1040.5 675.789Z"
@@ -226,12 +226,12 @@
         <path
             class="change-color-in-svg"
             d="M1067.18 736.321L1139.54 725.711L1144.26 679.881L1189.41 682.151L1180.23 740.701C1178.46 751.741 1169.03 759.821 1157.91 759.821H1075.61L1067.18 736.321Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path927"/>
         <path
             class="change-color-in-svg"
             d="M1057.32 736.321L1139.54 725.791L1144.26 679.961L1189.41 682.231L1180.23 740.781C1178.46 751.821 1169.03 759.901 1157.91 759.901H1065.5L1057.32 736.321Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path929"/>
         <path
             d="M1065.49 735.311L1057.32 736.321L1065.41 759.831H1075.52L1065.49 735.311Z"
@@ -389,7 +389,7 @@
         <path
             class="change-color-in-svg"
             d="M 990.96,534.87 H 589.78 c -0.74,0 -1.34,-0.6 -1.34,-1.34 V 282.99 c 0,-0.74 0.6,-1.34 1.34,-1.34 h 401.18 c 0.74,0 1.34,0.6 1.34,1.34 v 250.53 c 0,0.75 -0.6,1.35 -1.34,1.35 z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1001"/>
         <path
             d="M 990.96,534.87 H 589.78 c -0.74,0 -1.34,-0.6 -1.34,-1.34 V 282.99 c 0,-0.74 0.6,-1.34 1.34,-1.34 h 401.18 c 0.74,0 1.34,0.6 1.34,1.34 v 250.53 c 0,0.75 -0.6,1.35 -1.34,1.35 z"
@@ -403,7 +403,7 @@
         <path
             class="change-color-in-svg"
             d="M 977.67,289.74 H 589.83 V 526.78 H 977.67 V 289.74 Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1007"/>
         <path
             d="M 977.67,289.74 H 692.42 v 237.04 h 285.25 z"
@@ -926,12 +926,12 @@
         <path
             class="change-color-in-svg"
             d="M412.6 629.28C413.77 629.25 420.9 629.03 425.91 633.71C446.82 653.25 467.39 649.78 473.22 627.77L477.9 628.039C477.9 628.039 480.79 639.96 488.93 658.52C490.23 661.48 495.53 673.93 495.53 673.93C502.8 693.07 492.45 705.93 492.45 705.93C491.56 707.38 491.03 708.879 490.96 710.549C490.96 710.549 490.1 746.36 495.98 764.13C498.18 770.79 506.24 790.5 506.24 790.5C506.24 790.5 456.57 792.1 436.35 801.39L405.02 815.74C394.9 820.44 384.19 810.59 387.92 800.01L389.69 795.07C396.37 776.57 409.44 756.97 408.33 737.46L406.28 692.9L384.69 678.099L382.9 664.9C385.51 635.98 408.56 629.38 412.6 629.28Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1245"/>
         <path
             class="change-color-in-svg"
             d="M442.02 779.17L442.55 778.75C441.5 777.43 441.74 775.42 443.05 774.38L442.63 773.85C441.31 774.9 439.3 774.66 438.26 773.35L437.73 773.77C438.78 775.09 438.54 777.1 437.23 778.14L437.65 778.67C438.98 777.5 440.99 777.73 442.02 779.17Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1247"/>
         <path
             d="M409.08 696.859C410.05 696.729 411.03 697.559 411.04 698.519C411.04 698.519 413.37 717.199 427.82 719.889C427.01 720.959 418.09 722.249 417.56 723.749C417.56 723.749 413.78 797.819 424.84 806.759L405.25 815.759C395.13 820.459 384.42 810.609 388.15 800.029L389.92 795.089C396.6 776.589 409.23 758.929 408.13 739.419L407.4 698.959C407.17 697.839 407.99 696.969 409.08 696.859Z"
@@ -941,7 +941,7 @@
         <path
             class="change-color-in-svg"
             d="M491.4 784.849L491.93 784.429C490.88 783.109 491.12 781.099 492.43 780.059L492.01 779.529C490.69 780.579 488.68 780.339 487.64 779.029L487.11 779.449C488.16 780.769 487.92 782.779 486.61 783.819L487.03 784.349C488.36 783.189 490.25 783.399 491.4 784.849Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1251"/>
         <path
             d="M492.33 705.92C490.2 708.74 487.31 710.78 484.08 711.83L490.08 716.77L490.85 710.54C490.85 710.53 491.04 707.8 492.33 705.92Z"
@@ -965,7 +965,7 @@
         <path
             class="change-color-in-svg"
             d="M382.9 664.869L371.06 758.189C371.98 763.679 375.75 768.419 381.02 770.469L438.26 793.099L468.3 763.999L401.76 746.289L421.55 673.939L382.9 664.869Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1261"/>
         <path
             d="M419.88 751.13L420.24 750.09L488.31 768.88L488.14 769.34L419.88 751.13Z"
@@ -1074,7 +1074,7 @@
         <path
             class="change-color-in-svg"
             d="M435.27 595C436.38 595.42 437.61 594.87 438.03 593.76C438.45 592.65 437.9 591.42 436.79 591C435.68 590.58 434.45 591.13 434.03 592.24C433.61 593.35 434.16 594.58 435.27 595Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1311"/>
         <path
             d="M436.48 594.819C435.13 594.689 434.31 593.489 434.4 592.249C434.46 591.759 434.63 591.319 434.86 591.029C434.25 591.309 433.88 591.929 433.74 592.639C433.54 593.839 434.4 594.919 435.64 595.009C436.13 595.069 436.54 594.969 436.89 594.719C436.82 594.949 436.71 594.909 436.48 594.819Z"
@@ -1113,7 +1113,7 @@
         <path
             class="change-color-in-svg"
             d="M477.9 628.039L483.78 628.459C488.6 628.799 492.34 632.819 492.34 637.649V668.649C492.33 668.649 480.28 639.049 477.9 628.039Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1327"/>
         <path
             d="M492.33 666.44C487.97 656.22 479.31 640.1 479.31 640.1L492.33 659.71V666.44Z"
@@ -1123,7 +1123,7 @@
         <path
             class="change-color-in-svg"
             d="M500.03 740.19L496.17 764.67C496.17 764.67 490.79 750.34 491.75 738.51L500.03 740.19Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1331"/>
         <path
             d="M496.17 764.67C490.45 750.09 491.8 738.51 491.8 738.51L494.3 739.02C494.3 739.02 493.7 744.13 493.64 750.09C493.6 754.28 496.17 764.67 496.17 764.67Z"
@@ -1342,17 +1342,17 @@
         <path
             class="change-color-in-svg"
             d="M313.15 888.809C313.15 888.809 313.29 857.459 340.67 855.539C340.8 855.549 343 883.199 313.15 888.809Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1439"/>
         <path
             class="change-color-in-svg"
             d="M247.44 882.1C247.44 882.1 240.05 852.26 207.6 860.74C207.61 860.61 213.77 882.51 247.44 882.1Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1441"/>
         <path
             class="change-color-in-svg"
             d="M282.62 894.291C282.62 894.291 292.34 868.831 269.75 855.551C269.89 855.551 260.04 880.601 282.62 894.291Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1443"/>
         <path
             d="M277.7 975.88H277.02C277.02 917.02 247.59 882.66 247.18 882.24L247.73 881.83C247.99 882.24 277.7 916.74 277.7 975.88Z"
@@ -1381,7 +1381,7 @@
         <path
             class="change-color-in-svg"
             d="M254.01 911.671C254.01 911.671 245.93 881.011 214.04 888.121C214.04 888.131 219.52 914.271 254.01 911.671Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1457"/>
         <path
             d="M254.01 911.671C254.01 911.671 245.93 881.011 214.04 888.121C214.04 888.131 219.52 914.271 254.01 911.671Z"
@@ -1391,12 +1391,12 @@
         <path
             class="change-color-in-svg"
             d="M270.44 943.161C270.44 943.161 264.96 921.391 235.67 928.511C235.67 928.511 245.25 950.281 270.44 943.161Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1461"/>
         <path
             class="change-color-in-svg"
             d="M290.29 928.919C290.29 928.919 293.03 894.699 328.76 890.449C328.62 890.589 330.4 923.989 290.29 928.919Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1463"/>
         <path
             d="M280.85 975.879H280.17C280.44 951.509 281.81 825.839 281.81 824.609H282.49C282.35 825.839 280.98 951.509 280.85 975.879Z"
@@ -1405,7 +1405,7 @@
         <path
             class="change-color-in-svg"
             d="M287.42 919.891C287.42 919.891 256.89 921.531 256.89 887.721C256.89 887.721 286.46 888.131 287.42 919.891Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1467"/>
         <path
             d="M287.42 919.891C287.42 919.891 256.89 921.531 256.89 887.721C256.89 887.721 286.46 888.131 287.42 919.891Z"
@@ -1415,7 +1415,7 @@
         <path
             class="change-color-in-svg"
             d="M316.16 932.889C316.16 932.889 324.51 909.619 350.66 915.499C350.66 915.639 346.28 935.079 316.16 932.889Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1471"/>
         <path
             d="M316.16 932.889C316.16 932.889 324.51 909.619 350.66 915.499C350.66 915.639 346.28 935.079 316.16 932.889Z"
@@ -1442,7 +1442,7 @@
         <path
             class="change-color-in-svg"
             d="M281.67 850.76C281.67 850.76 266.75 828.17 286.19 806.68C286.18 806.54 299.05 828.58 281.67 850.76Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1483"/>
         <path
             d="M281.67 850.76C281.67 850.76 266.75 828.17 286.19 806.68C286.18 806.54 299.05 828.58 281.67 850.76Z"
@@ -1452,7 +1452,7 @@
         <path
             class="change-color-in-svg"
             d="M295.22 896.069C295.22 896.069 278.79 861.159 308.09 839.529C308.09 839.669 328.35 871.289 295.22 896.069Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1487"/>
         <path
             d="M295.22 896.069C295.22 896.069 278.79 861.159 308.09 839.529C308.09 839.669 328.21 871.289 295.22 896.069Z"
@@ -1462,12 +1462,12 @@
         <path
             class="change-color-in-svg"
             d="M299.19 955.89C299.19 955.89 303.16 940.69 323.97 943.84C323.97 943.84 320.54 959.31 299.19 955.89Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1491"/>
         <path
             class="change-color-in-svg"
             d="M270.72 962.871C270.72 962.871 266.2 933.301 293.17 929.881C293.17 929.881 299.6 955.481 270.72 962.871Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1493"/>
         <path
             d="M270.72 962.871C270.72 962.871 266.2 933.301 293.17 929.881C293.17 929.881 299.6 955.481 270.72 962.871Z"
@@ -1477,7 +1477,7 @@
         <path
             class="change-color-in-svg"
             d="M215.41 836.38C215.41 836.38 231.7 834.74 234.85 850.34C234.71 850.34 220.06 852.12 215.41 836.38Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1497"/>
         <path
             d="M215.41 836.38C215.41 836.38 231.7 834.74 234.85 850.34C234.71 850.34 220.06 852.12 215.41 836.38Z"
@@ -1487,7 +1487,7 @@
         <path
             class="change-color-in-svg"
             d="M254.97 834.74C254.97 834.74 234.71 855.82 254.56 878.68C254.56 878.68 274.41 856.23 254.97 834.74Z"
-            fill="var(--brand-color)"
+            fill="var(--theme-color)"
             id="path1501"/>
         <path
             d="M254.97 834.74C254.97 834.74 234.71 855.82 254.56 878.68C254.56 878.68 274.41 856.23 254.97 834.74Z"
diff --git a/src/app/component/common/card/pricing-card/pricing-card.component.html b/src/app/component/common/card/pricing-card/pricing-card.component.html
index a9e60d61..0b3177f1 100644
--- a/src/app/component/common/card/pricing-card/pricing-card.component.html
+++ b/src/app/component/common/card/pricing-card/pricing-card.component.html
@@ -19,7 +19,7 @@
         </p>
       </div>
       <app-button1 (click)="routeToEvent(option.link ? option.link : URLS.maintenance)"
-                   [brandColor]="true" [icon]="'shopping-cart'" [isSleekButton]="true" [relativeToParent]="true"
+                   [themeColor]="'default'" [icon]="'shopping-cart'" [isSleekButton]="true" [relativeToParent]="true"
                    [text]="'Buy Now'">
       </app-button1>
     </div>
diff --git a/src/app/component/common/card/testimonial-card/testimonial-card.component.scss b/src/app/component/common/card/testimonial-card/testimonial-card.component.scss
index a0c471e8..054ac087 100644
--- a/src/app/component/common/card/testimonial-card/testimonial-card.component.scss
+++ b/src/app/component/common/card/testimonial-card/testimonial-card.component.scss
@@ -15,7 +15,7 @@
 }
 
 .icon-wrapper i {
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .footer-social {
@@ -32,7 +32,7 @@
 }
 
 .footer-social i {
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .reviewer {
diff --git a/src/app/component/common/card/testimonial-card/testimonial-card.component.ts b/src/app/component/common/card/testimonial-card/testimonial-card.component.ts
index 56881e6a..1400a3ad 100644
--- a/src/app/component/common/card/testimonial-card/testimonial-card.component.ts
+++ b/src/app/component/common/card/testimonial-card/testimonial-card.component.ts
@@ -33,7 +33,7 @@ export class TestimonialCardComponent {
       },
     },
     style: {
-      themeColor: 'var(--brand-color-lighter-2)',
+      themeColor: 'var(--theme-color-lighter-2)',
     },
   };
 
diff --git a/src/app/component/common/color-chart/color-chart.component.html b/src/app/component/common/color-chart/color-chart.component.html
index f9815fd5..9637ae45 100644
--- a/src/app/component/common/color-chart/color-chart.component.html
+++ b/src/app/component/common/color-chart/color-chart.component.html
@@ -3,19 +3,19 @@
   Less
 
   <svg width="10" height="10" class="d-inline-block">
-    <rect width="10" height="10" style="fill: var(--brand-color-lighter-4)"></rect>
+    <rect width="10" height="10" style="fill: var(--theme-color-lighter-4)"></rect>
   </svg>
   <svg width="10" height="10" class="d-inline-block">
-    <rect width="10" height="10" style="fill: var(--brand-color-lighter-3)"></rect>
+    <rect width="10" height="10" style="fill: var(--theme-color-lighter-3)"></rect>
   </svg>
   <svg width="10" height="10" class="d-inline-block">
-    <rect width="10" height="10" style="fill: var(--brand-color-lighter-2)"></rect>
+    <rect width="10" height="10" style="fill: var(--theme-color-lighter-2)"></rect>
   </svg>
   <svg width="10" height="10" class="d-inline-block">
-    <rect width="10" height="10" style="fill: var(--brand-color-lighter-1)"></rect>
+    <rect width="10" height="10" style="fill: var(--theme-color-lighter-1)"></rect>
   </svg>
   <svg width="10" height="10" class="d-inline-block">
-    <rect width="10" height="10" style="fill: var(--brand-color)"></rect>
+    <rect width="10" height="10" style="fill: var(--theme-color)"></rect>
   </svg>
 
   More
diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.html b/src/app/component/common/dropdown-menu/dropdown-menu.component.html
index e0704eb3..0b8a0bcd 100644
--- a/src/app/component/common/dropdown-menu/dropdown-menu.component.html
+++ b/src/app/component/common/dropdown-menu/dropdown-menu.component.html
@@ -19,7 +19,7 @@
           <h4>
             {{ productLine.name }}
           </h4>
-          <hr [style.border-color]="'var(--brand-color)'"/>
+          <hr [style.border-color]="'var(--theme-color)'"/>
           <p>
             {{ productLine.description }}
           </p>
diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.scss b/src/app/component/common/dropdown-menu/dropdown-menu.component.scss
index fb33212e..12f379b2 100644
--- a/src/app/component/common/dropdown-menu/dropdown-menu.component.scss
+++ b/src/app/component/common/dropdown-menu/dropdown-menu.component.scss
@@ -17,7 +17,7 @@
 
 .dropdown-content i {
   font-size: 15px;
-  color: var(--brand-color-lighter-2);
+  color: var(--theme-color-lighter-2);
 }
 
 .dropdown-top-menu {
@@ -84,7 +84,7 @@
 }
 
 .section-column .section-header h4 {
-  color: var(--brand-color);
+  color: var(--theme-color);
   font-weight: 500;
 }
 
@@ -107,7 +107,7 @@
   width: 25%;
   margin: 0 0 0 1px;
   border-style: solid;
-  border-color: var(--brand-color);
+  border-color: var(--theme-color);
 }
 
 .section-column-wrapper {
@@ -175,7 +175,7 @@
 @media (hover: hover) {
   .dropdown-item:hover {
     transition: .4s all ease-in-out;
-    background-color: var(--brand-color-lighter-8);
+    background-color: var(--theme-color-lighter-8);
   }
 
   .dropdown-item:hover img {
@@ -184,7 +184,7 @@
   }
 
   .dropdown-item:hover .dropdown-item-content > * {
-    color: var(--brand-color-darker-7);
+    color: var(--theme-color-darker-7);
   }
 }
 
@@ -254,10 +254,10 @@
   }
 
   .section-column::-webkit-scrollbar-track {
-    background-color: var(--brand-color-lighter-9);
+    background-color: var(--theme-color-lighter-9);
   }
 
   .section-column::-webkit-scrollbar-thumb {
-    background-color: var(--brand-color-lighter-3);
+    background-color: var(--theme-color-lighter-3);
   }
 }
diff --git a/src/app/component/common/rate-bar/rate-bar.component.html b/src/app/component/common/rate-bar/rate-bar.component.html
index c88ba08e..97d725cf 100644
--- a/src/app/component/common/rate-bar/rate-bar.component.html
+++ b/src/app/component/common/rate-bar/rate-bar.component.html
@@ -2,7 +2,7 @@
   <label *ngFor="let number of [1,2,3,4,5]"
          [class.rate-full]="value >= number"
          [class.rate-half]="value === number - 0.5" class="far fa-sm fa-star rate"
-         [style.color]="'var(--brand-color-lighter-' + number + ')'">
+         [style.color]="'var(--theme-color-lighter-' + number + ')'">
   </label>
   <p class="dim" style="margin-left: 5px; margin-top: 5px;">{{ formattedRateNumber }}</p>
 </div>
diff --git a/src/app/component/common/swiper-wrapper/swiper-wrapper.component.scss b/src/app/component/common/swiper-wrapper/swiper-wrapper.component.scss
index b95e9d0d..22701c26 100644
--- a/src/app/component/common/swiper-wrapper/swiper-wrapper.component.scss
+++ b/src/app/component/common/swiper-wrapper/swiper-wrapper.component.scss
@@ -55,7 +55,7 @@ app-swiper-wrapper {
 }
 
 .swiper-pagination-bullet-active {
-  background: var(--brand-color);
+  background: var(--theme-color);
 }
 
 /*
diff --git a/src/app/component/nav/common/bottom-nav/bottom-nav.component.scss b/src/app/component/nav/common/bottom-nav/bottom-nav.component.scss
index f78b2064..28ed675f 100644
--- a/src/app/component/nav/common/bottom-nav/bottom-nav.component.scss
+++ b/src/app/component/nav/common/bottom-nav/bottom-nav.component.scss
@@ -32,8 +32,8 @@
 }
 
 .login {
-  color: var(--brand-color);
-  border-bottom: var(--brand-color) 1px solid;
+  color: var(--theme-color);
+  border-bottom: var(--theme-color) 1px solid;
 }
 
 .bottom-nav a i {
@@ -42,9 +42,9 @@
 }
 
 .bottom-nav .contact {
-  color: var(--brand-color);
+  color: var(--theme-color);
   border-radius: 0;
-  border-bottom: var(--brand-color) 1px solid;
+  border-bottom: var(--theme-color) 1px solid;
 }
 
 .bottom-nav .contact span {
@@ -54,7 +54,7 @@
 .bottom-nav .contact:hover {
   color: white;
   border-radius: 3px;
-  background: var(--brand-color);
+  background: var(--theme-color);
 }
 
 @media only screen and (max-width: 999px) {
@@ -81,6 +81,6 @@
 
   .bottom-nav .login:hover {
     color: white;
-    background: var(--brand-color);
+    background: var(--theme-color);
   }
 }
diff --git a/src/app/component/nav/common/footer/footer.component.scss b/src/app/component/nav/common/footer/footer.component.scss
index 6f271be5..ef932545 100644
--- a/src/app/component/nav/common/footer/footer.component.scss
+++ b/src/app/component/nav/common/footer/footer.component.scss
@@ -71,11 +71,11 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .footer-social i {
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .footer.footer-hide-shadow {
@@ -183,7 +183,7 @@
   }
 
   .footer-brand-row .brand {
-    border-right: 1px solid var(--brand-color);
+    border-right: 1px solid var(--theme-color);
     padding: 0 10px;
   }
 
@@ -206,6 +206,6 @@
 
   .footer-link-content:hover {
     background: none;
-    color: var(--brand-color);
+    color: var(--theme-color);
   }
 }
diff --git a/src/app/component/nav/dashboard/dashboard-layout-top-nav/dashboard-layout-top-nav.component.scss b/src/app/component/nav/dashboard/dashboard-layout-top-nav/dashboard-layout-top-nav.component.scss
index bde5c229..0bbde2f8 100644
--- a/src/app/component/nav/dashboard/dashboard-layout-top-nav/dashboard-layout-top-nav.component.scss
+++ b/src/app/component/nav/dashboard/dashboard-layout-top-nav/dashboard-layout-top-nav.component.scss
@@ -44,11 +44,11 @@
 }
 
 .dashboard-layout-top-nav div input:focus {
-  border-bottom: 1px solid var(--brand-color);
+  border-bottom: 1px solid var(--theme-color);
 }
 
 .dashboard-layout-top-nav div input:focus + i {
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .dashboard-layout-top-nav a i {
@@ -93,7 +93,7 @@
   justify-content: center;
   align-items: center;
   border-bottom: 1px solid var(--darker-contrast);
-  background-color: var(--brand-color);
+  background-color: var(--theme-color);
   color: var(--darker-contrast);
 }
 
@@ -121,6 +121,6 @@
 
   .dashboard-layout-top-nav-search-results a:hover {
     background: var(--hover);
-    color: var(--brand-color);
+    color: var(--theme-color);
   }
 }
diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.scss b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.scss
index b10e56b2..8c337464 100644
--- a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.scss
+++ b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.scss
@@ -23,9 +23,9 @@
 }
 
 .top-nav .right-item-wrapper .contact {
-  color: var(--brand-color);
+  color: var(--theme-color);
   border-radius: 0;
-  border-bottom: var(--brand-color) 1px solid;
+  border-bottom: var(--theme-color) 1px solid;
 }
 
 .top-nav .brand > * {
@@ -72,7 +72,7 @@ app-dropdown-menu i {
   .top-nav .right-item-wrapper .contact:hover {
     color: white;
     border-radius: 3px;
-    background-color: var(--brand-color);
+    background-color: var(--theme-color);
   }
 
   .bottom-nav a:hover {
@@ -81,6 +81,6 @@ app-dropdown-menu i {
 
   .bottom-nav .right-item-wrapper .contact:hover {
     color: white;
-    background: var(--brand-color);
+    background: var(--theme-color);
   }
 }
diff --git a/src/app/component/popup/cookie-popup/cookie-popup.component.scss b/src/app/component/popup/cookie-popup/cookie-popup.component.scss
index ed4faa40..1d2b4bb9 100644
--- a/src/app/component/popup/cookie-popup/cookie-popup.component.scss
+++ b/src/app/component/popup/cookie-popup/cookie-popup.component.scss
@@ -26,7 +26,7 @@
 }
 
 .accept {
-  color: var(--brand-color);
+  color: var(--theme-color);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -34,12 +34,12 @@
 }
 
 .accept:hover {
-  background: var(--brand-color);
+  background: var(--theme-color);
   cursor: pointer;
 }
 
 .accept h5 {
-  color: var(--brand-color);
+  color: var(--theme-color);
   margin: 0;
   white-space: nowrap;
 }
@@ -77,7 +77,7 @@
   }
 
   .accept {
-    border-left: var(--brand-color) 1px solid;
+    border-left: var(--theme-color) 1px solid;
     padding-left: 50px;
     padding-right: 50px;
   }
diff --git a/src/app/component/timeline/timeline.component.html b/src/app/component/timeline/timeline.component.html
index 1ee65865..d29ed00e 100644
--- a/src/app/component/timeline/timeline.component.html
+++ b/src/app/component/timeline/timeline.component.html
@@ -4,7 +4,7 @@
       <app-card1
           [paddingContent]="false"
           [enableHeader]="false"
-          [bottomWrapperColor]="'var(--brand-color-lighter-5)'">
+          [bottomWrapperColor]="'var(--theme-color-lighter-5)'">
         <div custom-header class="head" [class]="!item.paragraph && !item.img ? 'bodyless' : ''">
           <div class="number-box">
             <span>{{ i + 1 }}</span>
diff --git a/src/app/component/timeline/timeline.component.scss b/src/app/component/timeline/timeline.component.scss
index 1f65d04e..4c52a351 100644
--- a/src/app/component/timeline/timeline.component.scss
+++ b/src/app/component/timeline/timeline.component.scss
@@ -64,7 +64,7 @@ $marker-dist: $card-width + math.div($outer-margin, 2) - math.div($marker-size,
     content: "";
     width: $marker-size;
     height: $marker-size;
-    background-color: var(--brand-color-lighter-2);
+    background-color: var(--theme-color-lighter-2);
     border: 5px solid var(--background-color);
     border-radius: $marker-size;
 
@@ -127,7 +127,7 @@ $counter: $items - $rows + 2;
     border-radius: 5px;
 
     .head::after {
-      border-color: var(--brand-color-lighter-2);
+      border-color: var(--theme-color-lighter-2);
     }
 
     position: relative;
@@ -179,7 +179,7 @@ $counter: $items - $rows + 2;
       display: flex;
       align-items: center;
       color: var(--color);
-      background-color: var(--brand-color-lighter-2);
+      background-color: var(--theme-color-lighter-2);
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
 
@@ -220,7 +220,7 @@ $counter: $items - $rows + 2;
       }
 
       .img-wrapper {
-//        background-color: var(--brand-color-lighter-8);
+//        background-color: var(--theme-color-lighter-8);
         padding: $inner-margin;
         width: 100%;
         min-height: 50%;
diff --git a/src/app/page/dashboard-layout/create-event/create-event.component.scss b/src/app/page/dashboard-layout/create-event/create-event.component.scss
index 89669a8a..bb9c1997 100644
--- a/src/app/page/dashboard-layout/create-event/create-event.component.scss
+++ b/src/app/page/dashboard-layout/create-event/create-event.component.scss
@@ -69,7 +69,7 @@
 }
 
 .section .section-footer .section-footer-icons span .button-active {
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .section .section-footer .section-footer-icons i {
@@ -218,7 +218,7 @@
     justify-content: center;
     align-items: center;
     border-bottom: 1px solid var(--darker-contrast);
-    background-color: var(--brand-color);
+    background-color: var(--theme-color);
     color: var(--darker-contrast);
   }
 
@@ -276,6 +276,6 @@
   }
 
   .section .section-footer .section-footer-icons span i:hover {
-    color: var(--brand-color);
+    color: var(--theme-color);
   }
 }
diff --git a/src/app/page/dashboard-layout/dashboard/dashboard.component.scss b/src/app/page/dashboard-layout/dashboard/dashboard.component.scss
index 5e47bea4..222c1831 100644
--- a/src/app/page/dashboard-layout/dashboard/dashboard.component.scss
+++ b/src/app/page/dashboard-layout/dashboard/dashboard.component.scss
@@ -30,7 +30,7 @@
 
 .follower-count, .following-count, .event-count {
   font-style: normal;
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .dashboard-page-events {
diff --git a/src/app/page/dashboard-layout/event/event.component.scss b/src/app/page/dashboard-layout/event/event.component.scss
index e0e7774d..e900d2f2 100644
--- a/src/app/page/dashboard-layout/event/event.component.scss
+++ b/src/app/page/dashboard-layout/event/event.component.scss
@@ -17,7 +17,7 @@
 }
 
 .attendees-name-area a {
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 h2, h3 {
diff --git a/src/app/page/dashboard-layout/learn/learn.component.scss b/src/app/page/dashboard-layout/learn/learn.component.scss
index 971e187f..3c84a0fc 100644
--- a/src/app/page/dashboard-layout/learn/learn.component.scss
+++ b/src/app/page/dashboard-layout/learn/learn.component.scss
@@ -140,6 +140,6 @@
   }
 
   .search-area i:hover {
-    border-color: var(--brand-color)
+    border-color: var(--theme-color)
   }
 }
diff --git a/src/app/page/dashboard-layout/my-profile/my-profile.component.html b/src/app/page/dashboard-layout/my-profile/my-profile.component.html
index dcc2c166..a9770f96 100644
--- a/src/app/page/dashboard-layout/my-profile/my-profile.component.html
+++ b/src/app/page/dashboard-layout/my-profile/my-profile.component.html
@@ -140,19 +140,19 @@ <h3 class="dim">No results found</h3>
         Less
 
         <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-4)"></rect>
+          <rect width="10" height="10" style="fill: var(--theme-color-lighter-4)"></rect>
         </svg>
         <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-3)"></rect>
+          <rect width="10" height="10" style="fill: var(--theme-color-lighter-3)"></rect>
         </svg>
         <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-2)"></rect>
+          <rect width="10" height="10" style="fill: var(--theme-color-lighter-2)"></rect>
         </svg>
         <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-1)"></rect>
+          <rect width="10" height="10" style="fill: var(--theme-color-lighter-1)"></rect>
         </svg>
         <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color)"></rect>
+          <rect width="10" height="10" style="fill: var(--theme-color)"></rect>
         </svg>
 
         More
diff --git a/src/app/page/dashboard-layout/my-profile/my-profile.component.scss b/src/app/page/dashboard-layout/my-profile/my-profile.component.scss
index 0b09f57f..1074b179 100644
--- a/src/app/page/dashboard-layout/my-profile/my-profile.component.scss
+++ b/src/app/page/dashboard-layout/my-profile/my-profile.component.scss
@@ -30,7 +30,7 @@
 
 .follower-count, .following-count, .event-count {
   font-style: normal;
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .color-chart {
@@ -44,7 +44,7 @@
 }
 
 .section-header i {
-  color: var(--brand-color);
+  color: var(--theme-color);
   margin-left: 15px;
 }
 
diff --git a/src/app/page/dashboard-layout/public-profile/public-profile.component.html b/src/app/page/dashboard-layout/public-profile/public-profile.component.html
index 3132b708..b0bac8dd 100644
--- a/src/app/page/dashboard-layout/public-profile/public-profile.component.html
+++ b/src/app/page/dashboard-layout/public-profile/public-profile.component.html
@@ -119,19 +119,19 @@
         Less
 
         <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-4)"></rect>
+          <rect width="10" height="10" style="fill: var(--theme-color-lighter-4)"></rect>
         </svg>
         <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-3)"></rect>
+          <rect width="10" height="10" style="fill: var(--theme-color-lighter-3)"></rect>
         </svg>
         <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-2)"></rect>
+          <rect width="10" height="10" style="fill: var(--theme-color-lighter-2)"></rect>
         </svg>
         <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-1)"></rect>
+          <rect width="10" height="10" style="fill: var(--theme-color-lighter-1)"></rect>
         </svg>
         <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color)"></rect>
+          <rect width="10" height="10" style="fill: var(--theme-color)"></rect>
         </svg>
 
         More
diff --git a/src/app/page/dashboard-layout/public-profile/public-profile.component.scss b/src/app/page/dashboard-layout/public-profile/public-profile.component.scss
index cd49c93d..5789986f 100644
--- a/src/app/page/dashboard-layout/public-profile/public-profile.component.scss
+++ b/src/app/page/dashboard-layout/public-profile/public-profile.component.scss
@@ -17,7 +17,7 @@
 
 .follower-count, .following-count, .event-count {
   font-style: normal;
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .follower-following-count-area {
diff --git a/src/app/page/dashboard-layout/side-content/side-content.component.html b/src/app/page/dashboard-layout/side-content/side-content.component.html
index e0895261..2c187557 100644
--- a/src/app/page/dashboard-layout/side-content/side-content.component.html
+++ b/src/app/page/dashboard-layout/side-content/side-content.component.html
@@ -7,7 +7,7 @@
                [paddingContent]="false" [shadow]="false" class="upcoming-card">
       <div body class="section">
         <p *ngIf="recommendedEvents?.length > 0">Explore Events</p>
-        <hr *ngIf="recommendedEvents?.length > 0" style="width: 100%; border: 1px solid var(--brand-color); margin-top: 5px;"/>
+        <hr *ngIf="recommendedEvents?.length > 0" style="width: 100%; border: 1px solid var(--theme-color); margin-top: 5px;"/>
         <a *ngFor="let event of recommendedEvents">
           <app-event-data (titleClicked)="openEventDetails($event)"
                                  [attendeeButton]="false"
@@ -34,7 +34,7 @@
           </app-event-data>
         </a>
         <p *ngIf="recommendedEventsByFollowingList?.length > 0">Followed Contributors</p>
-        <hr *ngIf="recommendedEventsByFollowingList?.length > 0" style="width: 100%; border: 1px solid var(--brand-color); margin-top: 5px;"/>
+        <hr *ngIf="recommendedEventsByFollowingList?.length > 0" style="width: 100%; border: 1px solid var(--theme-color); margin-top: 5px;"/>
         <a *ngFor="let event of recommendedEventsByFollowingList">
           <app-event-data (titleClicked)="openEventDetails($event)"
                                  [attendeeButton]="false"
diff --git a/src/app/page/landing-layout/home/home.component.scss b/src/app/page/landing-layout/home/home.component.scss
index 68c9b480..f3421029 100644
--- a/src/app/page/landing-layout/home/home.component.scss
+++ b/src/app/page/landing-layout/home/home.component.scss
@@ -35,7 +35,7 @@
 
 .product-line-header h4 {
   font-weight: normal;
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .feature img {
@@ -49,7 +49,7 @@
 }
 
 .feature-right .feature {
-  background-color: var(--brand-color-lighter-5);
+  background-color: var(--theme-color-lighter-5);
 }
 
 .feature-notes {
@@ -66,8 +66,8 @@
   padding: 10px 17px;
   display: inline-flex;
   align-items: center;
-  color: var(--brand-color);
-  border: 1px solid var(--brand-color);
+  color: var(--theme-color);
+  border: 1px solid var(--theme-color);
 }
 
 .register-wrapper a i {
@@ -91,7 +91,7 @@
 }
 
 .counter {
-  color: var(--brand-color);
+  color: var(--theme-color);
   font-weight: 400;
 }
 
@@ -99,7 +99,7 @@
   width: auto;
   margin: 5px 30px 0;
   padding-bottom: 9px;
-  border-bottom: 2px solid var(--brand-color-lighter-5);
+  border-bottom: 2px solid var(--theme-color-lighter-5);
 }
 
 .home-page .hero-content {
diff --git a/src/app/page/landing-layout/landing-layout.component.html b/src/app/page/landing-layout/landing-layout.component.html
index 6a035c10..28e8639f 100644
--- a/src/app/page/landing-layout/landing-layout.component.html
+++ b/src/app/page/landing-layout/landing-layout.component.html
@@ -6,7 +6,7 @@
     <div class="header-filler"></div>
     <div class="layers top-layer">
       <svg viewBox="0 0 1000 250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax slice">
-        <path d="M 0,250 1000,120 V 0 H 0 Z" style="fill: var(--brand-color-lighter-2);"></path>
+        <path d="M 0,250 1000,120 V 0 H 0 Z" style="fill: var(--theme-color-lighter-2);"></path>
       </svg>
     </div>
     <div class="landing-layout-page-content">
diff --git a/src/app/page/landing-layout/landing-layout.component.scss b/src/app/page/landing-layout/landing-layout.component.scss
index cbd27215..337dae82 100644
--- a/src/app/page/landing-layout/landing-layout.component.scss
+++ b/src/app/page/landing-layout/landing-layout.component.scss
@@ -32,7 +32,7 @@
 }
 
 .policy-content a {
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .landing-form-page {
diff --git a/src/app/page/landing-layout/login/login.component.html b/src/app/page/landing-layout/login/login.component.html
index e429c639..94437167 100644
--- a/src/app/page/landing-layout/login/login.component.html
+++ b/src/app/page/landing-layout/login/login.component.html
@@ -31,7 +31,7 @@
           </div>
         </div>
         <div class="section-submit">
-          <app-button1 [brandColor]="true" [text]="'LOG IN'"></app-button1>
+          <app-button1 [themeColor]="'default'" [text]="'LOG IN'"></app-button1>
           <p>
             Don't have an account?
             <a class="link" [routerLink]="URLS.signup">
diff --git a/src/app/page/landing-layout/maintenance/maintenance.component.html b/src/app/page/landing-layout/maintenance/maintenance.component.html
index 0f9b7e34..df53189a 100644
--- a/src/app/page/landing-layout/maintenance/maintenance.component.html
+++ b/src/app/page/landing-layout/maintenance/maintenance.component.html
@@ -7,7 +7,7 @@
       <h1>Under maintenance</h1>
     </div>
     <h3>Please check again later</h3>
-    <app-button1 [text]="'HOME'" [brandColor]="true" [isSleekButton]="true" (click)="router.navigate(['/'])">
+    <app-button1 [text]="'HOME'" [themeColor]="'default'" [isSleekButton]="true" (click)="router.navigate(['/'])">
     </app-button1>
   </div>
 </div>
diff --git a/src/app/page/landing-layout/maintenance/maintenance.component.scss b/src/app/page/landing-layout/maintenance/maintenance.component.scss
index 4a23ee47..a0397254 100644
--- a/src/app/page/landing-layout/maintenance/maintenance.component.scss
+++ b/src/app/page/landing-layout/maintenance/maintenance.component.scss
@@ -1,5 +1,5 @@
 .maintenance-content h3{
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .maintenance-content app-button1 {
diff --git a/src/app/page/landing-layout/not-found/not-found.component.html b/src/app/page/landing-layout/not-found/not-found.component.html
index f56151a5..06a0c445 100644
--- a/src/app/page/landing-layout/not-found/not-found.component.html
+++ b/src/app/page/landing-layout/not-found/not-found.component.html
@@ -7,7 +7,7 @@
       <h1>404 Page not found</h1>
     </div>
     <h3>Something went wrong!</h3>
-    <app-button1 [text]="'HOME'" [brandColor]="true" [isSleekButton]="true" (click)="router.navigate(['/'])">
+    <app-button1 [text]="'HOME'" [themeColor]="'default'" [isSleekButton]="true" (click)="router.navigate(['/'])">
     </app-button1>
   </div>
 </div>
diff --git a/src/app/page/landing-layout/not-found/not-found.component.scss b/src/app/page/landing-layout/not-found/not-found.component.scss
index 6fca7fca..4e53a66d 100644
--- a/src/app/page/landing-layout/not-found/not-found.component.scss
+++ b/src/app/page/landing-layout/not-found/not-found.component.scss
@@ -1,5 +1,5 @@
 .notfound-content h3 {
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .notfound-content app-button1 {
diff --git a/src/app/page/landing-layout/product/product.component.scss b/src/app/page/landing-layout/product/product.component.scss
index f17dc510..d8ce06da 100644
--- a/src/app/page/landing-layout/product/product.component.scss
+++ b/src/app/page/landing-layout/product/product.component.scss
@@ -37,7 +37,7 @@
 
 .product-line-header h4 {
   font-weight: normal;
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .feature img {
@@ -51,7 +51,7 @@
 }
 
 .feature-right .feature {
-  background-color: var(--brand-color-lighter-5);
+  background-color: var(--theme-color-lighter-5);
 }
 
 .feature-notes {
@@ -119,8 +119,8 @@
   padding: 10px 17px;
   display: inline-flex;
   align-items: center;
-  color: var(--brand-color);
-  border: 1px solid var(--brand-color);
+  color: var(--theme-color);
+  border: 1px solid var(--theme-color);
   margin-left: 1.5em;
   white-space: nowrap;
 }
@@ -146,7 +146,7 @@
 }
 
 .counter {
-  color: var(--brand-color);
+  color: var(--theme-color);
   font-weight: 400;
 }
 
diff --git a/src/app/page/landing-layout/sign-up-success/sign-up-success.component.scss b/src/app/page/landing-layout/sign-up-success/sign-up-success.component.scss
index 9e4377db..1fe75a43 100644
--- a/src/app/page/landing-layout/sign-up-success/sign-up-success.component.scss
+++ b/src/app/page/landing-layout/sign-up-success/sign-up-success.component.scss
@@ -1,4 +1,4 @@
 .sign-up-success-content span {
-  color: var(--brand-color);
+  color: var(--theme-color);
   font-weight: normal;
 }
diff --git a/src/app/page/landing-layout/sign-up/sign-up.component.html b/src/app/page/landing-layout/sign-up/sign-up.component.html
index 0fbb8f89..62c2c7d0 100644
--- a/src/app/page/landing-layout/sign-up/sign-up.component.html
+++ b/src/app/page/landing-layout/sign-up/sign-up.component.html
@@ -32,7 +32,7 @@
           </div>
         </div>
         <div class="section-submit">
-          <app-button1 [brandColor]="true" [text]="'CONTINUE'"></app-button1>
+          <app-button1 [themeColor]="'default'" [text]="'CONTINUE'"></app-button1>
           <p>
             <small class="dim">By signing up, you agree
               <a class="link" routerLink="{{URLS.terms}}" target="_blank" rel=noopener>Terms of Use</a>,
diff --git a/src/app/page/landing-layout/verify-account/verify-account.component.html b/src/app/page/landing-layout/verify-account/verify-account.component.html
index dd05cbd0..d583f2d5 100644
--- a/src/app/page/landing-layout/verify-account/verify-account.component.html
+++ b/src/app/page/landing-layout/verify-account/verify-account.component.html
@@ -10,12 +10,12 @@ <h1 *ngIf="!loading && !error">Account verified 🎉</h1>
     </div>
 
     <h3 *ngIf="!loading && !error">Please proceed with login</h3>
-    <app-button1 *ngIf="!loading && !error" [text]="'LOG IN'" [brandColor]="true" [isSleekButton]="true"
+    <app-button1 *ngIf="!loading && !error" [text]="'LOG IN'" [themeColor]="'default'" [isSleekButton]="true"
                  (click)="router.navigate([URLS.login])">
     </app-button1>
 
     <h3 *ngIf="!loading && error">Something went wrong!</h3>
-    <app-button1 *ngIf="!loading && error" [text]="'HOME'" [brandColor]="true" [isSleekButton]="true"
+    <app-button1 *ngIf="!loading && error" [text]="'HOME'" [themeColor]="'default'" [isSleekButton]="true"
                  (click)="router.navigate([URLS.root])">
     </app-button1>
   </div>
diff --git a/src/app/page/landing-layout/verify-account/verify-account.component.scss b/src/app/page/landing-layout/verify-account/verify-account.component.scss
index 1a9f4e65..4bf0ff9a 100644
--- a/src/app/page/landing-layout/verify-account/verify-account.component.scss
+++ b/src/app/page/landing-layout/verify-account/verify-account.component.scss
@@ -1,5 +1,5 @@
 .verify-account-content h3 {
-  color: var(--brand-color);
+  color: var(--theme-color);
 }
 
 .verify-account-content app-button1 {
diff --git a/src/app/page/splash-layout/callback/callback.component.scss b/src/app/page/splash-layout/callback/callback.component.scss
index 3173e4c8..5b0f1201 100644
--- a/src/app/page/splash-layout/callback/callback.component.scss
+++ b/src/app/page/splash-layout/callback/callback.component.scss
@@ -27,7 +27,7 @@
   content: "";
   width: 68px;
   height: 2px;
-  background: var(--brand-color);
+  background: var(--theme-color);
   position: absolute;
   left: -34px;
   animation: splash-loading-bar 1.5s infinite ease;
diff --git a/src/app/page/splash-layout/external/external.component.scss b/src/app/page/splash-layout/external/external.component.scss
index 49262eb7..7c18e1c8 100644
--- a/src/app/page/splash-layout/external/external.component.scss
+++ b/src/app/page/splash-layout/external/external.component.scss
@@ -23,7 +23,7 @@
   content: "";
   width: 68px;
   height: 2px;
-  background: var(--brand-color);
+  background: var(--theme-color);
   position: absolute;
   left: -34px;
   animation: splash-loading-bar 1.5s infinite ease;
diff --git a/src/app/service/theme/theme.service.ts b/src/app/service/theme/theme.service.ts
index 5af36f92..2ed618bf 100644
--- a/src/app/service/theme/theme.service.ts
+++ b/src/app/service/theme/theme.service.ts
@@ -29,25 +29,25 @@ export class ThemeService {
   private maxHeightMedia;
 
   colors = [
-    '--brand-color',
-    '--brand-color-lighter-1',
-    '--brand-color-lighter-2',
-    '--brand-color-lighter-3',
-    '--brand-color-lighter-4',
-    '--brand-color-lighter-5',
-    '--brand-color-lighter-6',
-    '--brand-color-lighter-7',
-    '--brand-color-lighter-8',
-    '--brand-color-lighter-9',
-    '--brand-color-darker-1',
-    '--brand-color-darker-2',
-    '--brand-color-darker-3',
-    '--brand-color-darker-4',
-    '--brand-color-darker-5',
-    '--brand-color-darker-6',
-    '--brand-color-darker-7',
-    '--brand-color-darker-8',
-    '--brand-color-darker-9'
+    '--theme-color',
+    '--theme-color-lighter-1',
+    '--theme-color-lighter-2',
+    '--theme-color-lighter-3',
+    '--theme-color-lighter-4',
+    '--theme-color-lighter-5',
+    '--theme-color-lighter-6',
+    '--theme-color-lighter-7',
+    '--theme-color-lighter-8',
+    '--theme-color-lighter-9',
+    '--theme-color-darker-1',
+    '--theme-color-darker-2',
+    '--theme-color-darker-3',
+    '--theme-color-darker-4',
+    '--theme-color-darker-5',
+    '--theme-color-darker-6',
+    '--theme-color-darker-7',
+    '--theme-color-darker-8',
+    '--theme-color-darker-9'
   ];
 
   constructor() {
diff --git a/src/styles/animation/animation.scss b/src/styles/animation/animation.scss
index 2fca8a33..1122429a 100644
--- a/src/styles/animation/animation.scss
+++ b/src/styles/animation/animation.scss
@@ -6,12 +6,12 @@
 @keyframes loading-bar {
   0% {
     left: calc(-100%);
-    background-color: var(--brand-color-lighter-4);
+    background-color: var(--theme-color-lighter-4);
   }
 
   100% {
     left: 100%;
-    background-color: var(--brand-color-lighter-2);
+    background-color: var(--theme-color-lighter-2);
   }
 }
 
diff --git a/src/styles/loading/loading.scss b/src/styles/loading/loading.scss
index 19a339dc..5de7efc5 100644
--- a/src/styles/loading/loading.scss
+++ b/src/styles/loading/loading.scss
@@ -13,7 +13,7 @@
     width: 50%;
     height: 4px;
     border-radius: 3px;
-    background-color: var(--brand-color-lighter-9);
+    background-color: var(--theme-color-lighter-9);
   }
 }
 
@@ -22,7 +22,7 @@
   width: 100%;
   height: 4px;
   position: fixed;
-  background-color: var(--brand-color-lighter-5);
+  background-color: var(--theme-color-lighter-5);
   box-shadow: 0 1px 3px 0 var(--shadow-darker);
   overflow: hidden;
   z-index: 12;
diff --git a/src/styles/rate/rate.scss b/src/styles/rate/rate.scss
index bb4ba4f5..f9ec64c9 100644
--- a/src/styles/rate/rate.scss
+++ b/src/styles/rate/rate.scss
@@ -62,23 +62,23 @@
 
   & input + label {
     &:nth-of-type(1):after {
-      color: var(--brand-color);
+      color: var(--theme-color);
     }
 
     &:nth-of-type(2):after {
-      color: var(--brand-color-lighter-1);
+      color: var(--theme-color-lighter-1);
     }
 
     &:nth-of-type(3):after {
-      color: var(--brand-color-lighter-2);
+      color: var(--theme-color-lighter-2);
     }
 
     &:nth-of-type(4):after {
-      color: var(--brand-color-lighter-3);
+      color: var(--theme-color-lighter-3);
     }
 
     &:nth-of-type(5):after {
-      color: var(--brand-color-lighter-4);
+      color: var(--theme-color-lighter-4);
     }
   }
 }
diff --git a/src/styles/ribbon/ribbon.scss b/src/styles/ribbon/ribbon.scss
index 35875c92..7aa8787c 100644
--- a/src/styles/ribbon/ribbon.scss
+++ b/src/styles/ribbon/ribbon.scss
@@ -37,7 +37,7 @@
     content: "";
     padding: .38em 0;
 
-    background-color: var(--brand-color);
+    background-color: var(--theme-color);
 
     /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
diff --git a/src/styles/styles.common.scss b/src/styles/styles.common.scss
index 784e165b..c65dec72 100644
--- a/src/styles/styles.common.scss
+++ b/src/styles/styles.common.scss
@@ -90,11 +90,11 @@ a {
 
 a.link {
 
-  color: var(--brand-color-lighter-2);
+  color: var(--theme-color-lighter-2);
   font-weight: normal;
 
   &:hover {
-    color: var(--brand-color);
+    color: var(--theme-color);
   }
 }
 
diff --git a/src/styles/theme/blue-theme/blue-theme.scss b/src/styles/theme/blue-theme/blue-theme.scss
index 95a1df40..acafeec0 100644
--- a/src/styles/theme/blue-theme/blue-theme.scss
+++ b/src/styles/theme/blue-theme/blue-theme.scss
@@ -1,29 +1,29 @@
 :root {
 
-  --brand-color-blue-theme: #4098d6;
-  --brand-color-default-theme: var(--brand-color-blue-theme);
-
-  --brand-color-blue-theme-lighter-1: #57abd8;
-  --brand-color-blue-theme-lighter-2: #67b7da;
-  --brand-color-blue-theme-lighter-3: #78c1dc;
-  --brand-color-blue-theme-lighter-4: #84c2dc;
-  --brand-color-blue-theme-lighter-5: #8cbedd;
-  --brand-color-blue-theme-lighter-6: #acd5e6;
-  --brand-color-blue-theme-lighter-7: #bedfeb;
-  --brand-color-blue-theme-lighter-8: #d9eef3;
-  --brand-color-blue-theme-lighter-9: #f0f8fa;
-
-  --brand-color-blue-theme-darker-1: #4a9fc4;
-  --brand-color-blue-theme-darker-2: #498db2;
-  --brand-color-blue-theme-darker-3: #4a7895;
-  --brand-color-blue-theme-darker-4: #4a7785;
-  --brand-color-blue-theme-darker-5: #415867;
-  --brand-color-blue-theme-darker-6: #475a64;
-  --brand-color-blue-theme-darker-7: #445058;
-  --brand-color-blue-theme-darker-8: #41484d;
-  --brand-color-blue-theme-darker-9: #404142;
-
-  --brand-blue-theme-background: #1e7aab;
+  --theme-color-blue-theme: #4098d6;
+  --theme-color-default-theme: var(--theme-color-blue-theme);
+
+  --theme-color-blue-theme-lighter-1: #57abd8;
+  --theme-color-blue-theme-lighter-2: #67b7da;
+  --theme-color-blue-theme-lighter-3: #78c1dc;
+  --theme-color-blue-theme-lighter-4: #84c2dc;
+  --theme-color-blue-theme-lighter-5: #8cbedd;
+  --theme-color-blue-theme-lighter-6: #acd5e6;
+  --theme-color-blue-theme-lighter-7: #bedfeb;
+  --theme-color-blue-theme-lighter-8: #d9eef3;
+  --theme-color-blue-theme-lighter-9: #f0f8fa;
+
+  --theme-color-blue-theme-darker-1: #4a9fc4;
+  --theme-color-blue-theme-darker-2: #498db2;
+  --theme-color-blue-theme-darker-3: #4a7895;
+  --theme-color-blue-theme-darker-4: #4a7785;
+  --theme-color-blue-theme-darker-5: #415867;
+  --theme-color-blue-theme-darker-6: #475a64;
+  --theme-color-blue-theme-darker-7: #445058;
+  --theme-color-blue-theme-darker-8: #41484d;
+  --theme-color-blue-theme-darker-9: #404142;
+
+  --theme-blue-theme-background: #1e7aab;
 
   --hover-blue-theme-lighter: rgba(64, 152, 214, 0.3);
   --hover-blue-theme-darker: rgba(27, 67, 88, 0.6);
@@ -31,54 +31,54 @@
 
 :root .blue-theme, .light-theme.blue-theme {
 
-  --brand-color: var(--brand-color-blue-theme);
-
-  --brand-color-lighter-1: var(--brand-color-blue-theme-lighter-1);
-  --brand-color-lighter-2: var(--brand-color-blue-theme-lighter-2);
-  --brand-color-lighter-3: var(--brand-color-blue-theme-lighter-3);
-  --brand-color-lighter-4: var(--brand-color-blue-theme-lighter-4);
-  --brand-color-lighter-5: var(--brand-color-blue-theme-lighter-5);
-  --brand-color-lighter-6: var(--brand-color-blue-theme-lighter-6);
-  --brand-color-lighter-7: var(--brand-color-blue-theme-lighter-7);
-  --brand-color-lighter-8: var(--brand-color-blue-theme-lighter-8);
-  --brand-color-lighter-9: var(--brand-color-blue-theme-lighter-9);
-
-  --brand-color-darker-1: var(--brand-color-blue-theme-darker-1);
-  --brand-color-darker-2: var(--brand-color-blue-theme-darker-2);
-  --brand-color-darker-3: var(--brand-color-blue-theme-darker-3);
-  --brand-color-darker-4: var(--brand-color-blue-theme-darker-4);
-  --brand-color-darker-5: var(--brand-color-blue-theme-darker-5);
-  --brand-color-darker-6: var(--brand-color-blue-theme-darker-6);
-  --brand-color-darker-7: var(--brand-color-blue-theme-darker-7);
-  --brand-color-darker-8: var(--brand-color-blue-theme-darker-8);
-  --brand-color-darker-9: var(--brand-color-blue-theme-darker-9);
+  --theme-color: var(--theme-color-blue-theme);
+
+  --theme-color-lighter-1: var(--theme-color-blue-theme-lighter-1);
+  --theme-color-lighter-2: var(--theme-color-blue-theme-lighter-2);
+  --theme-color-lighter-3: var(--theme-color-blue-theme-lighter-3);
+  --theme-color-lighter-4: var(--theme-color-blue-theme-lighter-4);
+  --theme-color-lighter-5: var(--theme-color-blue-theme-lighter-5);
+  --theme-color-lighter-6: var(--theme-color-blue-theme-lighter-6);
+  --theme-color-lighter-7: var(--theme-color-blue-theme-lighter-7);
+  --theme-color-lighter-8: var(--theme-color-blue-theme-lighter-8);
+  --theme-color-lighter-9: var(--theme-color-blue-theme-lighter-9);
+
+  --theme-color-darker-1: var(--theme-color-blue-theme-darker-1);
+  --theme-color-darker-2: var(--theme-color-blue-theme-darker-2);
+  --theme-color-darker-3: var(--theme-color-blue-theme-darker-3);
+  --theme-color-darker-4: var(--theme-color-blue-theme-darker-4);
+  --theme-color-darker-5: var(--theme-color-blue-theme-darker-5);
+  --theme-color-darker-6: var(--theme-color-blue-theme-darker-6);
+  --theme-color-darker-7: var(--theme-color-blue-theme-darker-7);
+  --theme-color-darker-8: var(--theme-color-blue-theme-darker-8);
+  --theme-color-darker-9: var(--theme-color-blue-theme-darker-9);
 
   --hover: var(--hover-blue-theme-lighter);
 }
 
 @mixin blue-theme-dark-mode {
 
-  --brand-color: var(--brand-color-blue-theme);
-
-  --brand-color-lighter-1: var(--brand-color-blue-theme-darker-1);
-  --brand-color-lighter-2: var(--brand-color-blue-theme-darker-2);
-  --brand-color-lighter-3: var(--brand-color-blue-theme-darker-3);
-  --brand-color-lighter-4: var(--brand-color-blue-theme-darker-4);
-  --brand-color-lighter-5: var(--brand-color-blue-theme-darker-5);
-  --brand-color-lighter-6: var(--brand-color-blue-theme-darker-6);
-  --brand-color-lighter-7: var(--brand-color-blue-theme-darker-7);
-  --brand-color-lighter-8: var(--brand-color-blue-theme-darker-8);
-  --brand-color-lighter-9: var(--brand-color-blue-theme-darker-9);
-
-  --brand-color-darker-1: var(--brand-color-blue-theme-lighter-1);
-  --brand-color-darker-2: var(--brand-color-blue-theme-lighter-2);
-  --brand-color-darker-3: var(--brand-color-blue-theme-lighter-3);
-  --brand-color-darker-4: var(--brand-color-blue-theme-lighter-4);
-  --brand-color-darker-5: var(--brand-color-blue-theme-lighter-5);
-  --brand-color-darker-6: var(--brand-color-blue-theme-lighter-6);
-  --brand-color-darker-7: var(--brand-color-blue-theme-lighter-7);
-  --brand-color-darker-8: var(--brand-color-blue-theme-lighter-8);
-  --brand-color-darker-9: var(--brand-color-blue-theme-lighter-9);
+  --theme-color: var(--theme-color-blue-theme);
+
+  --theme-color-lighter-1: var(--theme-color-blue-theme-darker-1);
+  --theme-color-lighter-2: var(--theme-color-blue-theme-darker-2);
+  --theme-color-lighter-3: var(--theme-color-blue-theme-darker-3);
+  --theme-color-lighter-4: var(--theme-color-blue-theme-darker-4);
+  --theme-color-lighter-5: var(--theme-color-blue-theme-darker-5);
+  --theme-color-lighter-6: var(--theme-color-blue-theme-darker-6);
+  --theme-color-lighter-7: var(--theme-color-blue-theme-darker-7);
+  --theme-color-lighter-8: var(--theme-color-blue-theme-darker-8);
+  --theme-color-lighter-9: var(--theme-color-blue-theme-darker-9);
+
+  --theme-color-darker-1: var(--theme-color-blue-theme-lighter-1);
+  --theme-color-darker-2: var(--theme-color-blue-theme-lighter-2);
+  --theme-color-darker-3: var(--theme-color-blue-theme-lighter-3);
+  --theme-color-darker-4: var(--theme-color-blue-theme-lighter-4);
+  --theme-color-darker-5: var(--theme-color-blue-theme-lighter-5);
+  --theme-color-darker-6: var(--theme-color-blue-theme-lighter-6);
+  --theme-color-darker-7: var(--theme-color-blue-theme-lighter-7);
+  --theme-color-darker-8: var(--theme-color-blue-theme-lighter-8);
+  --theme-color-darker-9: var(--theme-color-blue-theme-lighter-9);
 
   --hover: var(--hover-blue-theme-darker);
 }
diff --git a/src/styles/theme/green-theme/green-theme.scss b/src/styles/theme/green-theme/green-theme.scss
index 9da8ed15..1d0433ba 100644
--- a/src/styles/theme/green-theme/green-theme.scss
+++ b/src/styles/theme/green-theme/green-theme.scss
@@ -1,28 +1,28 @@
 :root {
-  --brand-color-green-theme: #43b043;
-  --brand-color-default-theme: var(--brand-color-green-theme);
-
-  --brand-color-green-theme-lighter-1: #64be65;
-  --brand-color-green-theme-lighter-2: #7ec87e;
-  --brand-color-green-theme-lighter-3: #a0d69f;
-  --brand-color-green-theme-lighter-4: #b9e1ba;
-  --brand-color-green-theme-lighter-5: #c9e8c9;
-  --brand-color-green-theme-lighter-6: #d5ecd5;
-  --brand-color-green-theme-lighter-7: #dff1df;
-  --brand-color-green-theme-lighter-8: #eaf6ea;
-  --brand-color-green-theme-lighter-9: #f7fbf8;
-
-  --brand-color-green-theme-darker-1: #51a951;
-  --brand-color-green-theme-darker-2: #579c57;
-  --brand-color-green-theme-darker-3: #5e8c5e;
-  --brand-color-green-theme-darker-4: #657f65;
-  --brand-color-green-theme-darker-5: #617061;
-  --brand-color-green-theme-darker-6: #616c61;
-  --brand-color-green-theme-darker-7: #586358;
-  --brand-color-green-theme-darker-8: #4e544d;
-  --brand-color-green-theme-darker-9: #444644;
-
-  --brand-green-theme-background: #5cb05c;
+  --theme-color-green-theme: #43b043;
+  --theme-color-default-theme: var(--theme-color-green-theme);
+
+  --theme-color-green-theme-lighter-1: #64be65;
+  --theme-color-green-theme-lighter-2: #7ec87e;
+  --theme-color-green-theme-lighter-3: #a0d69f;
+  --theme-color-green-theme-lighter-4: #b9e1ba;
+  --theme-color-green-theme-lighter-5: #c9e8c9;
+  --theme-color-green-theme-lighter-6: #d5ecd5;
+  --theme-color-green-theme-lighter-7: #dff1df;
+  --theme-color-green-theme-lighter-8: #eaf6ea;
+  --theme-color-green-theme-lighter-9: #f7fbf8;
+
+  --theme-color-green-theme-darker-1: #51a951;
+  --theme-color-green-theme-darker-2: #579c57;
+  --theme-color-green-theme-darker-3: #5e8c5e;
+  --theme-color-green-theme-darker-4: #657f65;
+  --theme-color-green-theme-darker-5: #617061;
+  --theme-color-green-theme-darker-6: #616c61;
+  --theme-color-green-theme-darker-7: #586358;
+  --theme-color-green-theme-darker-8: #4e544d;
+  --theme-color-green-theme-darker-9: #444644;
+
+  --theme-green-theme-background: #5cb05c;
 
   --hover-green-theme-lighter: rgba(67, 176, 67, 0.3);
   --hover-green-theme-darker: rgba(28, 76, 28, 0.6);
@@ -30,54 +30,54 @@
 
 :root .green-theme, .light-theme.green-theme {
 
-  --brand-color: var(--brand-color-green-theme);
-
-  --brand-color-lighter-1: var(--brand-color-green-theme-lighter-1);
-  --brand-color-lighter-2: var(--brand-color-green-theme-lighter-2);
-  --brand-color-lighter-3: var(--brand-color-green-theme-lighter-3);
-  --brand-color-lighter-4: var(--brand-color-green-theme-lighter-4);
-  --brand-color-lighter-5: var(--brand-color-green-theme-lighter-5);
-  --brand-color-lighter-6: var(--brand-color-green-theme-lighter-6);
-  --brand-color-lighter-7: var(--brand-color-green-theme-lighter-7);
-  --brand-color-lighter-8: var(--brand-color-green-theme-lighter-8);
-  --brand-color-lighter-9: var(--brand-color-green-theme-lighter-9);
-
-  --brand-color-darker-1: var(--brand-color-green-theme-darker-1);
-  --brand-color-darker-2: var(--brand-color-green-theme-darker-2);
-  --brand-color-darker-3: var(--brand-color-green-theme-darker-3);
-  --brand-color-darker-4: var(--brand-color-green-theme-darker-4);
-  --brand-color-darker-5: var(--brand-color-green-theme-darker-5);
-  --brand-color-darker-6: var(--brand-color-green-theme-darker-6);
-  --brand-color-darker-7: var(--brand-color-green-theme-darker-7);
-  --brand-color-darker-8: var(--brand-color-green-theme-darker-8);
-  --brand-color-darker-9: var(--brand-color-green-theme-darker-9);
+  --theme-color: var(--theme-color-green-theme);
+
+  --theme-color-lighter-1: var(--theme-color-green-theme-lighter-1);
+  --theme-color-lighter-2: var(--theme-color-green-theme-lighter-2);
+  --theme-color-lighter-3: var(--theme-color-green-theme-lighter-3);
+  --theme-color-lighter-4: var(--theme-color-green-theme-lighter-4);
+  --theme-color-lighter-5: var(--theme-color-green-theme-lighter-5);
+  --theme-color-lighter-6: var(--theme-color-green-theme-lighter-6);
+  --theme-color-lighter-7: var(--theme-color-green-theme-lighter-7);
+  --theme-color-lighter-8: var(--theme-color-green-theme-lighter-8);
+  --theme-color-lighter-9: var(--theme-color-green-theme-lighter-9);
+
+  --theme-color-darker-1: var(--theme-color-green-theme-darker-1);
+  --theme-color-darker-2: var(--theme-color-green-theme-darker-2);
+  --theme-color-darker-3: var(--theme-color-green-theme-darker-3);
+  --theme-color-darker-4: var(--theme-color-green-theme-darker-4);
+  --theme-color-darker-5: var(--theme-color-green-theme-darker-5);
+  --theme-color-darker-6: var(--theme-color-green-theme-darker-6);
+  --theme-color-darker-7: var(--theme-color-green-theme-darker-7);
+  --theme-color-darker-8: var(--theme-color-green-theme-darker-8);
+  --theme-color-darker-9: var(--theme-color-green-theme-darker-9);
 
   --hover: var(--hover-green-theme-lighter);
 }
 
 @mixin green-theme-dark-mode {
 
-  --brand-color: var(--brand-color-green-theme);
-
-  --brand-color-lighter-1: var(--brand-color-green-theme-darker-1);
-  --brand-color-lighter-2: var(--brand-color-green-theme-darker-2);
-  --brand-color-lighter-3: var(--brand-color-green-theme-darker-3);
-  --brand-color-lighter-4: var(--brand-color-green-theme-darker-4);
-  --brand-color-lighter-5: var(--brand-color-green-theme-darker-5);
-  --brand-color-lighter-6: var(--brand-color-green-theme-darker-6);
-  --brand-color-lighter-7: var(--brand-color-green-theme-darker-7);
-  --brand-color-lighter-8: var(--brand-color-green-theme-darker-8);
-  --brand-color-lighter-9: var(--brand-color-green-theme-darker-9);
-
-  --brand-color-darker-1: var(--brand-color-green-theme-lighter-1);
-  --brand-color-darker-2: var(--brand-color-green-theme-lighter-2);
-  --brand-color-darker-3: var(--brand-color-green-theme-lighter-3);
-  --brand-color-darker-4: var(--brand-color-green-theme-lighter-4);
-  --brand-color-darker-5: var(--brand-color-green-theme-lighter-5);
-  --brand-color-darker-6: var(--brand-color-green-theme-lighter-6);
-  --brand-color-darker-7: var(--brand-color-green-theme-lighter-7);
-  --brand-color-darker-8: var(--brand-color-green-theme-lighter-8);
-  --brand-color-darker-9: var(--brand-color-green-theme-lighter-9);
+  --theme-color: var(--theme-color-green-theme);
+
+  --theme-color-lighter-1: var(--theme-color-green-theme-darker-1);
+  --theme-color-lighter-2: var(--theme-color-green-theme-darker-2);
+  --theme-color-lighter-3: var(--theme-color-green-theme-darker-3);
+  --theme-color-lighter-4: var(--theme-color-green-theme-darker-4);
+  --theme-color-lighter-5: var(--theme-color-green-theme-darker-5);
+  --theme-color-lighter-6: var(--theme-color-green-theme-darker-6);
+  --theme-color-lighter-7: var(--theme-color-green-theme-darker-7);
+  --theme-color-lighter-8: var(--theme-color-green-theme-darker-8);
+  --theme-color-lighter-9: var(--theme-color-green-theme-darker-9);
+
+  --theme-color-darker-1: var(--theme-color-green-theme-lighter-1);
+  --theme-color-darker-2: var(--theme-color-green-theme-lighter-2);
+  --theme-color-darker-3: var(--theme-color-green-theme-lighter-3);
+  --theme-color-darker-4: var(--theme-color-green-theme-lighter-4);
+  --theme-color-darker-5: var(--theme-color-green-theme-lighter-5);
+  --theme-color-darker-6: var(--theme-color-green-theme-lighter-6);
+  --theme-color-darker-7: var(--theme-color-green-theme-lighter-7);
+  --theme-color-darker-8: var(--theme-color-green-theme-lighter-8);
+  --theme-color-darker-9: var(--theme-color-green-theme-lighter-9);
 
   --hover: var(--hover-green-theme-darker);
 }
diff --git a/src/styles/theme/red-theme/red-theme.scss b/src/styles/theme/red-theme/red-theme.scss
index 636f7211..71c110b1 100644
--- a/src/styles/theme/red-theme/red-theme.scss
+++ b/src/styles/theme/red-theme/red-theme.scss
@@ -1,28 +1,28 @@
 :root {
-  --brand-color-red-theme: #d56666;
-  --brand-color-default-theme: var(--brand-color-red-theme);
-
-  --brand-color-red-theme-lighter-1: #d87879;
-  --brand-color-red-theme-lighter-2: #db8281;
-  --brand-color-red-theme-lighter-3: #dc8e8e;
-  --brand-color-red-theme-lighter-4: #e09b9b;
-  --brand-color-red-theme-lighter-5: #e09f9f;
-  --brand-color-red-theme-lighter-6: #e8b7b8;
-  --brand-color-red-theme-lighter-7: #edc7c8;
-  --brand-color-red-theme-lighter-8: #f5dfde;
-  --brand-color-red-theme-lighter-9: #fcf3f4;
-
-  --brand-color-red-theme-darker-1: #c56869;
-  --brand-color-red-theme-darker-2: #b26565;
-  --brand-color-red-theme-darker-3: #9d6060;
-  --brand-color-red-theme-darker-4: #855b5a;
-  --brand-color-red-theme-darker-5: #704f4f;
-  --brand-color-red-theme-darker-6: #644f50;
-  --brand-color-red-theme-darker-7: #5f4d4d;
-  --brand-color-red-theme-darker-8: #514647;
-  --brand-color-red-theme-darker-9: #424141;
-
-  --brand-red-theme-background: #b74d4d;
+  --theme-color-red-theme: #d56666;
+  --theme-color-default-theme: var(--theme-color-red-theme);
+
+  --theme-color-red-theme-lighter-1: #d87879;
+  --theme-color-red-theme-lighter-2: #db8281;
+  --theme-color-red-theme-lighter-3: #dc8e8e;
+  --theme-color-red-theme-lighter-4: #e09b9b;
+  --theme-color-red-theme-lighter-5: #e09f9f;
+  --theme-color-red-theme-lighter-6: #e8b7b8;
+  --theme-color-red-theme-lighter-7: #edc7c8;
+  --theme-color-red-theme-lighter-8: #f5dfde;
+  --theme-color-red-theme-lighter-9: #fcf3f4;
+
+  --theme-color-red-theme-darker-1: #c56869;
+  --theme-color-red-theme-darker-2: #b26565;
+  --theme-color-red-theme-darker-3: #9d6060;
+  --theme-color-red-theme-darker-4: #855b5a;
+  --theme-color-red-theme-darker-5: #704f4f;
+  --theme-color-red-theme-darker-6: #644f50;
+  --theme-color-red-theme-darker-7: #5f4d4d;
+  --theme-color-red-theme-darker-8: #514647;
+  --theme-color-red-theme-darker-9: #424141;
+
+  --theme-red-theme-background: #b74d4d;
 
   --hover-red-theme-lighter: rgba(213, 102, 102, 0.3);
   --hover-red-theme-darker: rgba(105, 74, 74, 0.7);
@@ -30,54 +30,54 @@
 
 :root .red-theme, .light-theme.red-theme {
 
-  --brand-color: var(--brand-color-red-theme);
-
-  --brand-color-lighter-1: var(--brand-color-red-theme-lighter-1);
-  --brand-color-lighter-2: var(--brand-color-red-theme-lighter-2);
-  --brand-color-lighter-3: var(--brand-color-red-theme-lighter-3);
-  --brand-color-lighter-4: var(--brand-color-red-theme-lighter-4);
-  --brand-color-lighter-5: var(--brand-color-red-theme-lighter-5);
-  --brand-color-lighter-6: var(--brand-color-red-theme-lighter-6);
-  --brand-color-lighter-7: var(--brand-color-red-theme-lighter-7);
-  --brand-color-lighter-8: var(--brand-color-red-theme-lighter-8);
-  --brand-color-lighter-9: var(--brand-color-red-theme-lighter-9);
-
-  --brand-color-darker-1: var(--brand-color-red-theme-darker-1);
-  --brand-color-darker-2: var(--brand-color-red-theme-darker-2);
-  --brand-color-darker-3: var(--brand-color-red-theme-darker-3);
-  --brand-color-darker-4: var(--brand-color-red-theme-darker-4);
-  --brand-color-darker-5: var(--brand-color-red-theme-darker-5);
-  --brand-color-darker-6: var(--brand-color-red-theme-darker-6);
-  --brand-color-darker-7: var(--brand-color-red-theme-darker-7);
-  --brand-color-darker-8: var(--brand-color-red-theme-darker-8);
-  --brand-color-darker-9: var(--brand-color-red-theme-darker-9);
+  --theme-color: var(--theme-color-red-theme);
+
+  --theme-color-lighter-1: var(--theme-color-red-theme-lighter-1);
+  --theme-color-lighter-2: var(--theme-color-red-theme-lighter-2);
+  --theme-color-lighter-3: var(--theme-color-red-theme-lighter-3);
+  --theme-color-lighter-4: var(--theme-color-red-theme-lighter-4);
+  --theme-color-lighter-5: var(--theme-color-red-theme-lighter-5);
+  --theme-color-lighter-6: var(--theme-color-red-theme-lighter-6);
+  --theme-color-lighter-7: var(--theme-color-red-theme-lighter-7);
+  --theme-color-lighter-8: var(--theme-color-red-theme-lighter-8);
+  --theme-color-lighter-9: var(--theme-color-red-theme-lighter-9);
+
+  --theme-color-darker-1: var(--theme-color-red-theme-darker-1);
+  --theme-color-darker-2: var(--theme-color-red-theme-darker-2);
+  --theme-color-darker-3: var(--theme-color-red-theme-darker-3);
+  --theme-color-darker-4: var(--theme-color-red-theme-darker-4);
+  --theme-color-darker-5: var(--theme-color-red-theme-darker-5);
+  --theme-color-darker-6: var(--theme-color-red-theme-darker-6);
+  --theme-color-darker-7: var(--theme-color-red-theme-darker-7);
+  --theme-color-darker-8: var(--theme-color-red-theme-darker-8);
+  --theme-color-darker-9: var(--theme-color-red-theme-darker-9);
 
   --hover: var(--hover-red-theme-lighter);
 }
 
 @mixin red-theme-dark-mode {
 
-  --brand-color: var(--brand-color-red-theme);
-
-  --brand-color-lighter-1: var(--brand-color-red-theme-darker-1);
-  --brand-color-lighter-2: var(--brand-color-red-theme-darker-2);
-  --brand-color-lighter-3: var(--brand-color-red-theme-darker-3);
-  --brand-color-lighter-4: var(--brand-color-red-theme-darker-4);
-  --brand-color-lighter-5: var(--brand-color-red-theme-darker-5);
-  --brand-color-lighter-6: var(--brand-color-red-theme-darker-6);
-  --brand-color-lighter-7: var(--brand-color-red-theme-darker-7);
-  --brand-color-lighter-8: var(--brand-color-red-theme-darker-8);
-  --brand-color-lighter-9: var(--brand-color-red-theme-darker-9);
-
-  --brand-color-darker-1: var(--brand-color-red-theme-lighter-1);
-  --brand-color-darker-2: var(--brand-color-red-theme-lighter-2);
-  --brand-color-darker-3: var(--brand-color-red-theme-lighter-3);
-  --brand-color-darker-4: var(--brand-color-red-theme-lighter-4);
-  --brand-color-darker-5: var(--brand-color-red-theme-lighter-5);
-  --brand-color-darker-6: var(--brand-color-red-theme-lighter-6);
-  --brand-color-darker-7: var(--brand-color-red-theme-lighter-7);
-  --brand-color-darker-8: var(--brand-color-red-theme-lighter-8);
-  --brand-color-darker-9: var(--brand-color-red-theme-lighter-9);
+  --theme-color: var(--theme-color-red-theme);
+
+  --theme-color-lighter-1: var(--theme-color-red-theme-darker-1);
+  --theme-color-lighter-2: var(--theme-color-red-theme-darker-2);
+  --theme-color-lighter-3: var(--theme-color-red-theme-darker-3);
+  --theme-color-lighter-4: var(--theme-color-red-theme-darker-4);
+  --theme-color-lighter-5: var(--theme-color-red-theme-darker-5);
+  --theme-color-lighter-6: var(--theme-color-red-theme-darker-6);
+  --theme-color-lighter-7: var(--theme-color-red-theme-darker-7);
+  --theme-color-lighter-8: var(--theme-color-red-theme-darker-8);
+  --theme-color-lighter-9: var(--theme-color-red-theme-darker-9);
+
+  --theme-color-darker-1: var(--theme-color-red-theme-lighter-1);
+  --theme-color-darker-2: var(--theme-color-red-theme-lighter-2);
+  --theme-color-darker-3: var(--theme-color-red-theme-lighter-3);
+  --theme-color-darker-4: var(--theme-color-red-theme-lighter-4);
+  --theme-color-darker-5: var(--theme-color-red-theme-lighter-5);
+  --theme-color-darker-6: var(--theme-color-red-theme-lighter-6);
+  --theme-color-darker-7: var(--theme-color-red-theme-lighter-7);
+  --theme-color-darker-8: var(--theme-color-red-theme-lighter-8);
+  --theme-color-darker-9: var(--theme-color-red-theme-lighter-9);
 
   --hover: var(--hover-red-theme-darker);
 }
diff --git a/src/styles/theme/yellow-theme/yellow-theme.scss b/src/styles/theme/yellow-theme/yellow-theme.scss
index 156e1161..07c6ffa8 100644
--- a/src/styles/theme/yellow-theme/yellow-theme.scss
+++ b/src/styles/theme/yellow-theme/yellow-theme.scss
@@ -1,28 +1,28 @@
 :root {
-  --brand-color-yellow-theme: #d6b140;
-  --brand-color-default-theme: var(--brand-color-yellow-theme);
-
-  --brand-color-yellow-theme-lighter-1: #d8b957;
-  --brand-color-yellow-theme-lighter-2: #dabd67;
-  --brand-color-yellow-theme-lighter-3: #dcc378;
-  --brand-color-yellow-theme-lighter-4: #dcc784;
-  --brand-color-yellow-theme-lighter-5: #ddc88c;
-  --brand-color-yellow-theme-lighter-6: #e6d6ac;
-  --brand-color-yellow-theme-lighter-7: #ebdfbe;
-  --brand-color-yellow-theme-lighter-8: #f3ecd9;
-  --brand-color-yellow-theme-lighter-9: #faf8f0;
-
-  --brand-color-yellow-theme-darker-1: #c4a64a;
-  --brand-color-yellow-theme-darker-2: #b29849;
-  --brand-color-yellow-theme-darker-3: #95824a;
-  --brand-color-yellow-theme-darker-4: #85754a;
-  --brand-color-yellow-theme-darker-5: #675d41;
-  --brand-color-yellow-theme-darker-6: #645e47;
-  --brand-color-yellow-theme-darker-7: #585344;
-  --brand-color-yellow-theme-darker-8: #4d4a41;
-  --brand-color-yellow-theme-darker-9: #424240;
-
-  --brand-yellow-theme-background: #ab881e;
+  --theme-color-yellow-theme: #d6b140;
+  --theme-color-default-theme: var(--theme-color-yellow-theme);
+
+  --theme-color-yellow-theme-lighter-1: #d8b957;
+  --theme-color-yellow-theme-lighter-2: #dabd67;
+  --theme-color-yellow-theme-lighter-3: #dcc378;
+  --theme-color-yellow-theme-lighter-4: #dcc784;
+  --theme-color-yellow-theme-lighter-5: #ddc88c;
+  --theme-color-yellow-theme-lighter-6: #e6d6ac;
+  --theme-color-yellow-theme-lighter-7: #ebdfbe;
+  --theme-color-yellow-theme-lighter-8: #f3ecd9;
+  --theme-color-yellow-theme-lighter-9: #faf8f0;
+
+  --theme-color-yellow-theme-darker-1: #c4a64a;
+  --theme-color-yellow-theme-darker-2: #b29849;
+  --theme-color-yellow-theme-darker-3: #95824a;
+  --theme-color-yellow-theme-darker-4: #85754a;
+  --theme-color-yellow-theme-darker-5: #675d41;
+  --theme-color-yellow-theme-darker-6: #645e47;
+  --theme-color-yellow-theme-darker-7: #585344;
+  --theme-color-yellow-theme-darker-8: #4d4a41;
+  --theme-color-yellow-theme-darker-9: #424240;
+
+  --theme-yellow-theme-background: #ab881e;
 
   --hover-yellow-theme-lighter: rgba(214, 177, 64, 0.3);
   --hover-yellow-theme-darker: rgba(214, 177, 64, 0.3);
@@ -30,54 +30,54 @@
 
 :root .yellow-theme, .light-theme.yellow-theme {
 
-  --brand-color: var(--brand-color-yellow-theme);
-
-  --brand-color-lighter-1: var(--brand-color-yellow-theme-lighter-1);
-  --brand-color-lighter-2: var(--brand-color-yellow-theme-lighter-2);
-  --brand-color-lighter-3: var(--brand-color-yellow-theme-lighter-3);
-  --brand-color-lighter-4: var(--brand-color-yellow-theme-lighter-4);
-  --brand-color-lighter-5: var(--brand-color-yellow-theme-lighter-5);
-  --brand-color-lighter-6: var(--brand-color-yellow-theme-lighter-6);
-  --brand-color-lighter-7: var(--brand-color-yellow-theme-lighter-7);
-  --brand-color-lighter-8: var(--brand-color-yellow-theme-lighter-8);
-  --brand-color-lighter-9: var(--brand-color-yellow-theme-lighter-9);
-
-  --brand-color-darker-1: var(--brand-color-yellow-theme-darker-1);
-  --brand-color-darker-2: var(--brand-color-yellow-theme-darker-2);
-  --brand-color-darker-3: var(--brand-color-yellow-theme-darker-3);
-  --brand-color-darker-4: var(--brand-color-yellow-theme-darker-4);
-  --brand-color-darker-5: var(--brand-color-yellow-theme-darker-5);
-  --brand-color-darker-6: var(--brand-color-yellow-theme-darker-6);
-  --brand-color-darker-7: var(--brand-color-yellow-theme-darker-7);
-  --brand-color-darker-8: var(--brand-color-yellow-theme-darker-8);
-  --brand-color-darker-9: var(--brand-color-yellow-theme-darker-9);
+  --theme-color: var(--theme-color-yellow-theme);
+
+  --theme-color-lighter-1: var(--theme-color-yellow-theme-lighter-1);
+  --theme-color-lighter-2: var(--theme-color-yellow-theme-lighter-2);
+  --theme-color-lighter-3: var(--theme-color-yellow-theme-lighter-3);
+  --theme-color-lighter-4: var(--theme-color-yellow-theme-lighter-4);
+  --theme-color-lighter-5: var(--theme-color-yellow-theme-lighter-5);
+  --theme-color-lighter-6: var(--theme-color-yellow-theme-lighter-6);
+  --theme-color-lighter-7: var(--theme-color-yellow-theme-lighter-7);
+  --theme-color-lighter-8: var(--theme-color-yellow-theme-lighter-8);
+  --theme-color-lighter-9: var(--theme-color-yellow-theme-lighter-9);
+
+  --theme-color-darker-1: var(--theme-color-yellow-theme-darker-1);
+  --theme-color-darker-2: var(--theme-color-yellow-theme-darker-2);
+  --theme-color-darker-3: var(--theme-color-yellow-theme-darker-3);
+  --theme-color-darker-4: var(--theme-color-yellow-theme-darker-4);
+  --theme-color-darker-5: var(--theme-color-yellow-theme-darker-5);
+  --theme-color-darker-6: var(--theme-color-yellow-theme-darker-6);
+  --theme-color-darker-7: var(--theme-color-yellow-theme-darker-7);
+  --theme-color-darker-8: var(--theme-color-yellow-theme-darker-8);
+  --theme-color-darker-9: var(--theme-color-yellow-theme-darker-9);
 
   --hover: var(--hover-yellow-theme-lighter);
 }
 
 @mixin yellow-theme-dark-mode {
 
-  --brand-color: var(--brand-color-yellow-theme);
-
-  --brand-color-lighter-1: var(--brand-color-yellow-theme-darker-1);
-  --brand-color-lighter-2: var(--brand-color-yellow-theme-darker-2);
-  --brand-color-lighter-3: var(--brand-color-yellow-theme-darker-3);
-  --brand-color-lighter-4: var(--brand-color-yellow-theme-darker-4);
-  --brand-color-lighter-5: var(--brand-color-yellow-theme-darker-5);
-  --brand-color-lighter-6: var(--brand-color-yellow-theme-darker-6);
-  --brand-color-lighter-7: var(--brand-color-yellow-theme-darker-7);
-  --brand-color-lighter-8: var(--brand-color-yellow-theme-darker-8);
-  --brand-color-lighter-9: var(--brand-color-yellow-theme-darker-9);
-
-  --brand-color-darker-1: var(--brand-color-yellow-theme-lighter-1);
-  --brand-color-darker-2: var(--brand-color-yellow-theme-lighter-2);
-  --brand-color-darker-3: var(--brand-color-yellow-theme-lighter-3);
-  --brand-color-darker-4: var(--brand-color-yellow-theme-lighter-4);
-  --brand-color-darker-5: var(--brand-color-yellow-theme-lighter-5);
-  --brand-color-darker-6: var(--brand-color-yellow-theme-lighter-6);
-  --brand-color-darker-7: var(--brand-color-yellow-theme-lighter-7);
-  --brand-color-darker-8: var(--brand-color-yellow-theme-lighter-8);
-  --brand-color-darker-9: var(--brand-color-yellow-theme-lighter-9);
+  --theme-color: var(--theme-color-yellow-theme);
+
+  --theme-color-lighter-1: var(--theme-color-yellow-theme-darker-1);
+  --theme-color-lighter-2: var(--theme-color-yellow-theme-darker-2);
+  --theme-color-lighter-3: var(--theme-color-yellow-theme-darker-3);
+  --theme-color-lighter-4: var(--theme-color-yellow-theme-darker-4);
+  --theme-color-lighter-5: var(--theme-color-yellow-theme-darker-5);
+  --theme-color-lighter-6: var(--theme-color-yellow-theme-darker-6);
+  --theme-color-lighter-7: var(--theme-color-yellow-theme-darker-7);
+  --theme-color-lighter-8: var(--theme-color-yellow-theme-darker-8);
+  --theme-color-lighter-9: var(--theme-color-yellow-theme-darker-9);
+
+  --theme-color-darker-1: var(--theme-color-yellow-theme-lighter-1);
+  --theme-color-darker-2: var(--theme-color-yellow-theme-lighter-2);
+  --theme-color-darker-3: var(--theme-color-yellow-theme-lighter-3);
+  --theme-color-darker-4: var(--theme-color-yellow-theme-lighter-4);
+  --theme-color-darker-5: var(--theme-color-yellow-theme-lighter-5);
+  --theme-color-darker-6: var(--theme-color-yellow-theme-lighter-6);
+  --theme-color-darker-7: var(--theme-color-yellow-theme-lighter-7);
+  --theme-color-darker-8: var(--theme-color-yellow-theme-lighter-8);
+  --theme-color-darker-9: var(--theme-color-yellow-theme-lighter-9);
 
   --hover: var(--hover-yellow-theme-darker);
 }