diff --git a/apps/playground-prompt-engineering/src/components/Form/Range/Range.vue b/apps/playground-prompt-engineering/src/components/Form/Range/Range.vue
index e44c64365..5353dc08c 100644
--- a/apps/playground-prompt-engineering/src/components/Form/Range/Range.vue
+++ b/apps/playground-prompt-engineering/src/components/Form/Range/Range.vue
@@ -46,6 +46,11 @@ function updateTrackColor() {
   sliderRef.value.style.setProperty('--min', !sliderRef.value.min ? props.min.toString() : sliderRef.value.min)
   sliderRef.value.style.setProperty('--max', !sliderRef.value.max ? props.max.toString() : sliderRef.value.max)
 }
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  target.style.setProperty('--value', target.value)
+}
 </script>
 
 <template>
@@ -57,9 +62,7 @@ function updateTrackColor() {
     :max="scaledMax"
     :step="scaledStep"
     class="slider-progress form_input-range"
-    @input="(e) => {
-      (e.target as HTMLInputElement).style.setProperty('--value', (e.target as HTMLInputElement).value)
-    }"
+    @input="handleInput"
   >
 </template>
 
@@ -80,9 +83,9 @@ https://toughengineer.github.io/demo/slider-styler*/
   --thumb-box-shadow: 0 0 0px #e6e6e6;
   --thumb-border: none;
   --thumb-border-radius: 999px;
-  --thumb-background: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-active: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-active: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
 
   --track-height: calc(var(--height) - var(--track-value-padding) * 2);
   --track-box-shadow: none;
