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())
+    this.value = colorEvent.color.hex
-  }
+    this.onChange(colorEvent.color[this.colorMode].toString())
-
-  colorChanged(color:string) {
-    this.value = color
-    this.onChange(color)
   }
 }

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()">

src-ui/src/app/services/settings.service.ts

@@ -1,5 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable, LOCALE_ID, Renderer2, RendererFactory2 } from '@angular/core';
+import { Inject, Injectable, LOCALE_ID, Renderer2, RendererFactory2, RendererStyleFlags2 } from '@angular/core';
 import { Meta } from '@angular/platform-browser';
 import { CookieService } from 'ngx-cookie-service';
 
@@ -87,7 +87,12 @@ export class SettingsService {
     }
 
     if (themeColor) {
-      console.log('set theme color')
+      const hsl = themeColor.split(',')
+      this.renderer.setStyle(document.documentElement, '--pngx-primary',`${+hsl[0] * 360},${hsl[1] * 100}%`, RendererStyleFlags2.DashCase)
+      this.renderer.setStyle(document.documentElement, '--pngx-primary-lightness',`${hsl[2] * 100}%`, RendererStyleFlags2.DashCase)
+    } else {
+      this.renderer.removeStyle(document.documentElement, '--pngx-primary', RendererStyleFlags2.DashCase)
+      this.renderer.removeStyle(document.documentElement, '--pngx-primary-lightness', RendererStyleFlags2.DashCase)
     }
   }
 

src-ui/src/app/utils/color.ts

@@ -1,3 +1,4 @@
+import { ColorMode } from "ngx-color"
 
 function componentToHex(c) {
   var hex = Math.floor(c).toString(16)
@@ -42,7 +43,21 @@ function hslToRgb(h, s, l){
   return [r * 255, g * 255, b * 255]
 }
 
-export function randomColor() {
+export function hslToHex(h: number, s: number, l:number): string {
-  let rgb = hslToRgb(Math.random(), 0.6, Math.random() * 0.4 + 0.4)
+  const rgb = hslToRgb(h,s,l)
   return `#${componentToHex(rgb[0])}${componentToHex(rgb[1])}${componentToHex(rgb[2])}`
 }
+
+export function randomColor(colorMode: ColorMode = ColorMode.HEX) {
+  const h = Math.random()
+  const s = 0.6
+  const l = Math.random() * 0.4 + 0.4
+  switch (colorMode) {
+    case ColorMode.HSL:
+      return `${h},${s},${l}`
+      break;
+    default: // HEX
+      return hslToHex(h,s,l)
+      break;
+  }
+}