Make EQ & Sync Window canvases use theme

tillvit · Dec 8, 2024 · a062a40 · a062a40
1 parent 15aff58
commit a062a40
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 51 deletions.
diff --git a/app/index.css b/app/index.css
@@ -2214,16 +2214,9 @@ input[type="range"] {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
-  background-color: rgb(11, 14, 26);
   padding-top: 2px;
   border-bottom: 1px solid;
   border-image-slice: 1;
-  border-image-source: linear-gradient(
-    to right,
-    rgb(11, 14, 26),
-    rgb(49, 57, 88),
-    rgb(11, 14, 26)
-  );
 }
 
 .eq-icon {
@@ -2245,13 +2238,6 @@ input[type="range"] {
 .eq-info-container {
   border-top: 1px solid;
   border-image-slice: 1;
-  border-image-source: linear-gradient(
-    to right,
-    rgb(11, 14, 26),
-    rgb(49, 57, 88),
-    rgb(11, 14, 26)
-  );
-  background-color: rgb(11, 14, 26);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2284,10 +2270,6 @@ input[type="range"] {
   gap: 5px;
 }
 
-.eq-info-label {
-  color: rgba(0, 135, 203, 0.8);
-}
-
 .eq-info-value {
   width: 80px;
 }

diff --git a/app/src/gui/window/EQWindow.ts b/app/src/gui/window/EQWindow.ts
@@ -1,8 +1,11 @@
 import bezier from "bezier-easing"
+import { Color } from "pixi.js"
 import { App } from "../../App"
 import { BezierAnimator } from "../../util/BezierEasing"
+import { average, blendPixiColors } from "../../util/Color"
 import { EventHandler } from "../../util/EventHandler"
 import { clamp, roundDigit } from "../../util/Math"
+import { Themes } from "../../util/Theme"
 import { parseString as numericParse } from "../../util/Util"
 import { Icons } from "../Icons"
 import { Window } from "./Window"
@@ -77,6 +80,7 @@ export class EQWindow extends Window {
   app: App
   private cachedReponse = new Array(graphWidth).fill(0)
   private onAudioLoad = this.onAudio.bind(this)
+  private onThemeChange = this.changeHTMLColors.bind(this)
   private points: EQPoint[] = []
   private icons!: HTMLDivElement
   private info!: HTMLDivElement
@@ -94,10 +98,12 @@ export class EQWindow extends Window {
     this.onAudioLoad()
 
     EventHandler.on("audioLoaded", this.onAudioLoad)
+    EventHandler.on("themeChanged", this.onThemeChange)
   }
 
   destroy() {
     EventHandler.off("audioLoaded", this.onAudioLoad)
+    EventHandler.off("themeChanged", this.onThemeChange)
   }
 
   initView() {
@@ -224,6 +230,7 @@ export class EQWindow extends Window {
     this.viewElement.appendChild(container)
     const frameDraw = this.drawEQ(canvas)
     requestAnimationFrame(frameDraw)
+    this.changeHTMLColors()
   }
 
   private selectText(element: HTMLElement) {
@@ -341,21 +348,36 @@ export class EQWindow extends Window {
         canvas.width / 2
       )
 
-      // Add three color stops
-      gradient.addColorStop(0, "rgb(11, 14, 26)")
-      gradient.addColorStop(1, "rgb(5, 7, 13)")
+      let targetColor
+      let reverseColor
+      const accentColor = Themes.getColor("accent-color")
+      if (average(Themes.getColor("primary-bg")) > 0.5) {
+        targetColor = new Color("white")
+        reverseColor = new Color("black")
+      } else {
+        targetColor = new Color("black")
+        reverseColor = new Color("white")
+      }
+      const bgColor = blendPixiColors(accentColor, targetColor, 0.95)
+
+      gradient.addColorStop(
+        0,
+        blendPixiColors(accentColor, targetColor, 0.9).toHexa()
+      )
+      gradient.addColorStop(1, bgColor.toHexa())
 
       // Set the fill style and draw a rectangle
       ctx.fillStyle = gradient
       ctx.fillRect(0, 0, canvas.width, canvas.height)
 
-      ctx.fillStyle = "rgb(0, 50, 150)"
+      ctx.fillStyle = blendPixiColors(accentColor, targetColor, 0.2).toHex()
       this.drawFrequencies(
         ctx,
         this.app.chartManager.chartAudio.getFrequencyData()
       )
       if (this.app.chartManager.chartAudio.hasFilters()) {
-        ctx.fillStyle = "rgba(200, 200, 200, 0.2)"
+        ctx.fillStyle =
+          blendPixiColors(accentColor, reverseColor, 0.2).toHex() + "50"
         this.drawFrequencies(
           ctx,
           this.app.chartManager.chartAudio.getFilteredFrequencyData()
@@ -364,7 +386,8 @@ export class EQWindow extends Window {
 
       ctx.fillStyle = "rgba(200, 200, 200, 0.5)"
       this.drawResponse(ctx)
-      ctx.fillStyle = "rgba(0, 100, 150, 0.5)"
+      ctx.fillStyle =
+        blendPixiColors(accentColor, reverseColor, 0.2).toHex() + "80"
       ctx.font = "22px Assistant"
       this.drawGrid(ctx)
       this.points.forEach(point => point.draw(ctx))
@@ -420,6 +443,24 @@ export class EQWindow extends Window {
     }
   }
 
+  changeHTMLColors() {
+    let targetColor
+    const accentColor = Themes.getColor("accent-color")
+    if (average(Themes.getColor("primary-bg")) > 0.5) {
+      targetColor = new Color("white")
+    } else {
+      targetColor = new Color("black")
+    }
+    const bgColor = blendPixiColors(accentColor, targetColor, 0.95)
+    const borderHighlight = blendPixiColors(accentColor, targetColor, 0.5)
+
+    this.icons.style.backgroundColor = bgColor.toHexa()
+    this.icons.style.borderImageSource = `linear-gradient(to right, ${bgColor.toHexa()}, ${borderHighlight.toHexa()}, ${bgColor.toHexa()})`
+    this.info.style.backgroundColor = bgColor.toHexa()
+    this.info.style.borderImageSource = `linear-gradient(to right, ${bgColor.toHexa()}, ${borderHighlight.toHexa()}, ${bgColor.toHexa()})`
+    this.info.style.color = accentColor.toHexa()
+  }
+
   updateIcons() {
     ;[...this.icons.children].forEach((icon, index) => {
       if (this.app.chartManager.chartAudio.getFilter(index).enabled)
@@ -524,8 +565,8 @@ class EQPoint {
   getY() {
     if (this.type.endsWith("shelf")) {
       this.y = gainToY(
-        this.window.app.chartManager.chartAudio.getFilter(this.filterIndex).gain
-          .value / 2 ?? 0
+        (this.window.app.chartManager.chartAudio.getFilter(this.filterIndex)
+          .gain.value ?? 0) / 2
       )
     } else if (this.canChangeGain()) {
       this.y = gainToY(

diff --git a/app/src/gui/window/SyncWindow.ts b/app/src/gui/window/SyncWindow.ts
@@ -1,10 +1,13 @@
 import ft from "fourier-transform/asm"
+import { Color } from "pixi.js"
 import tippy from "tippy.js"
 import { App } from "../../App"
 import { PartialTapNotedataEntry } from "../../chart/sm/NoteTypes"
+import { blendPixiColors, average as rgbAverage } from "../../util/Color"
 import { EventHandler } from "../../util/EventHandler"
 import { clamp, lerp, roundDigit, unlerp } from "../../util/Math"
 import { Options } from "../../util/Options"
+import { Themes } from "../../util/Theme"
 import { NumberSlider } from "../element/NumberSlider"
 import { WaterfallManager } from "../element/WaterfallManager"
 import { Window } from "./Window"
@@ -580,10 +583,6 @@ export class SyncWindow extends Window {
         Math.min(MAX_CANVAS_LENGTH, canvasLength - i * MAX_CANVAS_LENGTH),
         graphHeight * 2
       )
-      const ctx = canvas.getContext("2d")!
-      ctx.fillStyle = `rgba(0, 0, 0, 0.6)`
-      ctx.fillRect(0, 0, canvas.width, graphHeight)
-      ctx.fillRect(0, graphHeight * 1.5, canvas.width, graphHeight * 0.5)
       this.spectrogramCanvases.push(canvas)
     }
 
@@ -664,9 +663,7 @@ export class SyncWindow extends Window {
         }
       }
 
-      // Draw
-      ctx.fillStyle = "rgb(11, 14, 26)"
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
 
       const zoom = Options.chart.speed / 40
 
@@ -700,6 +697,33 @@ export class SyncWindow extends Window {
         )
       }
 
+      ctx.globalCompositeOperation = "source-atop"
+
+      let targetColor
+      if (rgbAverage(Themes.getColor("primary-bg")) > 0.5) {
+        targetColor = new Color("white")
+      } else {
+        targetColor = new Color("black")
+      }
+
+      ctx.fillStyle = blendPixiColors(
+        Themes.getColor("accent-color"),
+        targetColor,
+        0.1
+      ).toHexa()
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      ctx.globalCompositeOperation = "destination-over"
+
+      ctx.fillStyle = blendPixiColors(
+        Themes.getColor("accent-color"),
+        targetColor,
+        0.9
+      ).toHexa()
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      ctx.globalCompositeOperation = "source-over"
+
       // draw current measure lines
 
       const leftBoundSecond =
@@ -777,7 +801,7 @@ export class SyncWindow extends Window {
           this.tempoStep
       )
 
-      ctx.fillStyle = "rgba(0, 150, 255, 1)"
+      ctx.fillStyle = Themes.getColor("accent-color").toHex()
       ctx.textAlign = "right"
       ctx.textBaseline = "top"
       ctx.font = "22px Assistant"
@@ -788,7 +812,6 @@ export class SyncWindow extends Window {
       )
 
       ctx.textAlign = "right"
-      ctx.fillStyle = "rgba(0, 150, 255, 1)"
       ctx.textBaseline = "middle"
       if (this.tempogramGroups[currentTempoBlock]) {
         const aggregateTempos = []
@@ -917,7 +940,7 @@ export class SyncWindow extends Window {
         Math.floor(blockNum / MAX_CANVAS_LENGTH)
       ].getContext("2d")!
 
-    ctx.fillStyle = `rgba(0, 166, 255, 1)`
+    ctx.fillStyle = "white"
     response.forEach((value, index) => {
       const loc = this.spectroHeights[index]
       const col = clamp(value * 2000, 0, 255)
@@ -979,14 +1002,13 @@ export class SyncWindow extends Window {
         Math.floor(blockNum / MAX_CANVAS_LENGTH)
       ].getContext("2d")!
     const height = Math.min(1, Math.log(1 + sum)) * graphHeight * 0.5
-    ctx.fillStyle = "rgb(11, 14, 26)"
-    ctx.fillRect(
-      blockNum % MAX_CANVAS_LENGTH,
-      graphHeight,
-      1,
-      graphHeight * 0.5
-    )
-    ctx.fillStyle = `rgba(0, 100, 150, 0.5)`
+    // ctx.fillRect(
+    //   blockNum % MAX_CANVAS_LENGTH,
+    //   graphHeight,
+    //   1,
+    //   graphHeight * 0.5
+    // )
+    ctx.fillStyle = "white"
     ctx.fillRect(
       blockNum % MAX_CANVAS_LENGTH,
       graphHeight * 1.5 - height,
@@ -1289,7 +1311,7 @@ export class SyncWindow extends Window {
         Math.floor((blockNum * this.tempoStep) / MAX_CANVAS_LENGTH)
       ].getContext("2d")!
 
-    ctx.fillStyle = `rgba(0, 166, 255, 1)`
+    ctx.fillStyle = "white"
     this.tempogram[blockNum].forEach(data => {
       const col = clamp(data.value * 8000, 0, 255)
       ctx.globalAlpha = col / 255

diff --git a/app/src/util/Color.ts b/app/src/util/Color.ts
@@ -28,6 +28,10 @@ export function add(col: number, gamma: number): number {
   return rgbtoHex(r, g, b)
 }
 
+export function average(c: Color) {
+  return (c.red + c.green + c.blue) / 3
+}
+
 export function blendColors(colorA: string, colorB: string, amount: number) {
   const [rA, gA, bA] = colorA.match(/\w\w/g)!.map(c => parseInt(c, 16))
   const [rB, gB, bB] = colorB.match(/\w\w/g)!.map(c => parseInt(c, 16))
@@ -51,12 +55,6 @@ export function blendPixiColors(colorA: Color, colorB: Color, amount: number) {
   return new Color([r, g, b, a])
 }
 
-export function getCSSColor(id: string) {
-  return new Color(
-    document.body.computedStyleMap().get(id)?.toString() ?? "rgba(0, 0, 0, 1)"
-  )
-}
-
 type TintableObject = { tint: ColorSource; alpha: number; destroyed: boolean }
 
 const themeObjectMap = new Map<ThemeProperty, TintableObject[]>()