From 1c8181c6c112b4921c52d6ab46f17e2e372cf8df Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Thu, 2 Dec 2021 03:02:57 +0800
Subject: [PATCH] add colorOn & colorOff to checkbox interface (#10149)

---
 app/src/components/v-checkbox/v-checkbox.vue | 28 +++++++++++----
 app/src/interfaces/boolean/boolean.vue       |  9 +++--
 app/src/interfaces/boolean/index.ts          | 36 +++++++++++++-------
 app/src/lang/translations/en-US.yaml         |  2 ++
 4 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/app/src/components/v-checkbox/v-checkbox.vue b/app/src/components/v-checkbox/v-checkbox.vue
index 08bde7b78e..4cf9cd579a 100644
--- a/app/src/components/v-checkbox/v-checkbox.vue
+++ b/app/src/components/v-checkbox/v-checkbox.vue
@@ -213,22 +213,38 @@ body {
 		}
 	}
 
+	&:not(:disabled):not(.indeterminate) {
+		.label {
+			color: var(--foreground-normal);
+		}
+
+		&.block {
+			&::before {
+				opacity: 0.1;
+			}
+		}
+	}
+
 	&:not(:disabled):not(.indeterminate).checked {
 		.checkbox {
 			--v-icon-color: var(--v-checkbox-color);
 		}
 
-		.label {
-			color: var(--foreground-normal);
-		}
-
 		&.block {
 			.label {
 				color: var(--v-checkbox-color);
 			}
+		}
+	}
 
-			&::before {
-				opacity: 0.1;
+	&:not(:disabled):not(.indeterminate):not(.checked) {
+		.checkbox {
+			--v-icon-color: var(--v-checkbox-unchecked-color);
+		}
+
+		&.block {
+			.label {
+				color: var(--v-checkbox-unchecked-color);
 			}
 		}
 	}
diff --git a/app/src/interfaces/boolean/boolean.vue b/app/src/interfaces/boolean/boolean.vue
index 8d1147f00f..1e5c22e053 100644
--- a/app/src/interfaces/boolean/boolean.vue
+++ b/app/src/interfaces/boolean/boolean.vue
@@ -8,7 +8,8 @@
 		:indeterminate="value === null"
 		:disabled="disabled"
 		:style="{
-			'--v-checkbox-color': color,
+			'--v-checkbox-color': colorOn,
+			'--v-checkbox-unchecked-color': colorOff,
 		}"
 		@update:model-value="$emit('input', $event)"
 	/>
@@ -40,10 +41,14 @@ export default defineComponent({
 			type: String,
 			default: 'check_box_outline_blank',
 		},
-		color: {
+		colorOn: {
 			type: String,
 			default: '#00C897',
 		},
+		colorOff: {
+			type: String,
+			default: '#B0BEC5',
+		},
 	},
 	emits: ['input'],
 });
diff --git a/app/src/interfaces/boolean/index.ts b/app/src/interfaces/boolean/index.ts
index 1d852ecbb3..dc89ed6d6a 100644
--- a/app/src/interfaces/boolean/index.ts
+++ b/app/src/interfaces/boolean/index.ts
@@ -35,6 +35,30 @@ export default defineInterface({
 				default_value: 'check_box_outline_blank',
 			},
 		},
+		{
+			field: 'colorOn',
+			name: '$t:interfaces.boolean.color_on',
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'select-color',
+			},
+			schema: {
+				default_value: '#00C897',
+			},
+		},
+		{
+			field: 'colorOff',
+			name: '$t:interfaces.boolean.color_off',
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'select-color',
+			},
+			schema: {
+				default_value: '#B0BEC5',
+			},
+		},
 		{
 			field: 'label',
 			name: '$t:label',
@@ -50,17 +74,5 @@ export default defineInterface({
 				default_value: '$t:interfaces.boolean.label_default',
 			},
 		},
-		{
-			field: 'color',
-			name: '$t:color',
-			type: 'string',
-			meta: {
-				width: 'half',
-				interface: 'select-color',
-			},
-			schema: {
-				default_value: '#00C897',
-			},
-		},
 	],
 });
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index c700d5c199..486308a7c6 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -1429,6 +1429,8 @@ interfaces:
   boolean:
     toggle: Toggle
     description: Switch between on and off
+    color_on: Color On
+    color_off: Color Off
     label_placeholder: Enter a label...
     label_default: Enabled
   translations: