+ {this.hasMultipleColors() &&
+
+
+ this.currentColor = {...this.currentColor, color: e.detail.hex}}
+ />
+
+ {this.useLightColor &&
+
+ this.currentColor = {...this.currentColor, lightColor: e.detail.hex}}
+ />
+
+ }
+ {this.useDarkColor &&
+
+ this.currentColor = {...this.currentColor, darkColor: e.detail.hex}}
+ />
+
+ }
+ {this.useContrastColor &&
+
+ this.currentColor = {...this.currentColor, contrastColor: e.detail.hex}}
+ />
+
+ }
+
+ }
+ {!this.hasMultipleColors() &&
+
this.currentColor = {...this.currentColor, color: e.detail.hex}}
+ />
+ }
+ Preview
+
+ {this.useLightColor &&
+
+
+ }
+
+
+ {this.useDarkColor &&
+
+
+ }
+ {this.useContrastColor &&
+
+
+ {this.localization.contrast}
+
+
+ }
+
+
+ this.colorModal.hide()}
+ >
+ {this.localization.cancel}
+
+ this.saveColor()}
+ >
+ {this.localization.confirm}
+
+
+
+ }
+