Fix colors in music editor instrument/waveform previews

src/components/music/InstrumentVolumeEditor.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useRef } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import l10n from "shared/lib/lang/l10n";
+import { ThemeContext } from "styled-components";
 import { FormRow } from "ui/form/FormLayout";
 import { SliderField } from "ui/form/SliderField";
 
@@ -24,6 +25,8 @@ export const InstrumentVolumeEditor = ({
   onChange,
 }: InstrumentVolumeEditorProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const themeContext = useContext(ThemeContext);
+
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
@@ -37,9 +40,7 @@ export const InstrumentVolumeEditor = ({
     const normalisedVolume = initialVolume / 15;
     const secLength = length === null ? 1 : length / 256;
 
-    const defaultColor = getComputedStyle(
-      document.documentElement
-    ).getPropertyValue("--highlight-color");
+    const defaultColor = themeContext.colors.highlight;
 
     // eslint-disable-next-line no-self-assign
     canvas.width = canvas.width;

src/components/music/NoiseMacroEditorForm.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from "react";
+import React, { useContext, useEffect, useRef } from "react";
+import { ThemeContext } from "styled-components";
 import { FormRow } from "ui/form/FormLayout";
 
 interface NoiseMacroEditorFormProps {
@@ -11,6 +12,8 @@ export const NoiseMacroEditorForm = ({
   onChange,
 }: NoiseMacroEditorFormProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const themeContext = useContext(ThemeContext);
+
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
@@ -21,9 +24,7 @@ export const NoiseMacroEditorForm = ({
     const drawHeight = canvas.height - 10;
     const ctx = canvas.getContext("2d");
 
-    const defaultColor = getComputedStyle(
-      document.documentElement
-    ).getPropertyValue("--highlight-color");
+    const defaultColor = themeContext.colors.highlight;
 
     // eslint-disable-next-line no-self-assign
     canvas.width = canvas.width;

src/components/music/VibratoWaveformPreview.tsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
 
 interface VibratoWaveformPreviewProps {
   waveform: string;
 }
 export const VibratoWaveformPreview = ({
   waveform,
 }: VibratoWaveformPreviewProps) => {
+  const themeContext = useContext(ThemeContext);
+
   let path = "";
 
   [...waveform].forEach((l: string, i: number) => {
@@ -14,9 +17,7 @@ export const VibratoWaveformPreview = ({
     } `;
   });
 
-  const defaultColor = getComputedStyle(
-    document.documentElement
-  ).getPropertyValue("--highlight-color");
+  const defaultColor = themeContext.colors.highlight;
 
   return (
     <div style={{ height: 20 }}>

src/components/music/WaveEditorForm.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useRef } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import { useAppDispatch, useAppSelector } from "store/hooks";
 import { Select } from "ui/form/Select";
 import l10n from "shared/lib/lang/l10n";
 import trackerDocumentActions from "store/features/trackerDocument/trackerDocumentActions";
 import { FormRow, FormField } from "ui/form/FormLayout";
+import { ThemeContext } from "styled-components";
 
 interface WaveEditorFormProps {
   waveId: number;
@@ -14,6 +15,7 @@ export const WaveEditorForm = ({ waveId, onChange }: WaveEditorFormProps) => {
   const dispatch = useAppDispatch();
 
   const song = useAppSelector((state) => state.trackerDocument.present.song);
+  const themeContext = useContext(ThemeContext);
 
   const waveOptions = song?.waves.map((wave: Uint8Array, i: number) => ({
     value: i,
@@ -47,9 +49,7 @@ export const WaveEditorForm = ({ waveId, onChange }: WaveEditorFormProps) => {
 
     const ctx = canvas.getContext("2d");
 
-    const defaultColor = getComputedStyle(
-      document.documentElement
-    ).getPropertyValue("--highlight-color");
+    const defaultColor = themeContext.colors.highlight;
 
     // eslint-disable-next-line no-self-assign
     canvas.width = canvas.width;