diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 26b67cfe8..bcdf435fc 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -26,7 +26,7 @@
         class="textColor unstyled"
         :class="{ disabled: !present || disabled }"
         type="text"
-        :value="modelValue || fallback"
+        :value="modelValue ?? fallback"
         :disabled="!present || disabled"
         @input="updateValue($event.target.value)"
       >
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index 8324263cd..82c63f503 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -372,6 +372,9 @@ export default {
         const path = getPath(component, directive)
 
         usedRule = get(real, path) // get real
+        if (usedRule === '') {
+          return usedRule
+        }
         if (!usedRule) {
           usedRule = get(fallback, path)
         }
@@ -379,7 +382,7 @@ export default {
         return postProcess(usedRule)
       },
       set (value) {
-        if (value) {
+        if (value != null) {
           set(allEditedRules.value, getPath(component, directive), value)
         } else {
           unset(allEditedRules.value, getPath(component, directive))