Add style compat with peertube v7

client/utils/colors.ts

@@ -24,18 +24,41 @@ function computeAutoColors (): AutoColors | null {
   const buttonStyles = window.getComputedStyle(button)
 
   const autocolors: AutoColors = {
-    mainForeground: styles.getPropertyValue('--mainForegroundColor').trim(),
-    mainBackground: styles.getPropertyValue('--mainBackgroundColor').trim(),
-    greyForeground: styles.getPropertyValue('--greyForegroundColor').trim(),
-    greyBackground: styles.getPropertyValue('--greyBackgroundColor').trim(),
-    menuForeground: styles.getPropertyValue('--menuForegroundColor').trim(),
-    menuBackground: styles.getPropertyValue('--menuBackgroundColor').trim(),
-    inputForeground: styles.getPropertyValue('--inputForegroundColor').trim(),
-    inputBackground: styles.getPropertyValue('--inputBackgroundColor').trim(),
-    buttonForeground: buttonStyles.color.trim(),
-    buttonBackground: styles.getPropertyValue('--mainColor').trim(),
-    link: styles.getPropertyValue('--mainForegroundColor').trim(),
-    linkHover: styles.getPropertyValue('--mainForegroundColor').trim()
+    mainForeground: styles.getPropertyValue('--fg').trim() ||
+      styles.getPropertyValue('--mainForegroundColor').trim(),
+
+    mainBackground: styles.getPropertyValue('--bg').trim() ||
+      styles.getPropertyValue('--mainBackgroundColor').trim(),
+
+    greyForeground: styles.getPropertyValue('--fg-300').trim() ||
+      styles.getPropertyValue('--greyForegroundColor').trim(),
+
+    greyBackground: styles.getPropertyValue('--bg-secondary-300').trim() ||
+      styles.getPropertyValue('--greyBackgroundColor').trim(),
+
+    menuForeground: styles.getPropertyValue('--fg').trim() ||
+      styles.getPropertyValue('--menuForegroundColor').trim(),
+
+    menuBackground: styles.getPropertyValue('--bg-secondary-400').trim() ||
+      styles.getPropertyValue('--menuBackgroundColor').trim(),
+
+    inputForeground: styles.getPropertyValue('--input-fg').trim() ||
+      styles.getPropertyValue('--inputForegroundColor').trim(),
+
+    inputBackground: styles.getPropertyValue('--input-bg').trim() ||
+      styles.getPropertyValue('--inputBackgroundColor').trim(),
+
+    buttonForeground: styles.getPropertyValue('--on-primary').trim() ||
+      buttonStyles.color.trim(),
+
+    buttonBackground: styles.getPropertyValue('--primary').trim() ||
+      styles.getPropertyValue('--mainColor').trim(),
+
+    link: styles.getPropertyValue('--fg').trim() ||
+      styles.getPropertyValue('--mainForegroundColor').trim(),
+
+    linkHover: styles.getPropertyValue('--fg-400').trim() ||
+      styles.getPropertyValue('--mainForegroundColor').trim()
   }
   const autoColorsTest = areAutoColorsValid(autocolors)
   if (autoColorsTest !== true) {