Use a numbered pre-named set of user colors instead of random. Closes #1974

web/style-definitions/tokens/color/default-theme.yaml

@@ -36,3 +36,21 @@ theme:
     value: '{color.owncast.orange.500.value}'
   error-color:
     value: '{color.owncast.red.500.value}'
+
+  user-colors:
+    1:
+      value: '{color.owncast.user.1.value}'
+    2:
+      value: '{color.owncast.user.2.value}'
+    3:
+      value: '{color.owncast.user.3.value}'
+    4:
+      value: '{color.owncast.user.4.value}'
+    5:
+      value: '{color.owncast.user.5.value}'
+    6:
+      value: '{color.owncast.user.6.value}'
+    7:
+      value: '{color.owncast.user.7.value}'
+    8:
+      value: '{color.owncast.user.8.value}'

web/style-definitions/tokens/color/owncast-colors.yaml

@@ -75,6 +75,24 @@ color:
     background-secondary:
       value: '#282A30'
 
+    user:
+      1:
+        value: 'rgb(244, 11, 11)'
+      2:
+        value: 'rgb(244, 128, 11)'
+      3:
+        value: 'rgb(244, 244, 11)'
+      4:
+        value: 'rgb(88, 244, 11)'
+      5:
+        value: 'rgb(11, 244, 244)'
+      6:
+        value: 'rgb(11, 166, 244)'
+      7:
+        value: 'rgb(102, 102, 255)'
+      8:
+        value: 'rgb(244, 11, 244)'
+
 font:
   owncast:
     family: