diff --git a/packages/stage-ui/stories/ThemeColorsHueControl.vue b/packages/stage-ui/stories/ThemeColorsHueControl.vue
index 413c51602..3521ea730 100644
--- a/packages/stage-ui/stories/ThemeColorsHueControl.vue
+++ b/packages/stage-ui/stories/ThemeColorsHueControl.vue
@@ -29,9 +29,8 @@ watch(themeColorsHue, () => {
       min="0"
       max="360"
       step="0.01"
-      class="theme-hue-slider"
+      class="chromatic-hue-slider"
     >
-
     <button
       class="mt-2 rounded-md px-2 py-1 text-xs transition-colors"
       bg="neutral-200 dark:neutral-800 hover:neutral-200 dark:hover:neutral-700"
@@ -42,3 +41,40 @@ watch(themeColorsHue, () => {
     </button>
   </div>
 </template>
+
+<style>
+.chromatic-hue-slider {
+  outline: none;
+  --at-apply: rounded-lg appearance-none h-10;
+  background: linear-gradient(
+    to right,
+    oklch(85% 0.2 0),
+    oklch(85% 0.2 60),
+    oklch(85% 0.2 120),
+    oklch(85% 0.2 180),
+    oklch(85% 0.2 240),
+    oklch(85% 0.2 300),
+    oklch(85% 0.2 360)
+  );
+}
+
+.chromatic-hue-slider::-webkit-slider-thumb {
+  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
+    hover: bg-neutral-800 transition-colors duration-200;
+}
+
+.htw-dark .chromatic-hue-slider::-webkit-slider-thumb {
+  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
+    hover: bg-neutral-300 transition-colors duration-200;
+}
+
+.chromatic-hue-slider::-moz-range-thumb {
+  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
+    hover: bg-neutral-800 transition-colors duration-200;
+}
+
+.htw-dark .chromatic-hue-slider::-moz-range-thumb {
+  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
+    hover: bg-neutral-300 transition-colors duration-200;
+}
+</style>
diff --git a/packages/stage-ui/stories/main.css b/packages/stage-ui/stories/main.css
index 398b21f68..e4586e0ca 100755
--- a/packages/stage-ui/stories/main.css
+++ b/packages/stage-ui/stories/main.css
@@ -43,38 +43,3 @@ html.htw-dark {
 .primary-color-bar {
   --at-apply: w-full h-full flex-1 flex items-center justify-center;
 }
-
-.theme-hue-slider {
-  outline: none;
-  --at-apply: rounded-lg appearance-none h-10;
-  background: linear-gradient(
-    to right,
-    oklch(85% 0.2 0),
-    oklch(85% 0.2 60),
-    oklch(85% 0.2 120),
-    oklch(85% 0.2 180),
-    oklch(85% 0.2 240),
-    oklch(85% 0.2 300),
-    oklch(85% 0.2 360)
-  );
-}
-
-.theme-hue-slider::-webkit-slider-thumb {
-  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
-    hover: bg-neutral-800 transition-colors duration-200;
-}
-
-.htw-dark .theme-hue-slider::-webkit-slider-thumb {
-  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
-    hover: bg-neutral-300 transition-colors duration-200;
-}
-
-.theme-hue-slider::-moz-range-thumb {
-  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
-    hover: bg-neutral-800 transition-colors duration-200;
-}
-
-.htw-dark .theme-hue-slider::-moz-range-thumb {
-  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
-    hover: bg-neutral-300 transition-colors duration-200;
-}