Converting colors experiment

src-ui/src/app/components/common/input/color/color.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ColorEvent, ColorMode } from 'ngx-color';
-import { randomColor } from 'src/app/utils/color';
+import { randomColor, hslToHex } from 'src/app/utils/color';
 import { AbstractInputComponent } from '../abstract-input';
 
 @Component({
@@ -24,15 +24,18 @@ export class ColorComponent extends AbstractInputComponent<string> {
   }
 
   randomize() {
-    this.colorChanged(randomColor())
+    const color = randomColor(this.colorMode)
+    let colorHex = color
+    if (this.colorMode == ColorMode.HSL) {
+      const hsl = color.split(',')
+      colorHex = hslToHex(+hsl[0], +hsl[1], +hsl[2])
+    }
+    this.value = colorHex
+    this.onChange(color)
   }
 
   sliderChanged(colorEvent:ColorEvent) {
-    this.colorChanged(colorEvent.color[this.colorMode].toString())
-  }
-
-  colorChanged(color:string) {
-    this.value = color
-    this.onChange(color)
+    this.value = colorEvent.color.hex
+    this.onChange(colorEvent.color[this.colorMode].toString())
   }
 }

src-ui/src/app/components/manage/settings/settings.component.html

@@ -105,7 +105,7 @@
             <span i18n>Theme Color</span>
           </div>
           <div class="col-3">
-            <app-input-color i18n-title title="" formControlName="themeColor" [error]="error?.color"></app-input-color>
+            <app-input-color i18n-title colorMode="hsl" formControlName="themeColor" [error]="error?.color"></app-input-color>
           </div>
           <div class="col-2">
             <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">