diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index 01a59e3ba..0f6b2b130 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -1,22 +1,4 @@
-:root, .funkwhale {
-  @include light-theme {
-    --fw-bg-color: var(--fw-blue-010);
-    --fw-text-color: var(--fw-blue-900);
-  }
-
-  @include dark-theme {
-    --fw-bg-color: var(--fw-gray-900);
-    --fw-text-color: var(--fw-gray-100);
-  }
-}
-
-@if $docs {
-  body {
-    @include dark-theme {
-      --vp-c-bg: var(--fw-page-bg-color) !important;
-    }
-  }
-}
+// (1) Palette
 
 :root {
   // Blue
@@ -91,133 +73,17 @@
   --fw-pastel-yellow-4: #efa300;
 
   // Same in light and dark theme
-  --fw-primary: var(--fw-blue-500);
   --fw-secondary: #ff6600;
-  --fw-destructive: var(--fw-red-500);
-
-  // Globals
-  --fw-page-bg-color: var(--fw-gray-960);
-}
-
-:is(.VPDoc .vp-doc, .funkwhale){
-
-  // Fallback for Links without explicit color props
-
-  a {
-    color:var(--link-color);
-    &:hover {
-      color:var(--link-hover-color);
-    }
-  }
-
-  // Fallback for focused elements without explicit focus-outline
-
-  :is(button, input, a):focus-visible {
-    outline: 3px solid var(--fw-secondary);
-    outline-offset: 2px;
-  }
-
-    // Variants
-  .solid, .alert>.actions>button, button:not(:is(.ghost,.outline,.tabs-item)) {
-    color: var(--color);
-    background-color:var(--background-color);
-    border: 1px solid var(--background-color);
-
-    &.interactive {
-      &[aria-pressed=true] {
-        color: var(--pressed-color, var(--active-color));
-        background-color: var(--pressed-background-color, var(--active-background-color));
-        border-color: var(--pressed-background-color, var(--active-background-color));
-      }
-      &:hover {
-        color:var(--hover-color);
-        background-color:var(--hover-background-color);
-        border-color: var(--hover-background-color);
-      }
-      &:is(:active, .active) {
-        color:var(--active-color);
-        background-color:var(--active-background-color);
-        border-color: var(--active-background-color);
-      }
-      &[disabled] {
-        color: var(--disabled-color);
-        border-color: var(--disabled-border-color);
-        background-color:var(--disabled-background-color);
-      }
-    }
-  }
-
-
-  .ghost {
-    color: var(--color);
-    background-color: transparent;
-    border: 1px solid transparent;
-
-    &.interactive{
-      &[aria-pressed=true] {
-        color: var(--pressed-color, var(--active-color));
-        background-color: var(--pressed-background-color, var(--active-background-color));
-        border-color: var(--pressed-background-color, var(--active-background-color));
-      }
-      &:hover {
-        background-color: var(--hover-background-color);
-        border-color: var(--hover-background-color);
-      }
-      &:active {
-        background-color: var(--active-background-color);
-      }
-      &[disabled] {
-        color: var(--disabled-color);
-        border-color: var(--disabled-border-color);
-        background-color:var(--disabled-background-color);
-      }
-      // Link
-      &.active {
-        border-color: var(--link-active-border-color);
-      }
-      &.router-link-exact-active {
-        background-color: var(--link-exact-active-background-color, var(--active-background-color));
-        border-color: var(--link-exact-active-border-color);
-      }
-    }
-  }
-
-  .outline {
-    color: var(--color);
-    background-color: transparent;
-    border: 1px solid var(--border-color);
-
-    &.interactive{
-      &[aria-pressed=true] {
-        color: var(--pressed-color, var(--active-color));
-        background-color: var(--pressed-background-color, var(--active-background-color));
-        border-color: var(--pressed-background-color, var(--active-background-color));
-      }
-      &:hover{
-        border-color: var(--hover-background-color);
-      }
-      &:is(:active, .active) {
-        border-color: var(--active-background-color);
-        &.router-link-exact-active {
-          background-color: var(--exact-active-background-color);
-        }
-      }
-      &[disabled] {
-        color: var(--disabled-color);
-        border-color: var(--disabled-border-color);
-        background-color:var(--disabled-background-color);
-      }
-    }
-  }
 }
 
