added color/ theme settings, new config window

frontend/src/components/audio-player/controls/player-controls.ts

@@ -58,11 +58,11 @@ export class PlayerControls extends LitElement {
     }
 
     button:hover {
-      color: #ffd43b;
+      color: var(--yj-accent, #ffd43b);
     }
 
     .active {
-      color: #ffd43b;
+      color: var(--yj-accent, #ffd43b);
     }
 
     .repeat-one {

frontend/src/components/audio-player/seekbar/seek-bar.ts

@@ -22,23 +22,23 @@ export class SeekBar extends LitElement {
       --track-size: 6px;
       flex: 1;
       margin: 0 1em;
-      --wa-tooltip-background-color: #343a40;
-      --wa-tooltip-content-color: white;
-      --wa-tooltip-border-color: #343a40;
+      --wa-tooltip-background-color: var(--yj-bg-elevated, #343a40);
+      --wa-tooltip-content-color: var(--yj-text-primary, white);
+      --wa-tooltip-border-color: var(--yj-bg-elevated, #343a40);
       --wa-tooltip-border-radius: 4px;
       --wa-tooltip-font-size: 0.875em;
     }
 
     wa-slider::part(track) {
-      background: white;
+      background: var(--yj-text-primary, white);
     }
 
     wa-slider::part(indicator) {
-      background: yellow;
+      background: var(--yj-accent, yellow);
     }
 
     wa-slider::part(thumb) {
-      background: black;
+      background: var(--yj-bg-base, black);
     }
 
     #seek-bar-container {

frontend/src/components/audio-player/volume-control/volume-control.ts

@@ -35,8 +35,8 @@ export class VolumeControl extends LitElement {
       bottom: 100%;
       left: 50%;
       transform: translateX(-50%);
-      background: #1a1a1a;
-      border: 1px solid #333;
+      background: var(--yj-bg-surface, #1a1a1a);
+      border: 1px solid var(--yj-border-subtle, #333);
       border-radius: 8px;
       padding: 1em 0.5em;
       margin-bottom: 0.5em;
@@ -52,16 +52,16 @@ export class VolumeControl extends LitElement {
     }
 
     wa-slider::part(track) {
-      background: white;
+      background: var(--yj-text-primary, white);
       height: 120px;
     }
 
     wa-slider::part(indicator) {
-      background: yellow;
+      background: var(--yj-accent, yellow);
     }
 
     wa-slider::part(thumb) {
-      background: black;
+      background: var(--yj-bg-base, black);
     }
   `;