Add randomized theme

gui/package.json

@@ -21,6 +21,7 @@
     "intl-pluralrules": "^2.0.1",
     "ip-num": "^1.5.1",
     "prompts": "^2.4.2",
+    "randomcolor": "^0.6.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
@@ -53,6 +54,7 @@
     "@tailwindcss/forms": "^0.5.9",
     "@tauri-apps/cli": "^2.0.2",
     "@types/file-saver": "^2.0.7",
+    "@types/randomcolor": "^0.5.9",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",

gui/src/AppLayout.tsx

@@ -1,10 +1,44 @@
-import { useLayoutEffect } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { useConfig } from './hooks/config';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
+import randomColor from 'randomcolor';
 
 export function AppLayout() {
   const { loading, config } = useConfig();
   const navigate = useNavigate();
+  const location = useLocation();
+  const [colors, setColors] = useState<string[] | null>();
+
+  useEffect(() => {
+    setColors(
+      [
+        (
+          randomColor({
+            format: 'rgbArray',
+            count: 9,
+            luminosity: 'random',
+            hue: Math.floor(Math.random() * 360),
+          }) as unknown as number[][]
+        ).map((x) => x.join(',')),
+        (
+          randomColor({
+            format: 'rgbArray',
+            count: 5,
+            luminosity: 'random',
+            hue: Math.floor(Math.random() * 360),
+          }) as unknown as number[][]
+        ).map((x) => x.join(',')),
+        (
+          randomColor({
+            format: 'rgbArray',
+            count: 6,
+            luminosity: 'random',
+          }) as unknown as number[][]
+        ).map((x) => x.join(',')),
+      ].flat()
+    );
+  }, [location]);
 
   useLayoutEffect(() => {
     if (loading || !config) return;
@@ -45,6 +79,38 @@ export function AppLayout() {
 
   return (
     <>
+      <Helmet>
+        <style>
+          {colors &&
+            `
+    :root[data-theme='random'] {
+      --background-10: ${colors[0]};
+      --background-20: ${colors[1]};
+      --background-30: ${colors[2]};
+      --background-40: ${colors[3]};
+      --background-50: ${colors[4]};
+      --background-60: ${colors[5]};
+      --background-70: ${colors[6]};
+      --background-80: ${colors[7]};
+      --background-90: ${colors[8]};
+
+      --accent-background-10: ${colors[9]};
+      --accent-background-20: ${colors[10]};
+      --accent-background-30: ${colors[11]};
+      --accent-background-40: ${colors[12]};
+      --accent-background-50: ${colors[13]};
+
+      --success: ${colors[14]};
+      --warning: ${colors[15]};
+      --critical: ${colors[16]};
+      --special: ${colors[17]};
+      --window-icon-stroke: ${colors[18]};
+
+      --default-color: ${colors[19]};
+    }
+    `}
+        </style>
+      </Helmet>
       <Outlet />
     </>
   );

gui/src/components/settings/pages/InterfaceSettings.tsx

@@ -358,6 +358,12 @@ export function InterfaceSettings() {
                   value={'asexual'}
                   colors="!bg-asexual-flag"
                 ></ThemeSelector>
+                <ThemeSelector
+                  control={control}
+                  name="appearance.theme"
+                  value={'random'}
+                  colors="!bg-random !bg-[length:181.019px_200%] !bg-repeat checked:bg-[0%_0%] animate-scroll"
+                ></ThemeSelector>
               </div>
             </div>
 

gui/tailwind.config.ts

@@ -150,7 +150,7 @@ const colors = {
     700: '#b3b3b3',
     900: '#d8d8d8',
   },
-  'asexual': {
+  asexual: {
     100: '#000000',
     200: '#A3A3A3',
     300: '#FFFFFF',
@@ -225,6 +225,14 @@ const config = {
             'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1)',
           },
         },
+        'background-scroll': {
+          '0%': {
+            'background-position': 'calc(128px / sin(135deg)) 0%', // size / sin(135deg)
+          },
+        },
+      },
+      animation: {
+        scroll: 'background-scroll 4s linear infinite reverse',
       },
       backgroundImage: {
         slime: `linear-gradient(135deg, ${colors.purple[100]} 50%, ${colors['blue-gray'][700]} 50% 100%)`,
@@ -236,6 +244,8 @@ const config = {
         light: `linear-gradient(135deg, ${colors['light-accent'][100]} 50%, ${colors['light-background'][700]} 50% 100%)`,
         'trans-flag': `linear-gradient(135deg, ${colors['trans-blue'][800]} 40%, ${colors['trans-blue'][700]} 40% 70%, ${colors['trans-blue'][600]} 70% 100%)`,
         'asexual-flag': `linear-gradient(135deg, ${colors['asexual'][100]} 30%, ${colors['asexual'][200]} 30% 50%, ${colors['asexual'][300]} 50% 70%, ${colors['asexual'][400]} 70% 100%)`,
+        random:
+          'repeating-linear-gradient(135deg, #ff0000 0 calc(128px / 6 * 1), #ffa500 calc(128px / 6 * 1) calc(128px / 6 * 2), #ffff00 calc(128px / 6 * 2) calc(128px / 6 * 3), #008000 calc(128px / 6 * 3) calc(128px / 6 * 4), #0000ff calc(128px / 6 * 4) calc(128px / 6 * 5), #800080 calc(128px / 6 * 5) calc(128px / 6 * 6))',
       },
     },
     data: {