add colorOn & colorOff to checkbox interface (#10149)

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);
 			}
 		}
 	}

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'],
 });

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',
-			},
-		},
 	],
 });

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: