smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

New Theme Builder UI

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-27 16:07:29 -05:00
parent f7870d10b1
commit bfe80b5844
7 changed files with 479 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/settings/components/Theming/ThemeExampleApp.tsx
View File

@@ -22,7 +22,7 @@ function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
paddingTop: '1rem',
}}
>
<FiCheck style={{ color: selectedTheme.primaryColor }} height={32} width={32} />
<FiCheck style={{ color: selectedTheme?.primaryColor }} height={32} width={32} />
</Stack>
<Stack
style={{
@@ -39,7 +39,7 @@ function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
fontWeight: 400,
fontSize: '.625rem',
fontStyle: 'normal',
color: selectedTheme.primaryColor,
color: selectedTheme?.primaryColor,
fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
@@ -52,7 +52,7 @@ function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
fontWeight: 400,
fontSize: '.625rem',
fontStyle: 'italic',
color: selectedTheme.accentColor,
color: selectedTheme?.accentColor,
fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,

391
src/pages/settings/components/Theming/ThemeModal.tsx
View File

@@ -1,20 +1,23 @@
import {
ActionIcon,
Button,
ColorPicker,
ColorSwatch,
Group,
Modal,
ScrollArea,
Stack,
Text,
TextInput,
Tooltip,
UnstyledButton,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { useEffect, useRef, useState } from 'react';
import { FiSave, FiX } from 'react-icons/fi';
import { modalClasses, scrollAreaClasses, textInputClasses } from 'styles';
import { FiImage, FiSave, FiX } from 'react-icons/fi';
import { modalClasses, scrollAreaClasses, textClasses, textInputClasses } from 'styles';
import type { Theme } from 'types';
import ThemeModalColorSwatches from './ThemeModalColorSwatches';
import ThemeModalContent from './ThemeModalContent';
function ThemeModal({
@@ -22,10 +25,6 @@ function ThemeModal({
handleClose,
selectedTheme,
setSelectedTheme,
colorId,
setColorId,
colorValue,
setColorValue,
openPicker,
backgroundList,
pickerOpen,
@@ -36,10 +35,6 @@ function ThemeModal({
handleClose: () => void;
selectedTheme: Theme;
setSelectedTheme: (selectedTheme: Theme) => void;
colorId: string;
setColorId: (colorId: string) => void;
colorValue: string;
setColorValue: (colorValue: string) => void;
openPicker: () => void;
backgroundList: string[];
pickerOpen: boolean;
@@ -50,10 +45,18 @@ function ThemeModal({
const viewportRef = useRef<HTMLDivElement>(null);
const [query, setQuery] = useState('');
const [hovered, setHovered] = useState(-1);
const [colorId, setColorId] = useState<string>('');
const [colorValue, setColorValue] = useState('#000000');
const [designerTheme, setDesignerTheme] = useState<Theme>({
...selectedTheme,
});
const filtered = backgroundList.filter((item: string) =>
item.toLowerCase().includes(query.toLowerCase()),
);
const [backgroundPicker, { open: openBackgroundPicker, close: closeBackgroundPicker }] =
useDisclosure(false);
const re = /(?:\.([^.]+))?$/;
const items = filtered.map((item: string, index: number) => {
return (
@@ -75,8 +78,8 @@ function ThemeModal({
alignItems: 'center',
}}
onClick={() =>
setSelectedTheme({
...selectedTheme,
setDesignerTheme({
...designerTheme,
backgroundImage: item,
})
}
@@ -116,18 +119,11 @@ function ThemeModal({
});
useEffect(() => {
if (selectedTheme) {
if (selectedTheme?.backgroundImage === 'none') {
setQuery('');
} else {
setQuery(selectedTheme?.backgroundImage || '');
}
}
setDesignerTheme(selectedTheme);
}, [selectedTheme]);
return (
<Modal.Root
size={'50%'}
size={'75%'}
className={modalClasses.editThemeModal}
classNames={modalClasses}
opened={opened}
@@ -152,7 +148,8 @@ function ThemeModal({
color: 'var(--mantine-color-primary-0)',
},
input: {
color: 'var(--mantine-color-primary-0)',
color: selectedTheme.primaryColor,
backgroundColor: selectedTheme.backgroundColor,
border: 'none',
borderBottom: '1px solid var(--mantine-color-primary-0)',
},
@@ -161,32 +158,158 @@ function ThemeModal({
</Group>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body p={'2rem'}>
<ThemeModalContent selectedTheme={selectedTheme} />
<Group
w={'100%'}
h={'100%'}
gap={isMobile ? 20 : 0}
style={{ flexDirection: isMobile ? 'column' : 'row' }}
>
<Stack w={isMobile ? '100%' : '50%'}>
{pickerOpen ? (
<Group justify='center'>
<Modal.Body>
<Group p={'2rem'} w={'100%'} align='flex-start' justify='space-between'>
<Stack display={'flex'} pos={'relative'} w={'70%'}>
<ThemeModalContent selectedTheme={designerTheme} />
<Tooltip
label={'Change Primary Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
>
<ColorSwatch
onClick={() => {
closeBackgroundPicker();
setColorId('primaryColor');
openPicker();
setColorValue(selectedTheme.primaryColor);
}}
color={selectedTheme.primaryColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
top={'6.25rem'}
left={'1.5rem'}
/>
</Tooltip>
<Tooltip
label={'Change Accent Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
>
<ColorSwatch
onClick={() => {
closeBackgroundPicker();
setColorId('accentColor');
openPicker();
setColorValue(selectedTheme.accentColor);
}}
color={selectedTheme.accentColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
bottom={'6rem'}
left={'11rem'}
/>
</Tooltip>
<Tooltip
label={'Change Background Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
>
<ColorSwatch
onClick={() => {
closeBackgroundPicker();
setColorId('backgroundColor');
openPicker();
setColorValue(selectedTheme.backgroundColor);
}}
color={selectedTheme.backgroundColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
bottom={'10rem'}
right={'3.5rem'}
/>
</Tooltip>
<Tooltip
label={'Change Border Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
>
<ColorSwatch
onClick={() => {
closeBackgroundPicker();
setColorId('borderColor');
openPicker();
setColorValue(selectedTheme.borderColor);
}}
color={selectedTheme.borderColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
top={'4.5rem'}
right={'7rem'}
/>
</Tooltip>
<Tooltip
label={'Change Search Color'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
>
<ColorSwatch
onClick={() => {
closeBackgroundPicker();
setColorId('searchBackground');
openPicker();
setColorValue(selectedTheme.searchColor);
}}
color={selectedTheme.searchColor}
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
top={'3.25rem'}
left={'14.5rem'}
/>
</Tooltip>
<Tooltip
label={'Change Background'}
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
>
<ActionIcon
onClick={() => {
closePicker();
openBackgroundPicker();
}}
pos={'absolute'}
right={0}
>
<FiImage size={20} />
</ActionIcon>
</Tooltip>
</Stack>
<Stack
w={'28%'}
h={'436px'}
p={'1rem'}
style={{
borderRadius: '1rem',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-primary-0) 20%, transparent)',
}}
>
{pickerOpen && (
<Stack h={'100%'} align='center' justify='space-between'>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
Change {colorId}
</Text>
<ColorPicker
value={colorValue}
onChange={setColorValue}
format={colorId === 'background' ? 'hex' : 'hexa'}
onChange={(e) => {
setColorValue(e);
setDesignerTheme({
...designerTheme,
[colorId]: e,
});
}}
format={colorId === 'backgroundColor' ? 'hex' : 'hexa'}
w={'90%'}
mb={colorId === 'background' ? '1.5rem' : undefined}
mb={colorId === 'backgroundColor' ? '1.5rem' : undefined}
/>
<Group justify='center'>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
w={'55%'}
value={colorValue}
onChange={(e) => setColorValue(e.target.value)}
/>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
w={'90%'}
value={colorValue}
onChange={(e) => setColorValue(e.target.value)}
/>
<Group mt={'auto'} justify='center'>
<Button
color={'green'}
onClick={() => {
@@ -203,7 +326,7 @@ function ThemeModal({
accentColor: colorValue,
});
break;
case 'background':
case 'backgroundColor':
setSelectedTheme({
...selectedTheme,
backgroundColor: colorValue,
@@ -230,89 +353,112 @@ function ThemeModal({
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={closePicker}
onClick={() => {
closePicker();
setDesignerTheme({
...designerTheme,
[colorId]: selectedTheme[colorId as keyof Theme],
});
}}
>
<FiX />
</Button>
<Group w={'100%'} align='center' justify='center' />
</Group>
</Group>
) : (
<ThemeModalColorSwatches
selectedTheme={selectedTheme}
openPicker={openPicker}
setColorId={setColorId}
setColorValue={setColorValue}
/>
</Stack>
)}
</Stack>
<Stack
h={'100%'}
w={isMobile ? '100%' : '50%'}
align='center'
justify='center'
>
<Group gap={0}>
<Text mr={'.5rem'}>Search:</Text>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
value={query.replace(/\.[^/.]+$/, '')}
rightSection={
<FiX
style={{
cursor: 'pointer',
margin: '.25rem',
{backgroundPicker && (
<Stack h={'100%'} align='center' justify='center'>
<Group gap={0}>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
placeholder='Search'
value={query.replace(/\.[^/.]+$/, '')}
rightSection={
<FiX
style={{
cursor: 'pointer',
margin: '.25rem',
}}
onClick={() => {
setQuery('');
}}
/>
}
onChange={(event) => {
setQuery(event.currentTarget.value);
setHovered(-1);
}}
onClick={() => {
setQuery('');
onKeyDown={(event) => {
if (event.key === 'ArrowDown') {
event.preventDefault();
setHovered((current) => {
const nextIndex =
current + 1 >= filtered.length ? current : current + 1;
viewportRef.current
?.querySelectorAll('[data-list-item]')
?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
return nextIndex;
});
}
if (event.key === 'ArrowUp') {
event.preventDefault();
setHovered((current) => {
const nextIndex = current - 1 < 0 ? current : current - 1;
viewportRef.current
?.querySelectorAll('[data-list-item]')
?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
return nextIndex;
});
}
}}
/>
}
onChange={(event) => {
setQuery(event.currentTarget.value);
setHovered(-1);
}}
onKeyDown={(event) => {
if (event.key === 'ArrowDown') {
event.preventDefault();
setHovered((current) => {
const nextIndex =
current + 1 >= filtered.length ? current : current + 1;
viewportRef.current
?.querySelectorAll('[data-list-item]')
?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
return nextIndex;
});
}
if (event.key === 'ArrowUp') {
event.preventDefault();
setHovered((current) => {
const nextIndex = current - 1 < 0 ? current : current - 1;
viewportRef.current
?.querySelectorAll('[data-list-item]')
?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
return nextIndex;
});
}
}}
/>
</Group>
<ScrollArea.Autosize
viewportRef={viewportRef}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
style={{
height: 150,
width: '90%',
borderRadius: 8,
}}
>
<Stack gap={0} align='center' display={'block'}>
{items}
</Group>
<ScrollArea.Autosize
viewportRef={viewportRef}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
style={{
height: 325,
width: '90%',
borderRadius: 8,
}}
>
<Stack gap={0} align='center' display={'block'}>
{items}
</Stack>
</ScrollArea.Autosize>
<Group justify='center'>
<Button
color={'green'}
onClick={() => {
setSelectedTheme({
...selectedTheme,
backgroundImage: designerTheme.backgroundImage,
});
closeBackgroundPicker();
}}
>
<FiSave />
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeBackgroundPicker();
setDesignerTheme({
...designerTheme,
backgroundImage: selectedTheme.backgroundImage,
});
}}
>
<FiX />
</Button>
</Group>
</Stack>
</ScrollArea.Autosize>
)}
{!pickerOpen && !backgroundPicker && <Stack />}
</Stack>
</Group>
<Group>
@@ -322,7 +468,10 @@ function ThemeModal({
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
onClick={() => {
closeBackgroundPicker();
handleClose();
}}
>
Cancel
</Button>

4
src/pages/settings/components/Theming/ThemeModalColorSwatches.tsx
View File

@@ -1,5 +1,4 @@
import { ColorSwatch, Group, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { colorSwatchClasses, textClasses } from 'styles';
import type { Theme } from 'types';
@@ -14,9 +13,8 @@ function ThemeModalColorSwatches({
setColorId: (colorId: string) => void;
setColorValue: (colorValue: string) => void;
}) {
const { isMobile } = useCommonHooks();
return (
<Stack h={isMobile ? '100%' : 256} justify='center'>
<Stack justify='center'>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Primary Color

323
src/pages/settings/components/Theming/ThemeModalContent.tsx
View File

@@ -1,4 +1,6 @@
import { Group, Stack, Text } from '@mantine/core';
import { Select, Stack, Text } from '@mantine/core';
import SearchSelectItem from 'pages/homepage/components/Search/SearchSelectItem';
import { selectClasses } from 'styles';
import type { Theme } from 'types';
import ThemeExampleApp from './ThemeExampleApp';
@@ -6,7 +8,6 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
return (
<Stack
style={{
width: '100%',
backgroundImage:
selectedTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
? `linear-gradient(${selectedTheme?.backgroundColor}33, ${selectedTheme?.backgroundColor}33), url(../../api/backgroundImages/${selectedTheme?.backgroundImage})`
@@ -22,173 +23,197 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
backgroundPosition: 'center',
borderRadius: '10px',
border: '2px solid var(--mantine-color-primary-0)',
padding: '1rem',
}}
align='center'
>
<Group
justify='center'
style={{
color: selectedTheme.primaryColor,
paddingTop: '1rem',
<Select
disabled
w={'80%'}
classNames={selectClasses}
data={[
{
label: 'Google Search',
value: 'google',
},
]}
searchValue={'example search'}
data-active={true}
dropdownOpened={true}
autoFocus={false}
leftSection={'Google Search'}
rightSection={<div />}
renderOption={(item: any) => {
return (
<SearchSelectItem
item={item}
handleSearchHistoryItem={undefined}
searchEndpoint={undefined}
/>
);
}}
>
{selectedTheme.name}
</Group>
<Text
pl={'1.5rem'}
style={{
textDecoration: 'underline',
fontSize: '1.25rem',
fontWeight: 200,
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
color: selectedTheme.primaryColor,
}}
>
Applications
</Text>
<Stack
style={{
gap: '.25rem',
backgroundSize: 'cover',
borderBottom: '0px solid',
display: 'grid',
gridColumnGap: '5px',
gridRowGap: '5px',
gridTemplateColumns: '1fr 1fr 1fr',
gridTemplateRows: '64px',
padding: '1rem',
paddingTop: 0,
justifyContent: 'center',
alignContent: 'center',
}}
>
<ThemeExampleApp selectedTheme={selectedTheme} />
<ThemeExampleApp selectedTheme={selectedTheme} />
<ThemeExampleApp selectedTheme={selectedTheme} />
</Stack>
<Text
pl={'1.5rem'}
style={{
textDecoration: 'underline',
fontSize: '1.25rem',
fontWeight: 200,
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
color: selectedTheme.primaryColor,
}}
>
Bookmarks
</Text>
<Stack
style={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
gridColumnGap: '20px',
gridRowGap: '0px',
gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
gridTemplateRows: 'auto',
}}
>
<Stack
/>
<Stack gap={0} w={'100%'}>
<Text
pl={'1.5rem'}
style={{
width: '100%',
marginBottom: 0,
display: 'block',
lineHeight: '1.5rem',
padding: '1rem',
paddingTop: 0,
textDecoration: 'underline',
fontSize: '1.25rem',
fontWeight: 200,
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
color: selectedTheme?.primaryColor,
}}
>
<Text
style={{
fontSize: '.875rem',
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme.accentColor,
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
}}
>
Example Category
</Text>
<Text
style={{
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme.primaryColor,
}}
component='a'
>
{'Bookmark 1'}
</Text>
<Text
style={{
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme.primaryColor,
}}
component='a'
>
{'Bookmark 2'}
</Text>
Applications
</Text>
<Stack
style={{
gap: '.25rem',
backgroundSize: 'cover',
borderBottom: '0px solid',
display: 'grid',
gridColumnGap: '5px',
gridRowGap: '5px',
gridTemplateColumns: '1fr 1fr 1fr',
gridTemplateRows: '64px',
padding: '1rem',
paddingTop: 0,
justifyContent: 'center',
alignContent: 'center',
}}
>
<ThemeExampleApp selectedTheme={selectedTheme} />
<ThemeExampleApp selectedTheme={selectedTheme} />
<ThemeExampleApp selectedTheme={selectedTheme} />
</Stack>
</Stack>
<Stack gap={0} w={'100%'}>
<Text
pl={'1.5rem'}
style={{
textDecoration: 'underline',
fontSize: '1.25rem',
fontWeight: 200,
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
color: selectedTheme?.primaryColor,
}}
>
Bookmarks
</Text>
<Stack
style={{
width: '100%',
marginBottom: 0,
display: 'block',
lineHeight: '1.5rem',
padding: '1rem',
paddingTop: 0,
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
gridColumnGap: '20px',
gridRowGap: '0px',
gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
gridTemplateRows: 'auto',
}}
>
<Text
style={{
fontSize: '.875rem',
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme.accentColor,
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
}}
>
Example Category
</Text>
<Text
<Stack
style={{
width: '100%',
marginBottom: 0,
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme.primaryColor,
lineHeight: '1.5rem',
padding: '1rem',
paddingTop: 0,
}}
component='a'
>
{'Bookmark 1'}
</Text>
<Text
<Text
style={{
fontSize: '.875rem',
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme?.accentColor,
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
}}
>
Example Category
</Text>
<Text
style={{
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme?.primaryColor,
}}
component='a'
>
{'Bookmark 1'}
</Text>
<Text
style={{
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme?.primaryColor,
}}
component='a'
>
{'Bookmark 2'}
</Text>
</Stack>
<Stack
style={{
width: '100%',
marginBottom: 0,
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme.primaryColor,
lineHeight: '1.5rem',
padding: '1rem',
paddingTop: 0,
}}
component='a'
>
{'Bookmark 2'}
</Text>
<Text
style={{
fontSize: '.875rem',
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme?.accentColor,
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
}}
>
Example Category
</Text>
<Text
style={{
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme?.primaryColor,
}}
component='a'
>
{'Bookmark 1'}
</Text>
<Text
style={{
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme?.primaryColor,
}}
component='a'
>
{'Bookmark 2'}
</Text>
</Stack>
</Stack>
</Stack>
</Stack>

6
src/pages/settings/components/Theming/Themes.tsx
View File

@@ -34,8 +34,6 @@ function ThemesSettings() {
backgroundModalOpened,
{ open: openBackgroundModal, close: closeBackgroundModal },
] = useDisclosure(false);
const [colorId, setColorId] = useState<string>('');
const [colorValue, setColorValue] = useState('#000000');
const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
const [inUseBackgrounds, setInUseBackgrounds] = useState<string[]>([]);
const [selectedTheme, setSelectedTheme] = useState<Theme>({
@@ -144,13 +142,9 @@ function ThemesSettings() {
handleClose={handleClose}
selectedTheme={selectedTheme}
setSelectedTheme={setSelectedTheme}
setColorId={setColorId}
colorId={colorId}
setColorValue={setColorValue}
openPicker={openPicker}
backgroundList={backgroundList}
pickerOpen={pickerOpen}
colorValue={colorValue}
closePicker={closePicker}
handleSaveTheme={handleSaveTheme}
/>