diff --git a/src/components/04_product-service/ฺBasicInfoProduct.vue b/src/components/04_product-service/ฺBasicInfoProduct.vue
index 8ebcdc9a..4307c80a 100644
--- a/src/components/04_product-service/ฺBasicInfoProduct.vue
+++ b/src/components/04_product-service/ฺBasicInfoProduct.vue
@@ -106,7 +106,7 @@ defineProps<{
             readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
           "
           :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
-          style="cursor: auto; color: black"
+          style="cursor: auto; color: var(--foreground)"
         />
       </q-field>
 
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index f232d22e..b250538d 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -14,6 +14,8 @@ $negative: var(--red-9);
 $info: var(--blue-6);
 $warning: #ffc224;
 
+$disabled: var(--stone-5);
+
 $separator-color: var(--border-color);
 $separator-dark-color: var(--border-color);
 
@@ -78,3 +80,11 @@ div.fullscreen.q-drawer__backdrop {
 [disabled] * {
   color: hsl(var(--text-mute)) !important;
 }
+
+.bg-disabled {
+  background: $disabled;
+}
+
+.text-disabled {
+  color: $disabled;
+}