diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index 06ff88193..c162ca598 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -45,6 +45,6 @@
   }
 
   .section-title {
-    color: var(--fg);
+    color: pvar(--fg);
   }
 }
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index f03247547..a3035abb9 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -4,8 +4,8 @@
 @use '_miniature' as *;
 
 .root {
-  --myFontSize: 1rem;
-  --myGreyFontSize: 1rem;
+  --co-font-size: 1rem;
+  --co-secondary-font-size: 1rem;
 }
 
 .section-label {
@@ -44,7 +44,7 @@ my-copy-button {
 }
 
 .account-avatar-row {
-  @include avatar-row-responsive(2rem, var(--myGreyFontSize));
+  @include avatar-row-responsive(2rem, var(--co-secondary-font-size));
 }
 
 .actor-display-name {
@@ -101,8 +101,8 @@ my-copy-button {
 
 @media screen and (max-width: $mobile-view) {
   .root {
-    --myFontSize: 14px;
-    --myGreyFontSize: 13px;
+    --co-font-size: 14px;
+    --co-secondary-font-size: 13px;
   }
 
   .links {
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
index 3a0fed6db..c442dca4c 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -1,22 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-a {
-  display: inline-block;
-
-  @include disable-default-a-behaviour;
-
-  &,
-  &:hover {
-    color: pvar(--fg);
-  }
-
-  span {
-    font-size: 80%;
-    color: pvar(--secondary-750);
-  }
-}
-
 .action-cell {
   my-button:first-child {
     @include margin-right(10px);
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss
index 6c252ca45..89bde6b87 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.scss
+++ b/client/src/app/+admin/follows/following-list/following-list.component.scss
@@ -2,19 +2,7 @@
 @use '_mixins' as *;
 
 a {
-  display: inline-block;
-
-  @include disable-default-a-behaviour;
-
-  &,
-  &:hover {
-    color: pvar(--fg);
-  }
-
-  span {
-    font-size: 80%;
-    color: pvar(--secondary-750);
-  }
+  color: pvar(--fg);
 }
 
 my-delete-button {
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
index 7457cbf46..8ec568074 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
@@ -2,19 +2,7 @@
 @use '_mixins' as *;
 
 a {
-  display: inline-block;
-
-  @include disable-default-a-behaviour;
-
-  &,
-  &:hover {
-    color: pvar(--fg);
-  }
-
-  span {
-    font-size: 80%;
-    color: pvar(--secondary-750);
-  }
+  color: pvar(--fg);
 }
 
 .expansion-block {
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
index 29c146017..0672a8087 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
@@ -54,7 +54,7 @@ my-select-custom-value {
     > a,
     > div {
       padding: 20px;
-      background: pvar(--secondary-400);
+      background: pvar(--bg-secondary-400);
       border-radius: 4px;
       box-sizing: border-box;
       height: 100%;
@@ -72,7 +72,7 @@ my-select-custom-value {
 
   .dashboard-label {
     font-size: 90%;
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
     text-align: center;
   }
 }
diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.scss b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
index af7ffb912..81d015291 100644
--- a/client/src/app/+admin/plugins/shared/plugin-card.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
@@ -3,7 +3,7 @@
 
 .plugin {
   margin: 15px 0;
-  background-color: pvar(--secondary-400);
+  background-color: pvar(--bg-secondary-400);
 }
 
 .first-row {
@@ -25,10 +25,10 @@
     @include margin-left(10px);
 
     my-global-icon {
-      color: pvar(--main-fg-500);
+      color: pvar(--fg-400);
 
       &[iconName=npm] {
-        @include fill-svg-color(pvar(--main-fg-500));
+        @include fill-svg-color(pvar(--fg-400));
       }
     }
   }
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index c5431d318..f97381a46 100644
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -92,7 +92,7 @@
 my-copy-button {
   position: absolute;
   right: 5px;
-  background: pvar(--secondary-300);
+  background: pvar(--bg-secondary-300);
 }
 
 @include on-small-main-col {
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index 16bfaa042..9ce6d090c 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -44,7 +44,7 @@ my-edit-button {
 
 .video-channel-name {
   font-size: 14px;
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
 
   @include margin-left(5px);
 }
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index bff714727..4e4f04998 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -32,7 +32,7 @@
 
     label {
       margin: 0 0 0 5px;
-      color: var(--main-fg-500);
+      color: pvar(--fg-400);
       font-weight: $font-semibold;
     }
   }
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
index 44fcf7a36..dbf1b6df7 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -70,7 +70,7 @@ my-video-playlist-miniature {
   }
 
   .playlist-info {
-    width: calc(100% + (2 * var(--x-margin-content)));
+    width: calc(100% + (2 * pvar(--x-margin-content)));
     padding-top: 20px;
     margin-bottom: 10px;
   }
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index b92a99452..0982c4881 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -86,7 +86,7 @@
 }
 
 .video-channel-name {
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
 }
 
 // Use the same breakpoints as in video-miniature
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
index 3ec59f9f8..ac5a32db1 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.scss
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@@ -47,7 +47,7 @@ header {
     justify-content: center;
     align-items: center;
     // Better than border color for aliasing
-    box-shadow: 0 0 0 1px var(--primary);
+    box-shadow: 0 0 0 1px pvar(--primary);
     overflow: hidden;
 
     my-global-icon {
diff --git a/client/src/app/+stats/video/video-stats.component.scss b/client/src/app/+stats/video/video-stats.component.scss
index 9aa4c1cfe..b20d7b07c 100644
--- a/client/src/app/+stats/video/video-stats.component.scss
+++ b/client/src/app/+stats/video/video-stats.component.scss
@@ -39,7 +39,7 @@
   height: fit-content;
   min-height: 100px;
   min-width: 200px;
-  background-color: pvar(--secondary-400);
+  background-color: pvar(--bg-secondary-400);
   margin-bottom: 15px;
 
   @include margin-right(15px);
diff --git a/client/src/app/+stats/video/video-stats.component.ts b/client/src/app/+stats/video/video-stats.component.ts
index 5131b8821..79605b0a0 100644
--- a/client/src/app/+stats/video/video-stats.component.ts
+++ b/client/src/app/+stats/video/video-stats.component.ts
@@ -46,7 +46,7 @@ type ChartBuilderResult = {
 type Card = { label: string, value: string | number, moreInfo?: string, help?: string }
 
 ChartJSDefaults.backgroundColor = getComputedStyle(document.body).getPropertyValue('--bg')
-ChartJSDefaults.borderColor = getComputedStyle(document.body).getPropertyValue('--secondary-350')
+ChartJSDefaults.borderColor = getComputedStyle(document.body).getPropertyValue('--bg-secondary-350')
 ChartJSDefaults.color = getComputedStyle(document.body).getPropertyValue('--fg')
 
 @Component({
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index fb7cbcfe0..bd87fc5d0 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -4,11 +4,11 @@
 @use '_miniature' as *;
 
 .root {
-  --myGlobalTopPadding: 60px;
-  --myChannelImgMargin: 30px;
-  --myFontSize: 16px;
-  --myChannelHandleFontSize: 16px;
-  --myOwnerHandleFontSize: 14px;
+  --co-global-top-padding: 60px;
+  --co-channel-img-margin: 30px;
+  --co-font-size: 16px;
+  --co-channel-handle-font-size: 16px;
+  --co-owner-handle-font-size: 14px;
 }
 
 .section-label {
@@ -35,8 +35,8 @@
   grid-template-rows: auto auto;
 
   background-color: pvar(--channel-bg);
-  padding-top: var(--myGlobalTopPadding);
-  font-size: var(--myFontSize);
+  padding-top: var(--co-global-top-padding);
+  font-size: var(--co-font-size);
 
   // Use the same margin as the videos grid
   @include grid-videos-miniature-margins(false, 15px);
@@ -44,7 +44,7 @@
 }
 
 .channel-avatar-row {
-  @include avatar-row-responsive(var(--myChannelImgMargin), var(--myChannelHandleFontSize));
+  @include avatar-row-responsive(var(--co-channel-img-margin), var(--co-channel-handle-font-size));
 }
 
 .support-button {
@@ -54,7 +54,7 @@
 .channel-description {
   grid-column: 1;
   word-break: break-word;
-  padding-bottom: var(--myGlobalTopPadding);
+  padding-bottom: var(--co-global-top-padding);
 }
 
 .show-more {
@@ -100,7 +100,7 @@
   background-color: pvar(--bg);
   padding: 30px;
   width: 300px;
-  font-size: var(--myFontSize);
+  font-size: var(--co-font-size);
 
   .avatar-row {
     display: flex;
@@ -120,8 +120,8 @@
     }
 
     .actor-handle {
-      font-size: var(--myOwnerHandleFontSize);
-      color: pvar(--main-fg-400);
+      font-size: var(--co-owner-handle-font-size);
+      color: pvar(--fg-300);
     }
   }
 
@@ -156,8 +156,8 @@ my-copy-button {
 
 @media screen and (max-width: 1100px) {
   .root {
-    --myGlobalTopPadding: 45px;
-    --myChannelImgMargin: 15px;
+    --co-global-top-padding: 45px;
+    --co-channel-img-margin: 15px;
   }
 
   .channel-info {
@@ -194,7 +194,7 @@ my-copy-button {
     display: block;
     width: 100%;
     border-bottom: 2px solid $separator-border-color;
-    padding: var(--myGlobalTopPadding) 45px;
+    padding: var(--co-global-top-padding) 45px;
     margin-bottom: 60px;
   }
 
@@ -234,10 +234,10 @@ my-copy-button {
 
 @media screen and (max-width: $mobile-view) {
   .root {
-    --myGlobalTopPadding: 15px;
-    --myFontSize: 14px;
-    --myChannelHandleFontSize: 13px;
-    --myOwnerHandleFontSize: 13px;
+    --co-global-top-padding: 15px;
+    --co-font-size: 14px;
+    --co-channel-handle-font-size: 13px;
+    --co-owner-handle-font-size: 13px;
   }
 
   .links {
diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.scss b/client/src/app/+video-studio/edit/video-studio-edit.component.scss
index 099f72d44..9d45a8fb3 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.scss
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.scss
@@ -83,7 +83,7 @@ h2 {
   }
 
   .description {
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
     margin-top: 5px;
     margin-bottom: 15px;
   }
diff --git a/client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.scss b/client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.scss
index 61494a0e1..902167f74 100644
--- a/client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.scss
@@ -18,7 +18,7 @@
 
   &.active,
   &:hover {
-    background: pvar(--secondary-300);
+    background: pvar(--bg-secondary-300);
   }
 }
 
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 52809a2bc..740b88e27 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -68,7 +68,7 @@ my-timestamp-input {
 
   .message-submit {
     display: inline-block;
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
 
     @include margin-right(25px);
   }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 64f8a86c1..f814787f9 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -3,7 +3,7 @@
 
 .first-step-block {
   .torrent-or-magnet {
-    @include divider($color: pvar(--secondary-750), $background: pvar(--secondary-400));
+    @include divider($color: pvar(--secondary-icon-color), $background: pvar(--bg-secondary-400));
 
     &[data-content] {
       margin: 1.5rem 0;
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index 81ffa0a60..11f3dddc2 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -19,7 +19,7 @@ $width-size: 275px;
   .upload-icon {
     width: 90px;
     margin-bottom: 25px;
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
   }
 
   .peertube-select-container {
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index 9b5560a3e..9b59b8d7b 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -41,21 +41,21 @@ $nav-link-height: 40px;
   padding-top: 20px;
 }
 
-::ng-deep .video-add-nav {
+:host ::ng-deep .video-add-nav {
   @include peertube-nav-tabs($border-width, $border-type, $border-color, $nav-link-height);
 
   a.nav-link {
     &.active {
-      background-color: pvar(--secondary-400) !important;
+      background-color: pvar(--bg-secondary-400) !important;
     }
   }
 }
 
-::ng-deep .upload-video-container {
+:host ::ng-deep .upload-video-container {
   border: $border-width $border-type $border-color;
   border-top: transparent;
 
-  background-color: pvar(--secondary-400);
+  background-color: pvar(--bg-secondary-400);
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
   width: 100%;
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss
index e73d5c17d..daaab3ece 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss
@@ -22,7 +22,7 @@
     padding: 4px 10px;
     white-space: nowrap;
     background-color: transparent !important;
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
     text-transform: uppercase;
 
     @include peertube-button;
@@ -92,7 +92,7 @@
     background-color: #909090;
 
     &.liked {
-      background-color: pvar(--main-fg-500);
+      background-color: pvar(--fg-400);
     }
   }
 }
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.scss b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.scss
index 9e128562b..d4b0f68e6 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.scss
@@ -11,5 +11,5 @@
 }
 
 .activated {
-  color: pvar(--main-fg-500) !important;
+  color: pvar(--fg-400) !important;
 }
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
index 832814847..3a1046123 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
@@ -32,7 +32,7 @@
 
 .highlighted-comment {
   display: inline-block;
-  background-color: pvar(--secondary-350);
+  background-color: pvar(--bg-secondary-350);
   color: pvar(--fg);
   padding: 0 5px;
   font-size: 13px;
@@ -78,13 +78,13 @@
   }
 
   .comment-account-fid {
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
   }
 }
 
 .comment-date {
   font-size: 90%;
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
   text-decoration: none;
 
   @include margin-left(5px);
@@ -116,7 +116,7 @@
   }
 
   &.comment-html-deleted {
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
     margin-bottom: 1rem;
   }
 }
@@ -127,7 +127,7 @@
 
   ::ng-deep .dropdown-toggle,
   .comment-action-reply {
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
     cursor: pointer;
 
     @include margin-right(10px);
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
index dab323a54..01967e0a7 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
@@ -10,7 +10,7 @@
 .attribute-label {
   min-width: 142px;
   display: inline-block;
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
   font-weight: $font-bold;
 
   @include padding-right(5px);
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
index 046e78497..aa51dd4ea 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
@@ -29,7 +29,7 @@
   .video-info-description-more {
     cursor: pointer;
     font-weight: $font-semibold;
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
     margin-top: 1rem;
 
     @include font-size(14px);
diff --git a/client/src/app/+videos/+video-watch/shared/player-widgets/player-widget.component.scss b/client/src/app/+videos/+video-watch/shared/player-widgets/player-widget.component.scss
index 777df36db..a4e765491 100644
--- a/client/src/app/+videos/+video-watch/shared/player-widgets/player-widget.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/player-widgets/player-widget.component.scss
@@ -12,7 +12,7 @@
   border-bottom: 1px solid $separator-border-color;
 
   .widget-header {
-    background-color: pvar(--secondary-400);
+    background-color: pvar(--bg-secondary-400);
     padding: 1rem 2rem;
   }
 
diff --git a/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.scss b/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.scss
index d5ee3e554..e74d00119 100644
--- a/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.scss
@@ -4,7 +4,7 @@
 .segment {
   &.active,
   &:hover {
-    background: pvar(--secondary-300);
+    background: pvar(--bg-secondary-300);
   }
 }
 
diff --git a/client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.scss
index 7482702a5..1e1336ffc 100644
--- a/client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.scss
@@ -5,7 +5,7 @@
 
 .playlist {
   .playlist-by-index {
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
     display: flex;
 
     .playlist-by {
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 899199dee..894ab4d42 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -40,7 +40,7 @@ $video-max-height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
     }
 
     ::ng-deep .video-js {
-      --player-height: #{$video-max-height};
+      --co-player-height: #{$video-max-height};
     }
 
     .player-widget-component ::ng-deep .widget-root {
@@ -62,16 +62,16 @@ $video-max-height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
   }
 
   ::ng-deep .video-js {
-    --player-height: #{$video-default-height};
-    --player-portrait-mode: 0;
+    --co-player-height: #{$video-default-height};
+    --co-player-portrait-mode: 0;
     // Default player ratio, redefined by the player to automatically adapt player size
-    --player-ratio: #{math.div(16, 9)};
+    --co-player-ratio: #{math.div(16, 9)};
 
     width: 100%;
-    height: var(--player-height);
+    height: var(--co-player-height);
 
     // Can be recalculated by the player depending on video ratio
-    max-width: calc(var(--player-height) * var(--player-ratio));
+    max-width: calc(var(--co-player-height) * var(--co-player-ratio));
 
     // VideoJS create an inner video player
     video {
@@ -253,8 +253,8 @@ my-video-comments {
 
     .remote-server-down,
     ::ng-deep .video-js {
-      --player-portrait-mode: 1;
-      --player-height: calc(100vw / var(--player-ratio)) !important;
+      --co-player-portrait-mode: 1;
+      --co-player-height: calc(100vw / var(--co-player-ratio)) !important;
 
       max-height: calc(100vh - #{$header-height} - #{$player-portrait-bottom-space});
     }
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index ba785a775..edfdc2033 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -181,8 +181,8 @@ export class ThemeService {
 
     const toProcess = [
       { prefix: 'primary', invertIfDark: false },
-      { prefix: 'secondary', invertIfDark: true },
-      { prefix: 'main-fg', invertIfDark: true }
+      { prefix: 'bg-secondary', invertIfDark: true },
+      { prefix: 'fg', invertIfDark: true }
     ]
 
     for (const { prefix, invertIfDark } of toProcess) {
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 9dc144d3d..7a329340c 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -2,6 +2,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
+.root {
+  background-color: pvar(--bg);
+}
+
 .peertube-title {
   font-size: 24px;
   font-weight: $font-bold;
@@ -70,7 +74,7 @@
   }
 
   .username {
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
   }
 
   > .dropdown-toggle {
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index a511a2259..341b66460 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -3,7 +3,7 @@
 @use '_mixins' as *;
 
 .menu-container {
-  --menuXPadding: 1.5rem;
+  --co-menu-x-padding: 1.5rem;
 
   z-index: z(menu);
   width: calc(#{$menu-width} - 2rem);
@@ -13,7 +13,7 @@
   @include margin-left(2rem);
 
   &.collapsed {
-    --menuXPadding: 0.25rem;
+    --co-menu-x-padding: 0.25rem;
 
     width: auto;
 
@@ -30,11 +30,11 @@
 }
 
 .toggle-menu {
-  color: pvar(--secondary-750);
+  color: pvar-fallback(--menu-fg, --fg-200);
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  background-color: pvar(--secondary-450);
+  background-color: pvar-fallback(--menu-bg, --bg-secondary-500);
 
   @include button-with-icon(20px, 0, 0, 1px);
 
@@ -89,7 +89,7 @@
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
   border-radius: 14px;
-  background-color: pvar(--secondary-400);
+  background-color: pvar-fallback(--menu-bg, --bg-secondary-400);
 }
 
 .menu-link,
@@ -97,8 +97,8 @@
 .block-title,
 .about .description,
 .about my-button {
-  @include padding-left(var(--menuXPadding));
-  @include padding-right(var(--menuXPadding));
+  @include padding-left(var(--co-menu-x-padding));
+  @include padding-right(var(--co-menu-x-padding));
 }
 
 .menu-block,
@@ -107,8 +107,7 @@
     content: '';
     display: block;
     height: 2px;
-    background: pvar(--secondary-450);
-    margin: 1rem var(--menuXPadding);
+    margin: 1rem var(--co-menu-x-padding);
   }
 }
 
@@ -136,6 +135,7 @@
 
 .block-title {
   font-weight: $font-bold;
+  color: pvar-fallback(--menu-fg, --fg-350);
   font-size: 14px;
   margin-bottom: 0.5rem;
 }
@@ -144,7 +144,7 @@
   display: flex;
   align-items: center;
 
-  color: pvar(--main-fg-450);
+  color: pvar-fallback(--menu-fg, --fg-400);
   white-space: normal;
   word-break: break-word;
   transition: background-color .1s ease-in-out;
@@ -156,11 +156,11 @@
 
   &:hover,
   &:focus-visible {
-    background-color: pvar(--secondary-500);
+    background-color: pvar-fallback(--menu-fg, --bg-secondary-500);
   }
 
   &.active {
-    background-color: pvar(--secondary-600);
+    background-color: pvar-fallback(--menu-fg, --bg-secondary-600);
   }
 
   my-global-icon {
@@ -169,7 +169,7 @@
     line-height: 22px;
     position: relative;
     top: -1px;
-    color: pvar(--secondary-750);
+    color: pvar-fallback(--menu-fg, --secondary-icon-color);
 
     + *:not(.visually-hidden) {
       @include margin-left(12px);
@@ -184,6 +184,6 @@
 .about {
   .description {
     font-size: 14px;
-    color: pvar(--main-fg-300);
+    color: pvar-fallback(--menu-fg, --fg-200)
   }
 }
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
index c1f90528e..5d62f1490 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -5,7 +5,7 @@
 .account-flagged-handle,
 .video-owner {
   font-size: 11px;
-  color: var(--main-fg-400);
+  color: pvar(--fg-300);
 }
 
 .abuse-messages {
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
index 66d26615a..70f972695 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
@@ -33,7 +33,7 @@ textarea {
   max-width: 60%;
 
   .author {
-    color: var(--main-fg-400);
+    color: pvar(--fg-300);
     font-size: 14px;
     padding: 0 0 3px 10px;
   }
@@ -41,23 +41,23 @@ textarea {
   .bubble {
     border-radius: 10px;
     padding: 5px 10px;
-    color: var(--fg);
-    background-color: var(--secondary-400);
+    color: pvar(--fg);
+    background-color: pvar(--bg-secondary-400);
 
     .date {
       font-size: 13px;
-      color: var(--main-fg-400);
+      color: pvar(--fg-300);
     }
   }
 
   &.by-me {
 
     .bubble {
-      color: var(--on-primary);
-      background-color: var(--primary-400);
+      color: pvar(--on-primary);
+      background-color: pvar(--primary-400);
 
       .date {
-        color: var(--on-primary);
+        color: pvar(--on-primary);
       }
     }
   }
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
index c4a9dcaf1..825bacc39 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -24,7 +24,7 @@
 .actor-info-username {
   position: relative;
   font-size: 14px;
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
 }
 
 .actor-info-followers {
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
index b5e27c4ee..84c9a7883 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
@@ -6,7 +6,7 @@
 }
 
 .banner-placeholder {
-  background-color: pvar(--secondary-350);
+  background-color: pvar(--bg-secondary-350);
 }
 
 .actor-img-edit-container {
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
index 9eef52575..7c8c20116 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
@@ -3,10 +3,10 @@
 
 .avatar {
   // Defined in component
-  width: var(--avatarSize);
-  height: var(--avatarSize);
-  min-width: var(--avatarSize);
-  min-height: var(--avatarSize);
+  width: var(--co-avatar-size);
+  height: var(--co-avatar-size);
+  min-width: var(--co-avatar-size);
+  min-height: var(--co-avatar-size);
 
   &.account {
     object-fit: cover;
@@ -28,7 +28,8 @@ a:hover {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--initialFontSize);
+  // Defined in component
+  font-size: var(--co-font-size);
 
   &.blue {
     background-color: #009FD4;
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index 02b8ded73..3262a6028 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -69,7 +69,7 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
 
   private buildClasses () {
     let avatarSize = '100%'
-    let initialFontSize = '22px'
+    let fontSize = '22px'
 
     this.classes = [ 'avatar' ]
 
@@ -77,11 +77,11 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
       avatarSize = `${this.size}px`
 
       if (this.size <= 18) {
-        initialFontSize = '13px'
+        fontSize = '13px'
       } else if (this.size >= 100) {
-        initialFontSize = '40px'
+        fontSize = '40px'
       } else if (this.size >= 120) {
-        initialFontSize = '46px'
+        fontSize = '46px'
       }
     }
 
@@ -98,8 +98,8 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
     }
 
     const elStyle = (this.el.nativeElement as HTMLElement).style
-    elStyle.setProperty('--avatarSize', avatarSize)
-    elStyle.setProperty('--initialFontSize', initialFontSize)
+    elStyle.setProperty('--co-avatar-size', avatarSize)
+    elStyle.setProperty('--co-font-size', fontSize)
   }
 
   private buildDefaultAvatarUrl () {
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
index fc0c5590b..ce2662a5d 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
@@ -52,6 +52,6 @@
 
 .video-label {
   font-size: 12px;
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
   margin: 15px 0 5px;
 }
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index b28a7840a..0b33ae96b 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -11,7 +11,7 @@ $input-border-radius: 3px;
   flex-direction: column;
 
   textarea {
-    background-color: pvar(--secondary-350);
+    background-color: pvar(--bg-secondary-350);
 
     font-family: monospace;
     font-size: 13px;
@@ -120,7 +120,7 @@ $input-border-radius: 3px;
       overflow-y: auto;
       word-wrap: break-word;
 
-      scrollbar-color: pvar(--main-fg-400) pvar(--bg);
+      scrollbar-color: pvar(--fg-300) pvar(--bg);
     }
 
     textarea,
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index 1ea52896e..bea2d05ce 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -1,5 +1,5 @@
 <div class="root flex-column">
-  <div class="d-flex">
+  <div class="d-flex align-items-center">
     <label>
       <input
         type="checkbox"
@@ -31,7 +31,7 @@
       </ng-template>
     </my-help>
 
-    <div *ngIf="recommended" class="recommended" i18n>Recommended</div>
+    <div *ngIf="recommended" class="ms-2 pt-badge badge-secondary" i18n>Recommended</div>
   </div>
 
   <div class="ms-4 d-flex flex-column">
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index c770b9149..dcb7c22e2 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -28,20 +28,8 @@
   .wrapper:empty {
     display: none;
   }
-
-  .recommended {
-    align-self: baseline;
-    display: inline-block;
-    padding: 4px 6px;
-    cursor: default;
-    border-radius: 3px;
-    font-size: 12px;
-    line-height: 12px;
-    font-weight: 500;
-    color: pvar(--secondary-750);
-    background-color: rgba(217, 225, 232, .1);
-    border: 1px solid rgba(217, 225, 232, .5);
-
-    @include margin-left(.5rem);
-  }
+}
+
+.pt-badge {
+  height: fit-content;
 }
diff --git a/client/src/app/shared/shared-icons/global-icon.component.scss b/client/src/app/shared/shared-icons/global-icon.component.scss
index c956a2f36..0cbe36dc0 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.scss
+++ b/client/src/app/shared/shared-icons/global-icon.component.scss
@@ -1,4 +1,4 @@
-::ng-deep {
+:host ::ng-deep {
   svg {
     vertical-align: bottom;
     width: inherit;
diff --git a/client/src/app/shared/shared-main/buttons/help.component.scss b/client/src/app/shared/shared-main/buttons/help.component.scss
index 5c92fa326..90181a60c 100644
--- a/client/src/app/shared/shared-main/buttons/help.component.scss
+++ b/client/src/app/shared/shared-main/buttons/help.component.scss
@@ -6,11 +6,11 @@
     width: 17px;
     position: relative;
     top: -1px;
-    color: pvar(--main-fg-500);
+    color: pvar(--fg-400);
   }
 }
 
-::ng-deep {
+:host ::ng-deep {
   .help-popover {
     min-width: 200px;
     max-width: 300px;
diff --git a/client/src/app/shared/shared-main/common/progress-bar.component.scss b/client/src/app/shared/shared-main/common/progress-bar.component.scss
index 5a5b63ead..7cf61837b 100644
--- a/client/src/app/shared/shared-main/common/progress-bar.component.scss
+++ b/client/src/app/shared/shared-main/common/progress-bar.component.scss
@@ -2,7 +2,7 @@
 @use '_mixins' as *;
 
 .progress-container {
-  background-color: pvar(--secondary-350);
+  background-color: pvar(--bg-secondary-350);
   display: flex;
   overflow: hidden;
   height: 2rem;
@@ -13,7 +13,7 @@
 
   span {
     position: absolute;
-    color: pvar(--main-fg-500);
+    color: pvar(--fg-400);
     line-height: 2rem;
     margin: 0 12px;
   }
diff --git a/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss b/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss
index b526fd729..9586198a5 100644
--- a/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss
+++ b/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss
@@ -3,11 +3,11 @@
 
 .root {
   width: 100%;
-  border-bottom: 1px solid pvar(--main-fg-300);
+  border-bottom: 1px solid pvar(--fg-200);
 }
 
 .x-menu-entry {
-  color: pvar(--secondary-750);
+  color: pvar(--fg-100);
   display: inline-block;
   font-weight: $font-bold;
   white-space: nowrap;
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index 44483f31b..2150c85dd 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -48,7 +48,7 @@ my-action-dropdown.show {
 
 .table-comment-link,
 .table-account-link {
-  color: var(--fg);
+  color: pvar(--fg);
 
   @include disable-outline;
 
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.scss b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
index 2d4efc067..78ebea6aa 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
@@ -2,17 +2,5 @@
 @use '_mixins' as *;
 
 a {
-  display: inline-block;
-
-  @include disable-default-a-behaviour;
-
-  &,
-  &:hover {
-    color: pvar(--fg);
-  }
-
-  span {
-    font-size: 80%;
-    color: pvar(--secondary-750);
-  }
+  color: pvar(--fg);
 }
diff --git a/client/src/app/shared/shared-tables/video-cell.component.scss b/client/src/app/shared/shared-tables/video-cell.component.scss
index 92ea3764a..13b389c1f 100644
--- a/client/src/app/shared/shared-tables/video-cell.component.scss
+++ b/client/src/app/shared/shared-tables/video-cell.component.scss
@@ -36,10 +36,6 @@
       border-radius: 2px;
     }
 
-    span {
-      color: pvar(--secondary-750);
-    }
-
     .table-video-image-label {
       position: absolute;
       border-radius: 3px;
@@ -62,7 +58,7 @@
     line-height: 1rem;
 
     div + div {
-      color: var(--main-fg-400);
+      color: pvar(--fg-300);
       font-size: 11px;
     }
   }
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
index 345c041cb..7d664b286 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -53,10 +53,10 @@
 
 .live-overlay {
   font-weight: $font-bold;
-  color: pvar(--secondary-300);
+  color: #F4F4F5;
 
   &.live-streaming {
-    color: pvar(--secondary-300);
+    color: #F4F4F5;
 
     &::before {
       content: '';
@@ -96,6 +96,6 @@
     width: 22px;
     height: 22px;
 
-    color: pvar(--secondary-300);
+    color: #F4F4F5;
   }
 }
diff --git a/client/src/app/shared/shared-video-miniature/download/video-files-download.component.scss b/client/src/app/shared/shared-video-miniature/download/video-files-download.component.scss
index e85b9e0a7..67fd78ac8 100644
--- a/client/src/app/shared/shared-video-miniature/download/video-files-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/download/video-files-download.component.scss
@@ -30,7 +30,7 @@
   > span:first-child {
     min-width: 142px;
     display: inline-block;
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
     font-weight: $font-bold;
 
     @include padding-right(5px);
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.scss b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.scss
index 67d7ee86a..cb1d25599 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.scss
@@ -7,6 +7,6 @@
   }
 }
 
-::ng-deep .icon-playlist-add {
+:host ::ng-deep .icon-playlist-add {
   left: 2px;
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
index 7c3eebf3c..f17b26df2 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
@@ -1,7 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-$filters-background: pvar(--secondary-400);
+$filters-background: pvar(--bg-secondary-400);
 
 .root {
   margin-bottom: 45px;
@@ -42,7 +42,7 @@ $filters-background: pvar(--secondary-400);
 }
 
 .filters-summary {
-  color: pvar(--main-fg-300);
+  color: pvar(--fg-200);
 }
 
 .filters-toggle {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 8b989614f..47924d637 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -5,13 +5,13 @@
 $more-button-width: 40px;
 
 .video-miniature {
-  --fs-small: 0.75rem;
-  --fs-medium: 0.875rem;
-  --fs-big: 1rem;
+  --co-fs-small: 0.75rem;
+  --co-fs-medium: 0.875rem;
+  --co-fs-big: 1rem;
 }
 
 .video-name {
-  font-size: var(--fs-big);
+  font-size: var(--co-fs-big);
 
   @include miniature-name;
 }
@@ -25,28 +25,28 @@ $more-button-width: 40px;
 .owner {
   display: flex;
   position: relative;
-  font-size: var(--fs-medium);
+  font-size: var(--co-fs-medium);
 }
 
 .date-and-views,
 .video-info-privacy,
 .badges {
-  font-size: var(--fs-small);
+  font-size: var(--co-fs-small);
 }
 
 .date-and-views {
-  color: pvar(--main-fg-300);
+  color: pvar(--fg-200);
 }
 
 .owner-label {
   display: block;
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
 
   @include disable-default-a-behaviour;
   @include ellipsis;
 
   &:hover {
-    color: pvar(--main-fg-600);
+    color: pvar(--fg);
   }
 }
 
@@ -166,20 +166,20 @@ $more-button-width: 40px;
 }
 
 .video-miniature.display-as-row {
-  --fs-small: 0.875rem;
-  --fs-medium: 1rem;
-  --fs-big: 1.25rem;
+  --co-fs-small: 0.875rem;
+  --co-fs-medium: 1rem;
+  --co-fs-big: 1.25rem;
 
-  --rowThumbnailWidth: #{$video-thumbnail-width};
-  --rowThumbnailHeight: #{$video-thumbnail-height};
+  --co-row-thumbnail-width: #{$video-thumbnail-width};
+  --co-row-thumbnail-height: #{$video-thumbnail-height};
 
   display: flex;
   flex-direction: row;
 
   my-video-thumbnail {
-    min-width: var(--rowThumbnailWidth);
-    max-width: var(--rowThumbnailWidth);
-    height: var(--rowThumbnailHeight);
+    min-width: var(--co-row-thumbnail-width);
+    max-width: var(--co-row-thumbnail-width);
+    height: var(--co-row-thumbnail-height);
 
     @include margin-right(1rem);
   }
@@ -223,14 +223,14 @@ $more-button-width: 40px;
 
 @include on-small-main-col {
   .video-miniature.display-as-row {
-    --rowThumbnailWidth: #{$video-thumbnail-medium-width};
-    --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+    --co-row-thumbnail-width: #{$video-thumbnail-medium-width};
+    --co-row-thumbnail-height: #{$video-thumbnail-medium-height};
   }
 }
 
 @include on-mobile-main-col {
   .video-miniature.display-as-row {
-    --rowThumbnailWidth: #{$video-thumbnail-small-width};
-    --rowThumbnailHeight: #{$video-thumbnail-small-height};
+    --co-row-thumbnail-width: #{$video-thumbnail-small-width};
+    --co-row-thumbnail-height: #{$video-thumbnail-small-height};
   }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index 02870eeb8..67c6624d7 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -108,7 +108,7 @@ my-timestamp-input {
 
   .header-label {
     font-size: 13px;
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
     padding-left: 2px;
 
     &:nth-child(1) {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index a45059527..bf52c7a72 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -51,14 +51,14 @@ my-video-thumbnail,
 
     .position {
       font-weight: $font-semibold;
-      color: pvar(--main-fg-400);
+      color: pvar(--fg-300);
       min-width: 25px;
 
       my-global-icon {
         width: 17px;
         position: relative;
         left: -2px;
-        color: pvar(--main-fg-400);
+        color: pvar(--fg-300);
       }
     }
   }
@@ -85,7 +85,7 @@ my-video-thumbnail,
     }
 
     my-global-icon {
-      color: pvar(--main-fg-400);
+      color: pvar(--fg-300);
     }
   }
 
@@ -139,7 +139,7 @@ my-video-thumbnail,
 
   .video-info-owner,
   .video-info-timestamp {
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
   }
 }
 
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index a102a40ec..9a87db926 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -49,7 +49,7 @@
 
   .by {
     display: block;
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
 
     @include disable-default-a-behaviour;
   }
@@ -70,7 +70,7 @@
 
   .description {
     margin-top: 10px;
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
 
     @include peertube-word-wrap;
   }
@@ -92,8 +92,8 @@
 }
 
 .miniature.display-as-row {
-  --rowThumbnailWidth: #{$video-thumbnail-width};
-  --rowThumbnailHeight: #{$video-thumbnail-height};
+  --co-row-thumbnail-width: #{$video-thumbnail-width};
+  --co-row-thumbnail-height: #{$video-thumbnail-height};
 
   display: flex;
 
@@ -102,9 +102,9 @@
   }
 
   .miniature-thumbnail {
-    min-width: var(--rowThumbnailWidth);
-    max-width: var(--rowThumbnailWidth);
-    height: var(--rowThumbnailHeight);
+    min-width: var(--co-row-thumbnail-width);
+    max-width: var(--co-row-thumbnail-width);
+    height: var(--co-row-thumbnail-height);
 
     @include margin-right(1rem);
   }
@@ -112,14 +112,14 @@
 
 @include on-small-main-col {
   .miniature.display-as-row {
-    --rowThumbnailWidth: #{$video-thumbnail-medium-width};
-    --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+    --co-row-thumbnail-width: #{$video-thumbnail-medium-width};
+    --co-row-thumbnail-height: #{$video-thumbnail-medium-height};
   }
 }
 
 @include on-mobile-main-col {
   .miniature.display-as-row {
-    --rowThumbnailWidth: #{$video-thumbnail-small-width};
-    --rowThumbnailHeight: #{$video-thumbnail-small-height};
+    --co-row-thumbnail-width: #{$video-thumbnail-small-width};
+    --co-row-thumbnail-height: #{$video-thumbnail-small-height};
   }
 }
diff --git a/client/src/app/shared/standalone-notifications/user-notifications.component.scss b/client/src/app/shared/standalone-notifications/user-notifications.component.scss
index d61fe4b7e..8734b4fd4 100644
--- a/client/src/app/shared/standalone-notifications/user-notifications.component.scss
+++ b/client/src/app/shared/standalone-notifications/user-notifications.component.scss
@@ -48,7 +48,7 @@
 
   .from-date {
     font-size: 0.85em;
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
     min-width: 70px;
     text-align: end;
 
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 4c5805493..f2efc5999 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -18,24 +18,20 @@ input[type="search"]::-webkit-search-results-button,
 input[type="search"]::-webkit-search-results-decoration { display: none; }
 
 body {
-  /*** theme ***/
-  // now beware sass requires interpolation
-  // for css custom properties #{$var}
-
-  --menuBackgroundColor: #{$menu-background};
-  --menuForegroundColor: #{$menu-color};
-
-  // Create a theme system using CSS variables
-
-  // Fallback from old theme
-  --primary: var(--primary);
-  --secondary: var(--greyBackgroundColor);
-  --main-fg: var(--fg);
-  --main-fg-500: var(--greyForegroundColor, 0); // 0 means undefined
-
+  // ---------------------------------------------------------------------------
   // New theme with fallback
-  --fg: var(--mainForegroundColor, #{pvar(--main-fg-600)});
-  --bg: var(--mainBackgroundColor, #{pvar(--secondary-300)});
+  // ---------------------------------------------------------------------------
+
+  --menu-bg: var(--menuBackgroundColor);
+  --menu-fg: var(--menuForegroundColor);
+
+  --fg: var(--mainForegroundColor, #000);
+  --fg-300: var(--greyForegroundColor, 0); // 0 means undefined
+
+  --bg: var(--mainBackgroundColor, #fff);
+  --bg-secondary: var(--greyBackgroundColor, #E5E5E5);
+
+  --primary: var(--mainColor, hsl(24, 90%, 45%));
   --on-primary: #{pvar(--fg)};
 
   --red: #{$red};
@@ -44,16 +40,16 @@ body {
   --green: #{$green};
 
   --input-fg: var(--inputForegroundColor, #{pvar(--fg)});
-  --input-bg: var(--inputBackgroundColor, #{pvar(--secondary-400)});
-  --input-placeholder: var(--inputPlaceholderColor, #{pvar(--secondary-750)});
-  --input-border-color: var(--inputBorderColor, #{pvar(--secondary-500)});
+  --input-bg: var(--inputBackgroundColor, #{pvar(--bg-secondary-400)});
+  --input-placeholder: var(--inputPlaceholderColor, #{pvar(--fg-50)});
+  --input-border-color: var(--inputBorderColor, #{pvar(--bg-secondary-500)});
 
   --textarea-fg: var(--textareaForegroundColor, #{pvar(--input-fg)});
   --textarea-bg: var(--textareaBackgroundColor, #{pvar(--input-bg)});
 
   --channel-bg: var(--channelBackgroundColor, #{pvar(--primary-50)});
 
-  --support-btn-fg: var(--supportButtonColor, #{pvar(--main-fg-400)});
+  --support-btn-fg: var(--supportButtonColor, #{pvar(--fg-300)});
   --support-btn-bg: var(--supportButtonBackgroundColor, transparent);
   --support-btn-heart-bg: var(--supportButtonHeartColor, #{$support-button-heart});
 
@@ -61,23 +57,36 @@ body {
   --x-videos-margin-content: 2rem;
   --main-col-width: calc(100vw - #{$menu-width});
 
+  --secondary-icon-color: #{pvar(--fg-50)};
+  --secondary-fg: #{pvar(--fg-50)};
+
   // Light theme
   &[data-pt-theme=peertube-core-light],
   &[data-pt-theme=default] {
     --is-dark: 0;
+
     --primary: #F2690D;
-    --main-fg: hsl(0 14% 12%);
-    --secondary: hsl(0 10% 76%);
+
+    --fg: hsl(0 14% 2%);
+
+    --bg: hsl(0 10% 96%);
+    --bg-secondary: hsl(0 10% 76%);
+
+    --secondary-icon-color: #8F7676;
+    --input-placeholder: #8F7676;
   }
 
   // Brown
   &[data-pt-theme=peertube-core-dark] {
     --is-dark: 1;
+
     --primary: #FD9C50;
-    --main-fg: hsl(0 10% 86%);
-    --secondary: hsl(0 14% 22%);
-    --bg: #{pvar(--secondary-350)};
-    --on-primary: #{pvar(--secondary-600)};
+    --on-primary: #111;
+
+    --fg: hsl(0 10% 96%);
+
+    --bg: hsl(0 14% 7%);
+    --bg-secondary: hsl(0 14% 22%);
   }
 
   & {
@@ -147,8 +156,8 @@ label {
 }
 
 code {
-  background-color: pvar(--secondary-350);
-  color: pvar(--main-fg-500);
+  background-color: pvar(--bg-secondary-350);
+  color: pvar(--fg-400);
   border-radius: 3px;
   padding: .2em .4em;
   margin: auto .4em;
@@ -174,7 +183,7 @@ code {
   }
 
   .sub-menu {
-    background-color: pvar(--secondary-400);
+    background-color: pvar(--bg-secondary-400);
     width: 100%;
     display: flex;
     align-items: center;
@@ -232,8 +241,9 @@ my-global-icon[iconName=external-link] {
   margin: 0 0.3em;
   width: 0.9em;
   height: 0.9em;
+  line-height: 0.9em;
   display: inline-block;
-  color: pvar(--secondary-750);
+  color: pvar(--secondary-icon-color);
   position: relative;
   top: -0.1em;
 }
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index f6dfca25a..b15b2ba49 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -53,7 +53,7 @@ body {
 }
 
 .btn-outline-secondary {
-  --bs-btn-color: #{pvar(--main-fg-400)};
+  --bs-btn-color: #{pvar(--fg-300)};
 }
 
 .btn {
@@ -75,7 +75,7 @@ body {
 // ---------------------------------------------------------------------------
 
 .dropdown-menu {
-  --bs-dropdown-link-hover-bg: #{pvar(--secondary-350)};
+  --bs-dropdown-link-hover-bg: #{pvar(--bg-secondary-350)};
   --bs-dropdown-link-color: #{pvar(--fg)};
   --bs-dropdown-border-color: #{pvar(--input-border-color)};
 
diff --git a/client/src/sass/class-helpers/_buttons.scss b/client/src/sass/class-helpers/_buttons.scss
index 2b61a3c2a..49924ac36 100644
--- a/client/src/sass/class-helpers/_buttons.scss
+++ b/client/src/sass/class-helpers/_buttons.scss
@@ -64,9 +64,9 @@
   padding: 0;
   border: 0 !important;
   text-decoration: underline;
-  color: pvar(--main-fg-500);
+  color: pvar(--fg-400);
 
   &:hover {
-    color: pvar(--main-fg-200);
+    color: pvar(--fg-100);
   }
 }
diff --git a/client/src/sass/class-helpers/_common.scss b/client/src/sass/class-helpers/_common.scss
index e31ba1f44..617e5a4df 100644
--- a/client/src/sass/class-helpers/_common.scss
+++ b/client/src/sass/class-helpers/_common.scss
@@ -99,11 +99,11 @@
 // ---------------------------------------------------------------------------
 
 .chip {
-  --avatarSize: 1.2rem;
+  --chip-avatar-size: 1.2rem;
 
   display: inline-flex;
   color: pvar(--fg);
-  height: var(--avatarSize);
+  height: var(--chip-avatar-size);
   max-width: 320px;
   overflow: hidden;
   text-decoration: none;
@@ -114,14 +114,14 @@
 
   my-actor-avatar {
     border-radius: 5rem;
-    width: var(--avatarSize);
-    height: var(--avatarSize);
+    width: var(--chip-avatar-size);
+    height: var(--chip-avatar-size);
 
     @include margin-right(0.5rem);
   }
 
   &.two-lines {
-    --avatarSize: 2rem;
+    --chip-avatar-size: 2rem;
 
     font-size: 14px;
     line-height: 1rem;
diff --git a/client/src/sass/include/_account-channel-page.scss b/client/src/sass/include/_account-channel-page.scss
index 8306e6eff..3b71aff63 100644
--- a/client/src/sass/include/_account-channel-page.scss
+++ b/client/src/sass/include/_account-channel-page.scss
@@ -63,7 +63,7 @@
 
   .actor-handle,
   .actor-counters {
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
 
     @include font-size($actor-handle-font-size);
   }
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index f34097f42..b4dcd289b 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -28,7 +28,7 @@
 
   .actor-name {
     font-size: 14px;
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
 
     @include margin-left(5px);
   }
diff --git a/client/src/sass/include/_badges.scss b/client/src/sass/include/_badges.scss
index 1420deede..9b92d1612 100644
--- a/client/src/sass/include/_badges.scss
+++ b/client/src/sass/include/_badges.scss
@@ -21,7 +21,7 @@
 
   &.badge-secondary {
     color: pvar(--bg);
-    background-color: pvar(--main-fg-400);
+    background-color: pvar(--fg-300);
     opacity: 0.7;
   }
 
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 112270324..4ab49a0d4 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -45,18 +45,18 @@ $input-focus-border-color: #ced4da;
 $input-focus-box-shadow: 0 0 0 0.25rem pvar(--primary-100);
 
 $input-group-addon-color: pvar(--fg);
-$input-group-addon-bg: pvar(--secondary-350);
+$input-group-addon-bg: pvar(--bg-secondary-350);
 
-$nav-pills-link-active-bg: pvar(--secondary-350);
+$nav-pills-link-active-bg: pvar(--bg-secondary-350);
 $nav-pills-link-active-color: pvar(--fg);
 $nav-link-transition: none;
 
 $dropdown-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
 $dropdown-border-radius: 3px;
 $dropdown-link-active-color: pvar(--fg);
-$dropdown-link-active-bg: pvar(--secondary-300);
+$dropdown-link-active-bg: pvar(--bg-secondary-300);
 $dropdown-link-hover-color: pvar(--fg);
-$dropdown-link-hover-bg: pvar(--secondary-300);
+$dropdown-link-hover-bg: pvar(--bg-secondary-300);
 $dropdown-color: pvar(--fg);
 $dropdown-bg: pvar(--bg);
 
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index afc4ec84d..b41f70d94 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -108,7 +108,7 @@
 @mixin static-thumbnail-overlay {
   display: inline-block;
   background-color: rgba(17, 17, 17, 0.8);
-  color: pvar(--secondary-400);
+  color: #E9DFDF;
 }
 
 // Use margin by default, or padding if $margin is false
@@ -134,14 +134,14 @@
   @media screen and (min-width: $mobile-view) {
     .videos,
     .playlists {
-      --miniatureMinWidth: #{$video-thumbnail-width - 25px};
-      --miniatureMaxWidth: #{$video-thumbnail-width};
+      --co-miniature-min-width: #{$video-thumbnail-width - 25px};
+      --co-miniature-max-width: #{$video-thumbnail-width};
 
       display: grid;
       column-gap: 30px;
       grid-template-columns: repeat(
         auto-fill,
-        minmax(var(--miniatureMinWidth), 1fr)
+        minmax(var(--co-miniature-min-width), 1fr)
       );
 
       @if ($rows-limit != 0) {
@@ -158,8 +158,8 @@
         my-video-miniature,
         my-video-playlist-miniature {
           display: block;
-          min-width: var(--miniatureMinWidth);
-          max-width: var(--miniatureMaxWidth);
+          min-width: var(--co-miniature-min-width);
+          max-width: var(--co-miniature-max-width);
         }
       }
 
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index cbf919119..c100e8490 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -28,7 +28,7 @@
 }
 
 @mixin muted {
-  color: pvar(--main-fg-400) !important;
+  color: pvar(--fg-300) !important;
 }
 
 @mixin fade-text ($fade-after, $background-color) {
@@ -103,7 +103,7 @@
   }
 
   &[readonly] {
-    color: pvar(--main-fg-400);
+    color: pvar(--fg-300);
   }
 
   &:focus,
@@ -167,15 +167,15 @@
   & {
     color: pvar(--fg);
     background-color: transparent;
-    border: 1px solid pvar(--secondary-500);
+    border: 1px solid pvar(--bg-secondary-500);
   }
 
   &:active,
   &:focus,
   &:focus-visible {
     color: pvar(--fg);
-    background-color: pvar(--secondary-450);
-    border-color: pvar(--secondary-500);
+    background-color: pvar(--bg-secondary-450);
+    border-color: pvar(--bg-secondary-500);
   }
 
   // Override bootstrap
@@ -183,13 +183,13 @@
   &.btn:focus-visible,
   &.btn.show {
     color: pvar(--fg) !important;
-    background-color: pvar(--secondary-450) !important;
-    border-color: pvar(--secondary-500) !important;
+    background-color: pvar(--bg-secondary-450) !important;
+    border-color: pvar(--bg-secondary-500) !important;
   }
 
   &:hover {
     color: pvar(--fg);
-    background-color: pvar(--secondary-450);
+    background-color: pvar(--bg-secondary-450);
   }
 
   &[disabled] {
@@ -198,18 +198,18 @@
   }
 
   my-global-icon {
-    color: pvar(--secondary-750);
+    color: pvar(--secondary-icon-color);
   }
 }
 
 @mixin tertiary-button {
-  color: pvar(--main-fg-300);
+  color: pvar(--fg-200);
   background-color: transparent;
   border: 1px solid transparent;
 
   &:hover {
-    color: pvar(--main-fg-300);
-    background-color: pvar(--secondary-400);
+    color: pvar(--fg-200);
+    background-color: pvar(--bg-secondary-400);
   }
 
   &[disabled] {
@@ -217,20 +217,20 @@
   }
 
   &:active {
-    background-color: pvar(--secondary-450);
+    background-color: pvar(--bg-secondary-450);
   }
 
   &.show {
-    border-color: pvar(--main-fg-300);
+    border-color: pvar(--fg-200);
   }
 
   // Override bootstrap
   &.btn:active {
-    background-color: pvar(--secondary-200) !important;
+    background-color: pvar(--bg-secondary-200) !important;
   }
 
   &.btn.show {
-    border-color: pvar(--main-fg-300) !important;
+    border-color: pvar(--fg-200) !important;
   }
 }
 
@@ -406,7 +406,7 @@
     position: absolute;
     pointer-events: none;
     border: 5px solid rgba(0, 0, 0, 0);
-    border-top-color: pvar(--secondary);
+    border-top-color: pvar(--bg-secondary-500);
     margin-top: -2px;
     z-index: 100;
   }
@@ -563,7 +563,7 @@
 }
 
 @mixin actor-counters ($separator-margin: 10px) {
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
   display: flex;
   align-items: center;
 
@@ -617,7 +617,7 @@
   }
 }
 
-@mixin divider($color: pvar(--secondary-400), $background: pvar(--bg)) {
+@mixin divider($color: pvar(--bg-secondary-400), $background: pvar(--bg)) {
   width: 95%;
   border-top: .05rem solid $color;
   height: .05rem;
@@ -724,7 +724,7 @@
   border-top: #{math.div($height, 2)} solid transparent;
   border-bottom: #{math.div($height, 2)} solid transparent;
 
-  border-left: $width solid pvar(--secondary-300);
+  border-left: $width solid pvar(--bg-secondary-300);
 }
 
 @mixin on-small-main-col () {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 6d9274970..c6d086d14 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -26,7 +26,7 @@ $white: #fff;
 
 $button-font-size: 1rem;
 
-$header-height: 84px;
+$header-height: 94px;
 
 $menu-background: #221A1A;
 $menu-color: #E9DFDF;
@@ -63,8 +63,6 @@ $player-portrait-bottom-space: 50px;
 $sub-menu-margin-bottom: 30px;
 $sub-menu-margin-bottom-small-view: 10px;
 
-$activated-action-button-color: hsl(210, 11%, 15%);
-
 $focus-box-shadow-form: 0 0 0 .2rem;
 $form-input-font-size: 16px;
 
@@ -109,22 +107,27 @@ $variables: (
   --support-btn-fg: var(--support-btn-fg),
   --support-btn-heart-bg: var(--support-btn-heart-bg),
 
-  --main-fg: var(--main-fg),
-  --main-fg-800: var(--main-fg-800),
-  --main-fg-750: var(--main-fg-750),
-  --main-fg-700: var(--main-fg-700),
-  --main-fg-650: var(--main-fg-650),
-  --main-fg-600: var(--main-fg-600),
-  --main-fg-550: var(--main-fg-550),
-  --main-fg-500: var(--main-fg-500),
-  --main-fg-450: var(--main-fg-450),
-  --main-fg-400: var(--main-fg-400),
-  --main-fg-350: var(--main-fg-350),
-  --main-fg-300: var(--main-fg-300),
-  --main-fg-250: var(--main-fg-250),
-  --main-fg-200: var(--main-fg-200),
-  --main-fg-150: var(--main-fg-150),
-  --main-fg-100: var(--main-fg-100),
+  --secondary-icon-color: var(--secondary-icon-color),
+
+  --fg-500: var(--fg-500),
+  --fg-450: var(--fg-450),
+  --fg-400: var(--fg-400),
+  --fg-350: var(--fg-350),
+  --fg-300: var(--fg-300),
+  --fg-250: var(--fg-250),
+  --fg-200: var(--fg-200),
+  --fg-150: var(--fg-150),
+  --fg-100: var(--fg-100),
+  --fg-50: var(--fg-50),
+
+  --bg-secondary-600: var(--bg-secondary-600),
+  --bg-secondary-500: var(--bg-secondary-500),
+  --bg-secondary-450: var(--bg-secondary-450),
+  --bg-secondary-400: var(--bg-secondary-400),
+  --bg-secondary-350: var(--bg-secondary-350),
+  --bg-secondary-300: var(--bg-secondary-300),
+  --bg-secondary-250: var(--bg-secondary-250),
+  --bg-secondary-200: var(--bg-secondary-200),
 
   --on-primary: var(--on-primary),
 
@@ -146,22 +149,9 @@ $variables: (
   --primary-100: var(--primary-100),
   --primary-50: var(--primary-50),
 
-  --secondary: var(--secondary),
-  --secondary-800: var(--secondary-800),
-  --secondary-750: var(--secondary-750),
-  --secondary-700: var(--secondary-700),
-  --secondary-650: var(--secondary-650),
-  --secondary-600: var(--secondary-600),
-  --secondary-550: var(--secondary-550),
-  --secondary-500: var(--secondary-500),
-  --secondary-450: var(--secondary-450),
-  --secondary-400: var(--secondary-400),
-  --secondary-350: var(--secondary-350),
-  --secondary-300: var(--secondary-300),
-  --secondary-250: var(--secondary-250),
-  --secondary-200: var(--secondary-200),
-  --secondary-150: var(--secondary-150),
-  --secondary-100: var(--secondary-100)
+  // Optional variables
+  --menu-fg: var(--menu-fg),
+  --menu-bg: var(--menu-bg)
 );
 
 // SASS type check our CSS variables
@@ -173,6 +163,14 @@ $variables: (
   }
 }
 
+@function pvar-fallback($variable, $fallback) {
+  @if map.has-key($variables, $variable) and map.has-key($variables, $fallback) {
+    @return var($variable, map.get($variables, $fallback));
+  } @else {
+    @error 'ERROR: Variable #{$variable} does not exist';
+  }
+}
+
 /*** z-index groups ***/
 
 $zindex: (
diff --git a/client/src/sass/player/dock.scss b/client/src/sass/player/dock.scss
index 57d95908b..a21b54678 100644
--- a/client/src/sass/player/dock.scss
+++ b/client/src/sass/player/dock.scss
@@ -6,7 +6,7 @@
 .video-js.vjs-peertube-skin {
 
   .peertube-dock {
-    --avatarSize: 48px;
+    --dock-avatar-size: 48px;
 
     transition: opacity 0.1s;
 
@@ -28,10 +28,10 @@
   .peertube-dock-avatar {
     border-radius: 50%;
     margin-right: 10px;
-    min-width: var(--avatarSize);
-    min-height: var(--avatarSize);
-    max-height: var(--avatarSize);
-    max-height: var(--avatarSize);
+    min-width: var(--dock-avatar-size);
+    min-height: var(--dock-avatar-size);
+    max-height: var(--dock-avatar-size);
+    max-height: var(--dock-avatar-size);
   }
 
   .peertube-dock-title-description {
@@ -70,7 +70,7 @@
 
 .video-js.vjs-peertube-skin.vjs-size-750 {
   .peertube-dock-avatar {
-    --avatarSize: 40px;
+    --dock-avatar-size: 40px;
   }
 
   .peertube-dock {
@@ -85,7 +85,7 @@
 
 .video-js.vjs-peertube-skin.vjs-size-570 {
   .peertube-dock-avatar {
-    --avatarSize: 35px;
+    --dock-avatar-size: 35px;
   }
 
   .peertube-dock {
@@ -95,7 +95,7 @@
 
 .video-js.vjs-peertube-skin.vjs-size-350 {
   .peertube-dock-avatar {
-    --avatarSize: 30px;
+    --dock-avatar-size: 30px;
   }
 
   .peertube-dock {
diff --git a/client/src/sass/player/offline-notification.scss b/client/src/sass/player/offline-notification.scss
index 0471fb7db..e806db3e4 100644
--- a/client/src/sass/player/offline-notification.scss
+++ b/client/src/sass/player/offline-notification.scss
@@ -7,7 +7,7 @@ $height: 40px;
   right: 0;
   height: $height;
   color: pvar(--on-primary);
-  background-color: var(--primary-50);
+  background-color: pvar(--primary-50);
   text-align: center;
   z-index: 1;
   display: flex;
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 45dd7d776..ea920e2b5 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -67,7 +67,7 @@ body {
 
     &:focus-visible,
     &:hover {
-      background-color: var(--primary, #696969);
+      background-color: pvar(--primary);
     }
   }
 
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 9513a1c7f..86db9b6ef 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -56,7 +56,7 @@ body .p-paginator .p-paginator-first,
 body .p-paginator .p-paginator-prev,
 body .p-paginator .p-paginator-next,
 body .p-paginator .p-paginator-last {
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
   height: 2.286em;
   min-width: 2.286em;
   border: 0 none;
@@ -89,7 +89,7 @@ body .p-paginator .p-paginator-current {
   line-height: 2.286em;
 }
 body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
 }
 body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
   color: #333333;
@@ -116,7 +116,7 @@ body .p-paginator .p-paginator-pages {
   padding: 0;
 }
 body .p-paginator .p-paginator-pages .p-paginator-page {
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
   height: 2.286em;
   min-width: 2.286em;
   border: 0 none;
@@ -180,10 +180,10 @@ body .p-dropdown .p-dropdown-trigger {
   width: 2rem;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
 }
 body .p-dropdown .p-dropdown-clear-icon {
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
   right: 2rem;
 }
 body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
@@ -484,7 +484,7 @@ body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
 .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.25rem var(--primary-100);
+  box-shadow: 0 0 0 0.25rem pvar(--primary-100);
 }
 .p-chips .p-chips-multiple-container {
   padding: 3px 15px;
@@ -521,7 +521,7 @@ p-chips.p-chips-clearable .p-inputtext {
   padding-right: 1.429rem;
 }
 p-chips.p-chips-clearable .p-chips-clear-icon {
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
   right: 0.429rem;
 }
 
@@ -540,7 +540,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
 .p-multiselect:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.25rem var(--primary-100);
+  box-shadow: 0 0 0 0.25rem pvar(--primary-100);
 }
 .p-multiselect .p-multiselect-label {
   padding: 4px 15px;
@@ -584,7 +584,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
   padding-right: 1.429rem;
 }
 .p-multiselect-clearable .p-multiselect-clear-icon {
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
   right: 2.357rem;
 }
 
@@ -609,7 +609,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
 }
 .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
   right: 0.429rem;
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
 }
 .p-multiselect-panel .p-multiselect-header .p-checkbox {
   margin-right: 0.5rem;
@@ -618,7 +618,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
   margin-left: 0.5rem;
   width: 2rem;
   height: 2rem;
-  color: pvar(--main-fg-400);
+  color: pvar(--fg-300);
   border: 0 none;
   background: transparent;
   border-radius: 50%;
@@ -713,7 +713,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
 .p-inputtext:enabled:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.25rem var(--primary-100);
+  box-shadow: 0 0 0 0.25rem pvar(--primary-100);
 }
 .p-inputtext.ng-dirty.ng-invalid {
   border-color: pvar(--red);
@@ -806,7 +806,7 @@ p-table {
     height: 46px;
 
     &.p-highlight {
-      background-color: pvar(--secondary-400) !important;
+      background-color: pvar(--bg-secondary-400) !important;
 
       td, td > a {
         color: pvar(--fg) !important;
@@ -821,7 +821,7 @@ p-table {
   .p-datatable-tbody {
     tr {
       &:hover {
-        background-color: pvar(--secondary-400) !important;
+        background-color: pvar(--bg-secondary-400) !important;
       }
 
       td {
@@ -859,13 +859,13 @@ p-table {
 
     border: none !important;
     border-bottom: 1px solid !important;
-    border-color: pvar(--secondary-400) !important;
+    border-color: pvar(--bg-secondary-400) !important;
     text-align: start !important;
     font-weight: $font-semibold !important;
     color: pvar(--fg) !important;
 
     &.p-sortable-column:hover {
-      background-color: pvar(--secondary-400) !important;
+      background-color: pvar(--bg-secondary-400) !important;
     }
 
     &.p-sortable-column:focus-visible {
@@ -873,7 +873,7 @@ p-table {
     }
 
     &.p-highlight {
-      background-color: pvar(--secondary-400) !important;
+      background-color: pvar(--bg-secondary-400) !important;
 
       .pi-sort-amount-up-alt,
       .pi-sort-amount-down {
@@ -915,7 +915,7 @@ p-table {
       position: relative;
       border: none;
       border-top: 1px solid !important;
-      border-color: pvar(--secondary-400) !important;
+      border-color: pvar(--bg-secondary-400) !important;
       height: 40px;
       display: flex;
       justify-content: center;
@@ -933,7 +933,7 @@ p-table {
         }
 
         .p-label {
-          color: pvar(--main-fg-400);
+          color: pvar(--fg-300);
         }
       }
 
@@ -944,7 +944,7 @@ p-table {
       }
 
       .p-paginator-current {
-        color: pvar(--main-fg-400);
+        color: pvar(--fg-300);
         overflow: visible;
       }
 
@@ -1088,7 +1088,7 @@ p-toast {
     min-width: 200px;
 
     .p-toast-icon-close {
-      color: pvar(--main-fg-400);
+      color: pvar(--fg-300);
       position: absolute;
       right: 5px;
       top: 5px;