+// (2) Choosing the semantic colors from the palette
 
 :root{
   @include light-theme {
-    --link-color:var(--fw-blue-400);
-    --link-hover-color:var(--fw-blue-500);
-
     .default {
+      --link-color:var(--fw-blue-400);
+      --link-hover-color:var(--fw-blue-500);
+
       --color: var(--fw-gray-900);
       --background-color: var(--fw-beige-100);
       --border-color:var(--fw-gray-300);
@@ -237,7 +103,7 @@
       --disabled-background-color:var(--fw-beige-100);
       --disabled-border-color:var(--fw-beige-100);
 
-      &.raised{
+      &.raised {
         --background-color:var(--fw-beige-300);
         --border-color:var(--fw-beige-400);
       }
@@ -416,9 +282,9 @@
   }
 
   @include dark-theme {
-    --link-color:var(--fw-gray-300);
-    --link-hover-color:var(--fw-gray-200);
-    .default, body {
+    .default {
+      --link-color:var(--fw-gray-300);
+      --link-hover-color:var(--fw-gray-200);
       --color: var(--fw-beige-100);
       --background-color: var(--fw-gray-970);
       --border-color:var(--fw-gray-700);
@@ -450,7 +316,7 @@
       --link-exact-active-border-color:var(--fw-secondary);
     }
 
-    .secondary, button {
+    .secondary {
       --color: var(--fw-gray-300);
       --background-color: var(--fw-gray-850);
       --border-color:var(--fw-gray-600);
@@ -530,12 +396,12 @@
     }
 
     .blue {
-      --color: var(--fw-blue-900);
-      --background-color: var(--fw-pastel-blue-1);
+      --color: var(--fw-pastel-blue-1);
+      --background-color: color-mix(in oklab, black 66%, var(--fw-pastel-blue-1));
       &.raised, .action>button {
-        --background-color: var(--fw-pastel-blue-2);
-        --hover-background-color: var(--fw-pastel-blue-3);
-        --active-background-color: var(--fw-pastel-blue-4);
+        --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-2));
+        --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-3));
+        --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-4));
         --disabled-color: var(--fw-gray-700);
         --disabled-border-color: var(--fw-gray-400);
         --disabled-background-color: transparent;
@@ -543,12 +409,12 @@
     }
 
     .red {
-      --color: var(--fw-red-900);
-      --background-color: var(--fw-pastel-red-2);
+      --color: var(--fw-pastel-red-1);
+      --background-color: color-mix(in oklab, black 66%, var(--fw-pastel-red-2));
       &.raised, .action>button {
-        --background-color: var(--fw-pastel-red-2);
-        --hover-background-color: var(--fw-pastel-red-3);
-        --active-background-color: var(--fw-pastel-red-4);
+        --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-2));
+        --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-3));
+        --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-4));
         --disabled-color: var(--fw-gray-700);
         --disabled-border-color: var(--fw-gray-400);
         --disabled-background-color: transparent;
@@ -556,12 +422,12 @@
     }
 
     .purple {
-      --color: var(--fw-gray-970);
-      --background-color: var(--fw-pastel-purple-1);
+      --color: var(--fw-gray-100);
+      --background-color: color-mix(in oklab, black 55%, var(--fw-pastel-purple-1));
       &.raised, .action>button {
-        --background-color: var(--fw-pastel-purple-2);
-        --hover-background-color: var(--fw-pastel-purple-3);
-        --active-background-color: var(--fw-pastel-purple-4);
+        --background-color: color-mix(in oklab, black 61%, var(--fw-pastel-purple-2));
+        --hover-background-color: color-mix(in oklab, black 66%, var(--fw-pastel-purple-3));
+        --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-purple-4));
         --disabled-color: var(--fw-gray-700);
         --disabled-border-color: var(--fw-gray-400);
         --disabled-background-color: transparent;
@@ -569,12 +435,12 @@
     }
 
     .green {
-      --color: var(--fw-gray-900);
-      --background-color: var(--fw-pastel-green-1);
+      --color: var(--fw-pastel-green-1);
+      --background-color: color-mix(in oklab, black 66%, var(--fw-pastel-green-1));
       &.raised, .action>button {
-        --background-color: var(--fw-pastel-green-2);
-        --hover-background-color: var(--fw-pastel-green-3);
-        --active-background-color: var(--fw-pastel-green-4);
+        --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-2));
+        --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-3));
+        --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-4));
         --disabled-color: var(--fw-gray-700);
         --disabled-border-color: var(--fw-gray-400);
         --disabled-background-color: transparent;
