Random themes

src/App.tsx

@@ -39,8 +39,13 @@ function App() {
 	const [theme, setTheme] = useAtom(appTheme);
 	useEffect(() => {
 		if (data && themeName) {
+			if (themeName !== 'random') {
 				const temp = data.find((t: any) => t.name === themeName);
 				setTheme(temp);
+			} else {
+				const index = Math.floor(Math.random() * data.length);
+				setTheme(data[index]);
+			}
 		}
 	}, [isFetched, themeName]);
 

src/pages/settings/components/Themes.tsx

@@ -79,6 +79,10 @@ function ThemesSettings({ theme }: any) {
 		openDeleteConfirmModal(theme);
 		close();
 	};
+
+	const randomColor = () => {
+		return `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},1)`;
+	};
 	return (
 		<>
 			<Modal.Root
@@ -374,6 +378,50 @@ function ThemesSettings({ theme }: any) {
 							</Group>
 						</Stack>
 					))}
+					<Stack key={theme.name} w={'300px'}>
+						<Group gap={0} justify='space-between'>
+							<Button
+								w={'100%'}
+								h={'75px'}
+								style={{
+									backgroundSize: 'cover',
+									backgroundColor: 'white',
+									border: 'solid black',
+									color: 'black',
+								}}
+								data-theme={theme.name}
+								onClick={() => {
+									setValue('random');
+								}}
+							>
+								Random
+							</Button>
+						</Group>
+						<Group justify='space-between' gap={0}>
+							<Group className='theme-palette'>
+								<ActionIcon
+									className={actionIconClasses.editButton}
+									classNames={actionIconClasses}
+									onClick={() => handleOpen(theme)}
+								>
+									<FiEdit />
+								</ActionIcon>
+								<ColorSwatch color={randomColor()} />
+								<ColorSwatch color={randomColor()} />
+								<ColorSwatch color={randomColor()} />
+								<ColorSwatch color={randomColor()} />
+								<ColorSwatch color={randomColor()} />
+
+								<ActionIcon
+									className={actionIconClasses.editButton}
+									classNames={actionIconClasses}
+									onClick={() => handleDeleteTheme(theme)}
+								>
+									<FiTrash color='red' />
+								</ActionIcon>
+							</Group>
+						</Group>
+					</Stack>
 				</Group>
 			</Stack>
 		</>