@@ -99,9 +102,9 @@ https://toughengineer.github.io/demo/slider-styler*/
 }
 
 .dark .form_input-range {
-  --thumb-background: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-active: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-active: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
 
   --track-border: solid 2px rgb(44, 44, 44);
   --track-background: rgb(44, 44, 44);
diff --git a/apps/playground-prompt-engineering/src/styles/main.css b/apps/playground-prompt-engineering/src/styles/main.css
index 08ab0d2dc..a05b67ae9 100755
--- a/apps/playground-prompt-engineering/src/styles/main.css
+++ b/apps/playground-prompt-engineering/src/styles/main.css
@@ -1,4 +1,3 @@
-@import './themes.css';
 @import './transitions.css';
 
 html,
diff --git a/apps/playground-prompt-engineering/src/styles/themes.css b/apps/playground-prompt-engineering/src/styles/themes.css
deleted file mode 100644
index 3be3e36e1..000000000
--- a/apps/playground-prompt-engineering/src/styles/themes.css
+++ /dev/null
@@ -1,14 +0,0 @@
-:root {
-  --theme-colors-hue: 220.31;
-  --theme-colors-chroma: calc(0.18 + (cos(var(--theme-colors-hue) * 3.14159265 / 180) * 0.04));
-  --theme-colors-chroma-50: calc(var(--theme-colors-chroma) * 0.3);
-  --theme-colors-chroma-100: calc(var(--theme-colors-chroma) * 0.5);
-  --theme-colors-chroma-200: calc(var(--theme-colors-chroma) * 0.6);
-  --theme-colors-chroma-300: calc(var(--theme-colors-chroma) * 0.75);
-  --theme-colors-chroma-400: var(--theme-colors-chroma);
-  --theme-colors-chroma-600: calc(var(--theme-colors-chroma) * 1.15);
-  --theme-colors-chroma-700: calc(var(--theme-colors-chroma) * 1.1);
-  --theme-colors-chroma-800: calc(var(--theme-colors-chroma) * 0.85);
-  --theme-colors-chroma-900: calc(var(--theme-colors-chroma) * 0.7);
-  --theme-colors-chroma-950: calc(var(--theme-colors-chroma) * 0.5);
-}
diff --git a/apps/stage-tamagotchi/src/App.vue b/apps/stage-tamagotchi/src/App.vue
index cb16e0ef9..1fc647b3d 100644
--- a/apps/stage-tamagotchi/src/App.vue
+++ b/apps/stage-tamagotchi/src/App.vue
@@ -28,7 +28,7 @@ onMounted(() => {
 })
 
 watch(themeColorsHue, () => {
-  document.documentElement.style.setProperty('--theme-colors-hue', themeColorsHue.value.toString())
+  document.documentElement.style.setProperty('--chromatic-hue', themeColorsHue.value.toString())
 }, { immediate: true })
 
 watch(themeColorsHueDynamic, () => {
@@ -46,7 +46,7 @@ listen('mcp_plugin_destroyed', () => {
 
 <style>
 /* We need this to properly animate the CSS variable */
-@property --theme-colors-hue {
+@property --chromatic-hue {
   syntax: '<number>';
   initial-value: 0;
   inherits: true;
@@ -54,10 +54,10 @@ listen('mcp_plugin_destroyed', () => {
 
 @keyframes hue-anim {
   from {
-    --theme-colors-hue: 0;
+    --chromatic-hue: 0;
   }
   to {
-    --theme-colors-hue: 360;
+    --chromatic-hue: 360;
   }
 }
 
diff --git a/apps/stage-tamagotchi/src/components/Settings/ColorPalette.vue b/apps/stage-tamagotchi/src/components/Settings/ColorPalette.vue
index 24a715867..6f745f8ec 100644
--- a/apps/stage-tamagotchi/src/components/Settings/ColorPalette.vue
+++ b/apps/stage-tamagotchi/src/components/Settings/ColorPalette.vue
@@ -21,7 +21,7 @@ const settings = useSettings()
         <TooltipTrigger
           transition="all ease-in-out duration-250"
           size-6 cursor-pointer rounded-full bg-primary-500
-          :style="hex ? { background: hex } : { '--theme-colors-hue': DEFAULT_THEME_COLORS_HUE }"
+          :style="hex ? { background: hex } : { '--chromatic-hue': DEFAULT_THEME_COLORS_HUE }"
           :class="settings.isColorSelectedForPrimary(hex) ? 'scale-150 mx-1' : 'hover:scale-110'"
           @click="settings.applyPrimaryColorFrom(hex)"
         />
diff --git a/apps/stage-tamagotchi/src/styles/main.css b/apps/stage-tamagotchi/src/styles/main.css
index e64900f44..22857f4a9 100644
--- a/apps/stage-tamagotchi/src/styles/main.css
+++ b/apps/stage-tamagotchi/src/styles/main.css
@@ -1,4 +1,3 @@
-@import './themes.css';
 @import './transitions.css';
 
 :root {
diff --git a/apps/stage-tamagotchi/src/styles/themes.css b/apps/stage-tamagotchi/src/styles/themes.css
deleted file mode 100644
index bca939f75..000000000
--- a/apps/stage-tamagotchi/src/styles/themes.css
+++ /dev/null
@@ -1,14 +0,0 @@
-:root {
-  --theme-colors-hue: 220.44;
-  --theme-colors-chroma: calc(0.18 + (cos(var(--theme-colors-hue) * 3.14159265 / 180) * 0.04));
-  --theme-colors-chroma-50: calc(var(--theme-colors-chroma) * 0.3);
-  --theme-colors-chroma-100: calc(var(--theme-colors-chroma) * 0.5);
-  --theme-colors-chroma-200: calc(var(--theme-colors-chroma) * 0.6);
-  --theme-colors-chroma-300: calc(var(--theme-colors-chroma) * 0.75);
-  --theme-colors-chroma-400: var(--theme-colors-chroma);
-  --theme-colors-chroma-600: calc(var(--theme-colors-chroma) * 1.15);
-  --theme-colors-chroma-700: calc(var(--theme-colors-chroma) * 1.1);
-  --theme-colors-chroma-800: calc(var(--theme-colors-chroma) * 0.85);
-  --theme-colors-chroma-900: calc(var(--theme-colors-chroma) * 0.7);
-  --theme-colors-chroma-950: calc(var(--theme-colors-chroma) * 0.5);
-}
diff --git a/apps/stage-web/src/App.vue b/apps/stage-web/src/App.vue
index 2bcfc6a4d..24e38a4f5 100644
--- a/apps/stage-web/src/App.vue
+++ b/apps/stage-web/src/App.vue
@@ -13,20 +13,20 @@ const isDark = useDark()
 
 const primaryColor = computed(() => {
   return isDark.value
-    ? `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${0})) 70%, oklch(50% 0 360))`
-    : `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${0})) 90%, oklch(90% 0 360))`
+    ? `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${0})) 70%, oklch(50% 0 360))`
+    : `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${0})) 90%, oklch(90% 0 360))`
 })
 
 const secondaryColor = computed(() => {
   return isDark.value
-    ? `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${180})) 70%, oklch(50% 0 360))`
-    : `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${180})) 90%, oklch(90% 0 360))`
+    ? `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${180})) 70%, oklch(50% 0 360))`
+    : `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${180})) 90%, oklch(90% 0 360))`
 })
 
 const tertiaryColor = computed(() => {
   return isDark.value
-    ? `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${60})) 70%, oklch(50% 0 360))`
-    : `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${60})) 90%, oklch(90% 0 360))`
+    ? `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${60})) 70%, oklch(50% 0 360))`
+    : `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${60})) 90%, oklch(90% 0 360))`
 })
 
 const colors = computed(() => {
@@ -38,7 +38,7 @@ watch(settings.language, () => {
 })
 
 watch(settings.themeColorsHue, () => {
-  document.documentElement.style.setProperty('--theme-colors-hue', settings.themeColorsHue.value.toString())
+  document.documentElement.style.setProperty('--chromatic-hue', settings.themeColorsHue.value.toString())
 }, { immediate: true })
 
 watch(settings.themeColorsHueDynamic, () => {
@@ -62,7 +62,7 @@ watch(settings.themeColorsHueDynamic, () => {
 
 <style>
 /* We need this to properly animate the CSS variable */
-@property --theme-colors-hue {
+@property --chromatic-hue {
   syntax: '<number>';
   initial-value: 0;
   inherits: true;
@@ -70,10 +70,10 @@ watch(settings.themeColorsHueDynamic, () => {
 
 @keyframes hue-anim {
   from {
-    --theme-colors-hue: 0;
+    --chromatic-hue: 0;
   }
   to {
-    --theme-colors-hue: 360;
+    --chromatic-hue: 360;
   }
 }
 
diff --git a/apps/stage-web/src/components/Backgrounds/Cross.vue b/apps/stage-web/src/components/Backgrounds/Cross.vue
index 6f410e368..4e5850598 100644
--- a/apps/stage-web/src/components/Backgrounds/Cross.vue
+++ b/apps/stage-web/src/components/Backgrounds/Cross.vue
@@ -11,7 +11,7 @@ https://www.magicpattern.design/tools/css-backgrounds
 */
 .cross-background-container {
   background-color: #ffffff;
-  --cross-color: oklch(0.85 calc(var(--theme-colors-chroma) * 0.3) var(--theme-colors-hue) / 0.2);
+  --cross-color: oklch(0.85 calc(var(--chromatic-chroma) * 0.3) var(--chromatic-hue) / 0.2);
   background:
     radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent),
     radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent) 25px 25px,
@@ -26,7 +26,7 @@ https://www.magicpattern.design/tools/css-backgrounds
 
 .dark .cross-background-container {
   background-color: #121212;
-  --cross-color: oklch(0.2 calc(var(--theme-colors-chroma) * 0.3) var(--theme-colors-hue));
+  --cross-color: oklch(0.2 calc(var(--chromatic-chroma) * 0.3) var(--chromatic-hue));
   background:
     radial-gradient(circle, transparent 20%, #121212 20%, #121212 80%, transparent 80%, transparent),
     radial-gradient(circle, transparent 20%, #121212 20%, #121212 80%, transparent 80%, transparent) 25px 25px,
diff --git a/apps/stage-web/src/components/Layouts/HeaderLink.vue b/apps/stage-web/src/components/Layouts/HeaderLink.vue
index e9d297c04..f4e3c07f0 100644
--- a/apps/stage-web/src/components/Layouts/HeaderLink.vue
+++ b/apps/stage-web/src/components/Layouts/HeaderLink.vue
@@ -27,6 +27,6 @@ const dark = useDark()
 
 <style scoped>
 .theme-colored {
-  filter: hue-rotate(calc(var(--theme-colors-hue, 0) * 1deg));
+  filter: hue-rotate(calc(var(--chromatic-hue, 0) * 1deg));
 }
 </style>
diff --git a/apps/stage-web/src/components/Settings/ColorPalette.vue b/apps/stage-web/src/components/Settings/ColorPalette.vue
index 24a715867..6f745f8ec 100644
--- a/apps/stage-web/src/components/Settings/ColorPalette.vue
+++ b/apps/stage-web/src/components/Settings/ColorPalette.vue
@@ -21,7 +21,7 @@ const settings = useSettings()
         <TooltipTrigger
           transition="all ease-in-out duration-250"
           size-6 cursor-pointer rounded-full bg-primary-500
-          :style="hex ? { background: hex } : { '--theme-colors-hue': DEFAULT_THEME_COLORS_HUE }"
+          :style="hex ? { background: hex } : { '--chromatic-hue': DEFAULT_THEME_COLORS_HUE }"
           :class="settings.isColorSelectedForPrimary(hex) ? 'scale-150 mx-1' : 'hover:scale-110'"
           @click="settings.applyPrimaryColorFrom(hex)"
         />
diff --git a/apps/stage-web/src/components/Widgets/AnimatedWave.vue b/apps/stage-web/src/components/Widgets/AnimatedWave.vue
index ecc69705b..2f85699e5 100644
--- a/apps/stage-web/src/components/Widgets/AnimatedWave.vue
+++ b/apps/stage-web/src/components/Widgets/AnimatedWave.vue
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<WaveProps>(), {
   height: 40,
   amplitude: 14,
   waveLength: 250,
-  fillColor: 'oklch(95% 0.10 var(--theme-colors-hue))',
+  fillColor: 'oklch(95% 0.10 var(--chromatic-hue))',
   direction: 'down',
   movementDirection: 'left',
   animationSpeed: 50,
diff --git a/apps/stage-web/src/pages/index.vue b/apps/stage-web/src/pages/index.vue
index cd66a8f95..d15065180 100644
--- a/apps/stage-web/src/pages/index.vue
+++ b/apps/stage-web/src/pages/index.vue
@@ -23,8 +23,8 @@ const positionCursor = useMouse()
   <Cross>
     <AnimatedWave
       :fill-color="dark
-        ? 'oklch(35% calc(var(--theme-colors-chroma) * 0.6) var(--theme-colors-hue))'
-        : 'color-mix(in srgb, oklch(95% calc(var(--theme-colors-chroma-50) * 0.5) var(--theme-colors-hue)) 80%, oklch(100% 0 360))'"
+        ? 'oklch(35% calc(var(--chromatic-chroma) * 0.6) var(--chromatic-hue))'
+        : 'color-mix(in srgb, oklch(95% calc(var(--chromatic-chroma-50) * 0.5) var(--chromatic-hue)) 80%, oklch(100% 0 360))'"
     >
       <div relative flex="~ col" z-2 h-100dvh w-100vw of-hidden>
         <!-- header -->
diff --git a/apps/stage-web/src/styles/main.css b/apps/stage-web/src/styles/main.css
index fc1afcefc..aa1b1dfbe 100755
--- a/apps/stage-web/src/styles/main.css
+++ b/apps/stage-web/src/styles/main.css
@@ -1,4 +1,3 @@
-@import './themes.css';
 @import './transitions.css';
 
 :root {
diff --git a/apps/stage-web/src/styles/themes.css b/apps/stage-web/src/styles/themes.css
deleted file mode 100644
index bca939f75..000000000
--- a/apps/stage-web/src/styles/themes.css
+++ /dev/null
@@ -1,14 +0,0 @@
-:root {
-  --theme-colors-hue: 220.44;
-  --theme-colors-chroma: calc(0.18 + (cos(var(--theme-colors-hue) * 3.14159265 / 180) * 0.04));
-  --theme-colors-chroma-50: calc(var(--theme-colors-chroma) * 0.3);
-  --theme-colors-chroma-100: calc(var(--theme-colors-chroma) * 0.5);
-  --theme-colors-chroma-200: calc(var(--theme-colors-chroma) * 0.6);
-  --theme-colors-chroma-300: calc(var(--theme-colors-chroma) * 0.75);
-  --theme-colors-chroma-400: var(--theme-colors-chroma);
-  --theme-colors-chroma-600: calc(var(--theme-colors-chroma) * 1.15);
-  --theme-colors-chroma-700: calc(var(--theme-colors-chroma) * 1.1);
-  --theme-colors-chroma-800: calc(var(--theme-colors-chroma) * 0.85);
-  --theme-colors-chroma-900: calc(var(--theme-colors-chroma) * 0.7);
-  --theme-colors-chroma-950: calc(var(--theme-colors-chroma) * 0.5);
-}
diff --git a/package.json b/package.json
index df049a970..90afc94cf 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@antfu/ni": "^25.0.0",
     "@arethetypeswrong/core": "^0.18.2",
     "@iconify/utils": "^2.3.0",
+    "@proj-airi/unocss-preset-chromatic": "^0.0.3",
     "@types/node": "^24.0.1",
     "@unocss/eslint-config": "^66.2.0",
     "@unocss/eslint-plugin": "^66.2.0",
diff --git a/packages/stage-ui/stories/ThemeColorsHueControl.vue b/packages/stage-ui/stories/ThemeColorsHueControl.vue
index 3521ea730..b630d3e80 100644
--- a/packages/stage-ui/stories/ThemeColorsHueControl.vue
+++ b/packages/stage-ui/stories/ThemeColorsHueControl.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { VAR_HUE } from '@proj-airi/unocss-preset-chromatic'
 import { onMounted, ref, watch } from 'vue'
 
 const DEFAULT_THEME_COLORS_HUE = 220.44
@@ -10,14 +11,14 @@ function resetToDefault() {
 }
 
 onMounted(() => {
-  const hue = document.documentElement.style.getPropertyValue('--theme-colors-hue')
+  const hue = document.documentElement.style.getPropertyValue(VAR_HUE)
   const hueF = Number.parseFloat(hue)
   themeColorsHue.value = hueF >= 0 && hueF <= 360 ? hueF : DEFAULT_THEME_COLORS_HUE
-  document.documentElement.style.setProperty('--theme-colors-hue', themeColorsHue.value.toString())
+  document.documentElement.style.setProperty(VAR_HUE, themeColorsHue.value.toString())
 })
 
 watch(themeColorsHue, () => {
-  document.documentElement.style.setProperty('--theme-colors-hue', themeColorsHue.value.toString())
+  document.documentElement.style.setProperty(VAR_HUE, themeColorsHue.value.toString())
 })
 </script>
 
diff --git a/packages/stage-ui/stories/themes.css b/packages/stage-ui/stories/themes.css
index 3e4af0dff..4984251e2 100644
--- a/packages/stage-ui/stories/themes.css
+++ b/packages/stage-ui/stories/themes.css
@@ -1,18 +1,3 @@
-:root {
-  --theme-colors-hue: 220.44;
-  --theme-colors-chroma: calc(0.18 + (cos(var(--theme-colors-hue) * 3.14159265 / 180) * 0.04));
-  --theme-colors-chroma-50: calc(var(--theme-colors-chroma) * 0.3);
-  --theme-colors-chroma-100: calc(var(--theme-colors-chroma) * 0.5);
-  --theme-colors-chroma-200: calc(var(--theme-colors-chroma) * 0.6);
-  --theme-colors-chroma-300: calc(var(--theme-colors-chroma) * 0.75);
-  --theme-colors-chroma-400: var(--theme-colors-chroma);
-  --theme-colors-chroma-600: calc(var(--theme-colors-chroma) * 1.15);
-  --theme-colors-chroma-700: calc(var(--theme-colors-chroma) * 1.1);
-  --theme-colors-chroma-800: calc(var(--theme-colors-chroma) * 0.85);
-  --theme-colors-chroma-900: calc(var(--theme-colors-chroma) * 0.7);
-  --theme-colors-chroma-950: calc(var(--theme-colors-chroma) * 0.5);
-}
-
 *,
 ::before,
 ::after {
diff --git a/packages/ui/src/components/Form/Range/Range.vue b/packages/ui/src/components/Form/Range/Range.vue
index d3ecf7b72..5353dc08c 100644
--- a/packages/ui/src/components/Form/Range/Range.vue
+++ b/packages/ui/src/components/Form/Range/Range.vue
@@ -83,9 +83,9 @@ https://toughengineer.github.io/demo/slider-styler*/
   --thumb-box-shadow: 0 0 0px #e6e6e6;
   --thumb-border: none;
   --thumb-border-radius: 999px;
-  --thumb-background: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-active: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-active: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
 
   --track-height: calc(var(--height) - var(--track-value-padding) * 2);
   --track-box-shadow: none;
@@ -102,9 +102,9 @@ https://toughengineer.github.io/demo/slider-styler*/
 }
 
 .dark .form_input-range {
-  --thumb-background: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-active: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-active: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
 
   --track-border: solid 2px rgb(44, 44, 44);
   --track-background: rgb(44, 44, 44);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d53a2ad14..92357fe49 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,6 +78,9 @@ importers:
       '@iconify/utils':
         specifier: ^2.3.0
         version: 2.3.0
+      '@proj-airi/unocss-preset-chromatic':
+        specifier: ^0.0.3
+        version: 0.0.3
       '@types/node':
         specifier: ^24.0.1
         version: 24.0.1
@@ -4217,6 +4220,9 @@ packages:
   '@proj-airi/server-shared@0.6.0':
     resolution: {integrity: sha512-2CLQc7BufGvQGmLrtFYy5XWGw0jdeteXAht/5QvvhlWW8GhJ5edLqPZsETE5R+goa0OFWcLJgPUki3xdJAvfVQ==}
 
+  '@proj-airi/unocss-preset-chromatic@0.0.3':
+    resolution: {integrity: sha512-IPUQRaguvVNQemifVEAVem2yAJi9GxNb1M2Izl0P3Z9ObGk4BPMdh86Gkb52NTwcOmEWjy5eEKgTbXasP0Ekhg==}
+
   '@proj-airi/unplugin-fetch@0.1.6':
     resolution: {integrity: sha512-p/7qK+MeXyzTEdvXANQmQy0PzW0/EsSApOFln0Sl5JWmPAdFPkTr1+kNAMuS/7rLRLgZYKmbbSVCM3ZPrWj8pg==}
 
@@ -14718,6 +14724,8 @@ snapshots:
     transitivePeerDependencies:
       - srvx
 
+  '@proj-airi/unocss-preset-chromatic@0.0.3': {}
+
   '@proj-airi/unplugin-fetch@0.1.6(@types/node@24.0.1)(jiti@2.4.2)(less@4.3.0)(lightningcss@1.30.1)(terser@5.17.6)(tsx@4.20.3)(yaml@2.8.0)':
     dependencies:
       ofetch: 1.4.1
diff --git a/uno.config.ts b/uno.config.ts
index 02453b0c1..ef6ef82b6 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,28 +1,12 @@
 import type { PresetOrFactoryAwaitable } from 'unocss'
 
 import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg'
+import { presetChromatic } from '@proj-airi/unocss-preset-chromatic'
 import { colorToString } from '@unocss/preset-mini/utils'
 import { defineConfig, mergeConfigs, presetAttributify, presetIcons, presetTypography, presetWebFonts, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss'
 import { presetScrollbar } from 'unocss-preset-scrollbar'
 import { parseColor } from 'unocss/preset-mini'
 
-function createColorSchemeConfig(hueOffset = 0) {
-  return {
-    DEFAULT: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
-    50: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha) 30%, oklch(100% 0 360 / %alpha))`,
-    100: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-100) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha) 80%, oklch(100% 0 360 / %alpha))`,
-    200: `oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
-    300: `oklch(85% var(--theme-colors-chroma-300) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
-    400: `oklch(74% var(--theme-colors-chroma-400) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
-    500: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
-    600: `oklch(54% var(--theme-colors-chroma-600) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
-    700: `oklch(49% var(--theme-colors-chroma-700) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
-    800: `oklch(42% var(--theme-colors-chroma-800) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
-    900: `oklch(37% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
-    950: `oklch(29% var(--theme-colors-chroma-950) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
-  }
-}
-
 export function presetStoryMockHover(): PresetOrFactoryAwaitable {
   return {
     name: 'story-mock-hover',
@@ -94,6 +78,13 @@ export function sharedUnoConfig() {
         },
       }),
       presetScrollbar(),
+      presetChromatic({
+        baseHue: 220.44,
+        colors: {
+          primary: 0,
+          complementary: 180,
+        },
+      }),
     ],
     transformers: [
       transformerDirectives({
@@ -138,12 +129,6 @@ export function sharedUnoConfig() {
         }
       }],
     ],
-    theme: {
-      colors: {
-        primary: createColorSchemeConfig(),
-        complementary: createColorSchemeConfig(180),
-      },
-    },
   })
 }