diff --git a/packages/styles/index.html b/packages/styles/index.html
index 53ef398d94..40d3a5919e 100644
--- a/packages/styles/index.html
+++ b/packages/styles/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Styles playground</title>
-    <link id="tokens" rel="stylesheet" href="src/post-tokens-external.scss" />
+    <link id="tokens" rel="stylesheet" href="src/post-external.scss" />
     <link rel="stylesheet" href="src/elements/_index.scss" />
     <link rel="stylesheet" href="src/components/_index.scss" />
   </head>
@@ -17,20 +17,49 @@ <h1>Styles package playground</h1>
       >
       to get going.
     </p>
-    <label for="tokens-select">Select tokens package: </label>
+    <label for="tokens-select">Select theme: </label>
     <select
       name="tokens"
       id="tokens-select"
       value="external"
       class="mb-4"
-      onchange="document.getElementById('tokens').setAttribute('href', `/src/post-tokens-${this.value}.scss`)"
+      onchange="document.getElementById('tokens').setAttribute('href', `/src/${this.value}-external.scss`)"
     >
-      <option value="external">Post external</option>
-      <option value="internal">Post internal</option>
+      <option value="post">Post</option>
+      <option value="cargo">Cargo</option>
     </select>
     <hr />
 
     <!-- Place your component markup here -->
-    <button class="btn btn-primary">Primary button</button>
+    <div class="p-24">
+      I am light.
+      <div class="palette-alternate p-24">
+        <h2 class="palette-text">
+          I use a specific color from the palette (it might be the same as the body color).
+        </h2>
+        <p>I use the main body color.</p>
+      </div>
+      <div class="palette-brand p-24">
+        <h2 class="palette-text">
+          I use a specific color from the palette (it might be the same as the body color).
+        </h2>
+        <p>I use the main body color.</p>
+      </div>
+    </div>
+    <div class="p-24" data-color-scheme="dark">
+      I am supposed to be dark.
+      <div class="palette-alternate p-24">
+        <h2 class="palette-text">
+          I use a specific color from the palette (it might be the same as the body color).
+        </h2>
+        <p>I use the main body color.</p>
+      </div>
+      <div class="palette-brand p-24">
+        <h2 class="palette-text">
+          I use a specific color from the palette (it might be the same as the body color).
+        </h2>
+        <p>I use the main body color.</p>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/packages/styles/src/palettes/_mixins.scss b/packages/styles/src/palettes/_mixins.scss
index d765c2b5d9..7890e5e20a 100644
--- a/packages/styles/src/palettes/_mixins.scss
+++ b/packages/styles/src/palettes/_mixins.scss
@@ -12,19 +12,16 @@
 
 @mixin generate-palette-class($name, $theme) {
   .palette-#{$name} {
-    &,
-    &:is([data-color-scheme='light'], [data-color-scheme='light'] *) {
-      @include palette-styles($name, $theme, 'light', $redefine-tokens: true);
-    }
+    @include palette-styles($name, $theme, 'light', $redefine-tokens: true);
 
-    &:is([data-color-scheme='dark'], [data-color-scheme='dark'] *) {
+    [data-color-scheme='dark'] & {
       @include palette-styles($name, $theme, 'dark', $redefine-tokens: true);
     }
   }
 }
 
 @mixin default-palette-styles($theme) {
-  &:not([data-color-scheme='dark']) {
+  & {
     @include palette-styles($default-palette, $theme, 'light');
   }
 
@@ -37,14 +34,9 @@
   $palette: map.get(meta.module-variables(palettes), '#{$theme}-#{$scheme}');
 
   @if ($palette) {
-    --post-palette-fg: #{tokens.get('palettes-color-#{$name}-fg', palettes.$post-palettes)};
-    --post-palette-bg: #{tokens.get('palettes-color-#{$name}-bg', palettes.$post-palettes)};
-    background-color: var(--post-palette-bg) !important;
+    background-color: tokens.get('palettes-color-#{$name}-bg', palettes.$post-palettes) !important;
 
     @if ($redefine-tokens == true) {
-      // redefining the body color is required so that the new color scheme is taken into account
-      color: tokens.get('body-color', elements.$post-body);
-
       $bg-scheme: tokens.get('helper-color-#{$name}-bg-scheme', $palette);
       @if ($bg-scheme == 'light') {
         @extend %color-scheme-light;