@@ -582,12 +448,12 @@
     }
 
     .yellow {
-      --color: var(--fw-gray-900);
-      --background-color: var(--fw-pastel-yellow-1);
+      --color: var(--fw-pastel-yellow-1);
+      --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-1));
       &.raised, .action>button {
-        --background-color: var(--fw-pastel-yellow-2);
-        --hover-background-color: var(--fw-pastel-yellow-3);
-        --active-background-color: var(--fw-pastel-yellow-4);
+        --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-2));
+        --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-3));
+        --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-4));
         --disabled-color: var(--fw-gray-700);
         --disabled-border-color: var(--fw-gray-400);
         --disabled-background-color: transparent;
@@ -595,3 +461,121 @@
     }
   }
 }
+
+// (3) Applying colors
+
+:is(.VPDoc .vp-doc, .funkwhale){
+
+  // (3a) Applying colors to everything that has no explicit color props
+
+  color: var(--color);
+
+  // Fallback for Links without explicit color props
+
+  a {
+    color:var(--link-color);
+    &:hover {
+      color:var(--link-hover-color);
+    }
+  }
+
+  // Fallback for focused elements without explicit focus-outline
+
+  :is(button, input, a):focus-visible {
+    outline: 3px solid var(--fw-secondary);
+    outline-offset: 2px;
+  }
+
+  // (3b) Applying colors to things with explicit Variant props
+
+  .solid, .alert>.actions>button, button:not(:is(.ghost,.outline,.tabs-item)) {
+    color: var(--color);
+    background-color:var(--background-color);
+    border: 1px solid var(--background-color);
+
+    &.interactive {
+      &[aria-pressed=true] {
+        color: var(--pressed-color, var(--active-color));
+        background-color: var(--pressed-background-color, var(--active-background-color));
+        border-color: var(--pressed-background-color, var(--active-background-color));
+      }
+      &:hover {
+        color:var(--hover-color);
+        background-color:var(--hover-background-color);
+        border-color: var(--hover-background-color);
+      }
+      &:is(:active, .active) {
+        color:var(--active-color);
+        background-color:var(--active-background-color);
+        border-color: var(--active-background-color);
+      }
+      &[disabled] {
+        color: var(--disabled-color);
+        border-color: var(--disabled-border-color);
+        background-color:var(--disabled-background-color);
+      }
+    }
+  }
+
+  .ghost {
+    color: var(--color);
+    background-color: transparent;
+    border: 1px solid transparent;
+
+    &.interactive{
+      &[aria-pressed=true] {
+        color: var(--pressed-color, var(--active-color));
+        background-color: var(--pressed-background-color, var(--active-background-color));
+        border-color: var(--pressed-background-color, var(--active-background-color));
+      }
+      &:hover {
+        background-color: var(--hover-background-color);
+        border-color: var(--hover-background-color);
+      }
+      &:active {
+        background-color: var(--active-background-color);
+      }
+      &[disabled] {
+        color: var(--disabled-color);
+        border-color: var(--disabled-border-color);
+        background-color:var(--disabled-background-color);
+      }
+      // Link
+      &.active {
+        border-color: var(--link-active-border-color);
+      }
+      &.router-link-exact-active {
+        background-color: var(--link-exact-active-background-color, var(--active-background-color));
+        border-color: var(--link-exact-active-border-color);
+      }
+    }
+  }
+
+  .outline {
+    color: var(--color);
+    background-color: transparent;
+    border: 1px solid var(--border-color);
+
+    &.interactive{
+      &[aria-pressed=true] {
+        color: var(--pressed-color, var(--active-color));
+        background-color: var(--pressed-background-color, var(--active-background-color));
+        border-color: var(--pressed-background-color, var(--active-background-color));
+      }
+      &:hover{
+        border-color: var(--hover-background-color);
+      }
+      &:is(:active, .active) {
+        border-color: var(--active-background-color);
+        &.router-link-exact-active {
+          background-color: var(--exact-active-background-color);
+        }
+      }
+      &[disabled] {
+        color: var(--disabled-color);
+        border-color: var(--disabled-border-color);
+        background-color:var(--disabled-background-color);
+      }
+    }
+  }
+}