diff --git a/src/page-components/scheme/q-scheme/Builder.tsx b/src/page-components/scheme/q-scheme/Builder.tsx
index 79657fb..6dd09c7 100644
--- a/src/page-components/scheme/q-scheme/Builder.tsx
+++ b/src/page-components/scheme/q-scheme/Builder.tsx
@@ -11,7 +11,7 @@ import { FloatColorPicker } from '../../../components/FloatcolorPicker';
 import { ScrollArea } from '../../../components/ScrollArea';
 import { VSegmentedControl } from '../../../components/VSegmentedControl';
 import { SchemeContent } from '../../../models';
-import { QSchemeSource, QSchemeStorage } from '../../../q-scheme';
+import { QSchemeSetting, QSchemeSource, QSchemeStorage } from '../../../q-scheme';
 import { useUpdateScheme } from '../../../stores/schemes';
 import { defaultEmptyFormData } from '../../../utls';
 import styles from './Builder.module.css';
@@ -28,50 +28,35 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
     try {
       if (!colorFn) throw 'Web Assembly functions is not available';
       const defaultValues = colorFn.q_scheme_default_settings();
-      if (!scheme.schemeStorage.source?.setting)
-        return {
-          hover: {
-            chroma:
-              scheme.schemeStorage.source?.setting?.hover.chroma ?? defaultValues.hover.chroma,
-            lightness:
-              scheme.schemeStorage.source?.setting?.hover.lightness ??
-              defaultValues.hover.lightness,
-          },
-          active: {
-            chroma:
-              scheme.schemeStorage.source?.setting?.active.chroma ?? defaultValues.active.chroma,
-            lightness:
-              scheme.schemeStorage.source?.setting?.active.lightness ??
+      if (scheme.schemeStorage.source?.setting)
+        return new SchemeSetting(
+          new ColorShifting(
+            scheme.schemeStorage.source?.setting?.hover.chroma ?? defaultValues.hover.chroma,
+            scheme.schemeStorage.source?.setting?.hover.lightness ?? defaultValues.hover.lightness,
+          ),
+          new ColorShifting(
+            scheme.schemeStorage.source?.setting?.active.chroma ?? defaultValues.active.chroma,
+            scheme.schemeStorage.source?.setting?.active.lightness ??
               defaultValues.active.lightness,
-          },
-          focus: {
-            chroma:
-              scheme.schemeStorage.source?.setting?.focus.chroma ?? defaultValues.focus.chroma,
-            lightness:
-              scheme.schemeStorage.source?.setting?.focus.lightness ??
-              defaultValues.focus.lightness,
-          },
-          disabled: {
-            chroma:
-              scheme.schemeStorage.source?.setting?.disabled.chroma ??
-              defaultValues.disabled.chroma,
-            lightness:
-              scheme.schemeStorage.source?.setting?.disabled.lightness ??
+          ),
+          new ColorShifting(
+            scheme.schemeStorage.source?.setting?.focus.chroma ?? defaultValues.focus.chroma,
+            scheme.schemeStorage.source?.setting?.focus.lightness ?? defaultValues.focus.lightness,
+          ),
+          new ColorShifting(
+            scheme.schemeStorage.source?.setting?.disabled.chroma ?? defaultValues.disabled.chroma,
+            scheme.schemeStorage.source?.setting?.disabled.lightness ??
               defaultValues.disabled.lightness,
-          },
-          dark_convert: {
-            chroma:
-              scheme.schemeStorage.source?.setting?.dark_convert.chroma ??
+          ),
+          new ColorShifting(
+            scheme.schemeStorage.source?.setting?.dark_convert.chroma ??
               defaultValues.dark_convert.chroma,
-            lightness:
-              scheme.schemeStorage.source?.setting?.dark_convert.lightness ??
+            scheme.schemeStorage.source?.setting?.dark_convert.lightness ??
               defaultValues.dark_convert.lightness,
-          },
-          expand_method:
-            scheme.schemeStorage.source?.setting?.expand_method ?? defaultValues.expand_method,
-          wacg_follows:
-            scheme.schemeStorage.source?.setting?.wacg_follows ?? defaultValues.wacg_follows,
-        } as SchemeSetting;
+          ),
+          scheme.schemeStorage.source?.setting?.expand_method ?? defaultValues.expand_method,
+          scheme.schemeStorage.source?.setting?.wacg_follows ?? defaultValues.wacg_follows,
+        );
       return defaultValues;
     } catch (e) {
       console.error('[Q scheme builder]', e);
@@ -139,6 +124,7 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
         Number(formData.get('expanding')) as ColorExpand,
         Number(formData.get('wacg')) as WACGSetting,
       );
+      const dumpedSetting = schemeSetting.toJsValue() as QSchemeSetting;
 
       const source: QSchemeSource = {
         primary: defaultEmptyFormData(formData, 'primary', null),
@@ -151,7 +137,7 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
         info: defaultEmptyFormData(formData, 'info', null),
         foreground: defaultEmptyFormData(formData, 'foreground', null),
         background: defaultEmptyFormData(formData, 'background', null),
-        setting: schemeSetting,
+        setting: dumpedSetting,
       };
       const generatedScheme = every([source.secondary, source.tertiary, source.accent], isNil)
         ? colorFn?.generate_q_scheme_automatically(
@@ -162,7 +148,7 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
             source.info,
             source.foreground,
             source.background,
-            source.setting,
+            schemeSetting,
           )
         : colorFn?.generate_q_scheme_manually(
             source.primary,
@@ -175,7 +161,7 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
             source.info,
             source.foreground,
             source.background,
-            source.setting,
+            schemeSetting,
           );
       updateScheme((prev) => {
         prev.schemeStorage.source = source;