From 8a0fa660bf6c73de07ead7f3286d006faa29572f Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Sat, 2 Apr 2022 01:25:19 +0800
Subject: [PATCH] fix color interface showing black color when empty (#12445)

* fix color interface showing black color when empty

* Default interface value to null

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 app/src/interfaces/select-color/select-color.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/src/interfaces/select-color/select-color.vue b/app/src/interfaces/select-color/select-color.vue
index 107b9a29a8..82d1d06799 100644
--- a/app/src/interfaces/select-color/select-color.vue
+++ b/app/src/interfaces/select-color/select-color.vue
@@ -168,7 +168,7 @@ const { t } = useI18n();
 
 interface Props {
 	disabled?: boolean;
-	value?: string;
+	value?: string | null;
 	placeholder?: string;
 	presets?: { name: string; color: string }[];
 	width: string;
@@ -177,7 +177,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
 	disabled: false,
-	value: undefined,
+	value: () => null,
 	placeholder: undefined,
 	opacity: false,
 	presets: () => [
@@ -223,6 +223,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(['input']);
 
 const valueWithoutVariables = computed(() => {
+	if (!props.value) return null;
 	return props.value?.startsWith('var(--') ? cssVar(props.value.substring(4, props.value.length - 1)) : props.value;
 });