Added enableRandom

src/App.tsx

@@ -42,8 +42,13 @@ function App() {
 				const temp = data.find((t: any) => t.name === themeName);
 				setTheme(temp);
 			} else {
-				const index = Math.floor(Math.random() * data.length);
-				setTheme(data[index]);
+				let enabled = data.filter((t: any) => t.randomEnabled);
+				if (enabled.length === 0) {
+					setTheme(data[0]);
+				} else {
+					const index = Math.floor(Math.random() * enabled.length);
+					setTheme(enabled[index]);
+				}
 			}
 		}
 	}, [isFetched, themeName]);

src/pages/settings/components/Themes.tsx

@@ -14,7 +14,7 @@ import {
 import { useDisclosure, useLocalStorage } from '@mantine/hooks';
 import { useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi';
+import { FiCheck, FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi';
 import '@mantine/core/styles/ModalBase.css';
 import '@mantine/core/styles/Modal.css';
 import { modals } from '@mantine/modals';
@@ -40,7 +40,7 @@ function ThemesSettings({ theme }: any) {
 		if (isFetched) {
 			setThemesList(data);
 		}
-	}, [isFetched]);
+	}, [data, isFetched]);
 
 	const handleOpen = (theme: any) => {
 		setSelectedTheme(theme);
@@ -78,6 +78,7 @@ function ThemesSettings({ theme }: any) {
 	const randomColor = () => {
 		return `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},1)`;
 	};
+
 	return (
 		<>
 			<Modal.Root
@@ -348,7 +349,38 @@ function ThemesSettings({ theme }: any) {
 								</Button>
 							</Group>
 							<Group justify='space-between' gap={0}>
-								<Group className='theme-palette'>
+								<ActionIcon
+									style={{
+										background: theme.randomEnabled
+											? 'rgba(255,255,255,1)'
+											: 'rgba(255,255,255,0.5)',
+										border: `solid 1px ${theme.borderColor}`,
+										borderRadius: '2%',
+										margin: '2px',
+										color: 'black',
+									}}
+									styles={{
+										root: {
+											height: '10px',
+											width: '10px',
+										},
+										icon: {
+											height: '10px',
+											width: '10px',
+											margin: 0,
+											padding: 0,
+										},
+									}}
+									onClick={() => {
+										createTheme({
+											method: 'PATCH',
+											endpoint: 'api/themes',
+											body: { ...theme, randomEnabled: !theme.randomEnabled },
+										});
+									}}
+								>
+									<FiCheck height={'10px'} width={'10px'} />
+								</ActionIcon>
 								<ActionIcon
 									className={actionIconClasses.editButton}
 									classNames={actionIconClasses}
@@ -370,7 +402,6 @@ function ThemesSettings({ theme }: any) {
 									<FiTrash color='red' />
 								</ActionIcon>
 							</Group>
-							</Group>
 						</Stack>
 					))}
 					<Stack key={theme.name} w={'300px'}>