New Theme modal

package-lock.json

@@ -32,7 +32,7 @@
 				"@vitest/coverage-v8": "^3.2.4",
 				"@vitest/ui": "^3.2.4",
 				"typescript": "^5.8.3",
-				"vite": "^7.0.5",
+				"vite": "^7.0.6",
 				"vite-plugin-dts": "~4.5.4",
 				"vite-tsconfig-paths": "^5.1.4",
 				"vitest": "^3.2.4"
@@ -3468,9 +3468,9 @@
 			"dev": true
 		},
 		"node_modules/picomatch": {
-			"version": "4.0.2",
+			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -4506,15 +4506,15 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "7.0.5",
+			"version": "7.0.6",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-7.0.5.tgz",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-7.0.6.tgz",
-			"integrity": "sha512-1mncVwJxy2C9ThLwz0+2GKZyEXuC3MyWtAAlNftlZZXZDP3AJt5FmwcMit/IGGaNZ8ZOB2BNO/HFUB+CpN0NQw==",
+			"integrity": "sha512-MHFiOENNBd+Bd9uvc8GEsIzdkn1JxMmEeYX35tI3fv0sJBUTfW5tQsoaOwuY4KhBI09A3dUJ/DXf2yxPVPUceg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"esbuild": "^0.25.0",
 				"fdir": "^6.4.6",
-				"picomatch": "^4.0.2",
+				"picomatch": "^4.0.3",
 				"postcss": "^8.5.6",
 				"rollup": "^4.40.0",
 				"tinyglobby": "^0.2.14"

package.json

@@ -34,7 +34,7 @@
 		"@vitest/coverage-v8": "^3.2.4",
 		"@vitest/ui": "^3.2.4",
 		"typescript": "^5.8.3",
-		"vite": "^7.0.5",
+		"vite": "^7.0.6",
 		"vite-plugin-dts": "~4.5.4",
 		"vite-tsconfig-paths": "^5.1.4",
 		"vitest": "^3.2.4"

src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylistModal.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Modal, SimpleGrid, Text, TextInput } from '@mantine/core';
+import { Button, Group, Modal, Text, TextInput } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses, textInputClasses } from 'styles';
@@ -87,7 +87,7 @@ export function ThemePlaylistModal({
 						/>
 					) : (
 						<>
-							<SimpleGrid cols={3}>
+							<Group w={'100%'} justify='center'>
 								{selectedPlaylist?.name !== 'Time of Day' &&
 									allThemes?.map((miniTheme: Theme) => {
 										const newThemeList = themeList;
@@ -102,7 +102,7 @@ export function ThemePlaylistModal({
 											/>
 										);
 									})}
-							</SimpleGrid>
+							</Group>
 							<Group mt={'1rem'}>
 								<Button color={'green'} onClick={handleSavePlaylist}>
 									Save

src/pages/settings/components/Theming/Themes/Themes.tsx

@@ -44,7 +44,7 @@ export function Themes() {
 		primaryColor: '#222222',
 		accentColor: '#5c5c5c',
 		borderColor: '#5c5c5c',
-		randomEnabled: 0,
+		randomEnabled: 1,
 		textShadowsEnabled: 0,
 		appShadowsEnabled: 0,
 	});
@@ -52,6 +52,7 @@ export function Themes() {
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [isLoading, setIsLoading] = useState(false);
+	const [isNew, setIsNew] = useState(false);
 	const navigate = useNavigate();
 	const {
 		currentTheme,
@@ -70,6 +71,7 @@ export function Themes() {
 	const handleClose = () => {
 		closeThemeModal();
 		closePicker();
+		setIsNew(false);
 		setSelectedTheme({
 			id: undefined,
 			name: 'default',
@@ -79,12 +81,17 @@ export function Themes() {
 			primaryColor: '#222222',
 			accentColor: '#5c5c5c',
 			borderColor: '#5c5c5c',
-			randomEnabled: 0,
+			randomEnabled: 1,
 			textShadowsEnabled: 0,
 			appShadowsEnabled: 0,
 		});
 	};
 
+	const handleNewTheme = () => {
+		setIsNew(true);
+		openThemeModal();
+	};
+
 	const handleSaveTheme = () => {
 		mutateAsync({
 			method: selectedTheme?.id === undefined ? 'POST' : 'PATCH',
@@ -147,6 +154,9 @@ export function Themes() {
 				pickerOpen={pickerOpen}
 				closePicker={closePicker}
 				handleSaveTheme={handleSaveTheme}
+				isNew={isNew}
+				setIsNew={setIsNew}
+				allThemes={allThemes}
 			/>
 			<BackgroundModal
 				backgroundModalOpened={backgroundModalOpened}
@@ -156,7 +166,7 @@ export function Themes() {
 			/>
 			<SettingsHeader
 				setDragging={undefined}
-				openModal={openThemeModal}
+				openModal={handleNewTheme}
 				title={'Themes'}
 				tooltip={{
 					title: 'Themes can be created here and applied to the homepage.',