saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-22 04:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

add tool text and icon color theme

Browse Source
This commit is contained in:
EthanHealy01 2025-08-07 13:45:43 +01:00
parent 3ba7246b96
commit 471ec06be1
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/tools/ToolPicker.tsx
View File

@ -119,12 +119,24 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
onClick={() => onSelect(id)} onClick={() => onSelect(id)}
size="md" size="md"
radius="md" radius="md"
leftSection={tool.icon} leftSection={
<div style={{ color: 'var(--tools-text-and-icon-color)' }}>
{tool.icon}
</div>
}
fullWidth fullWidth
justify="flex-start" justify="flex-start"
style={{ borderRadius: '0' }} style={{
borderRadius: '0',
color: 'var(--tools-text-and-icon-color)'
}}
> >
<span style={{ marginRight: '8px', opacity: 0.6, fontSize: '0.8em' }}> <span style={{
marginRight: '8px',
opacity: 0.6,
fontSize: '0.8em',
color: 'var(--tools-text-and-icon-color)'
}}>
{index + 1}. {index + 1}.
</span> </span>
{tool.name} {tool.name}
@ -147,7 +159,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
onChange={(e) => setSearch(e.currentTarget.value)} onChange={(e) => setSearch(e.currentTarget.value)}
autoComplete="off" autoComplete="off"
className="search-input rounded-lg" className="search-input rounded-lg"
leftSection={<SearchIcon sx={{ fontSize: 16, color: 'var(--search-text)' }} />} leftSection={<SearchIcon sx={{ fontSize: 16, color: 'var(--tools-text-and-icon-color)' }} />}
/> />
<Box <Box
className="tool-picker-scrollable" className="tool-picker-scrollable"
@ -176,7 +188,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
transition: 'transform 0.2s ease', transition: 'transform 0.2s ease',
transform: expandedCategories.has(category) ? 'rotate(90deg)' : 'rotate(0deg)' transform: expandedCategories.has(category) ? 'rotate(90deg)' : 'rotate(0deg)'
}}> }}>
<ChevronRightIcon sx={{ fontSize: 16, color: 'var(--text-primary)' }} /> <ChevronRightIcon sx={{ fontSize: 16, color: 'var(--tools-text-and-icon-color)' }} />
</div> </div>
} }
fullWidth fullWidth
@ -189,7 +201,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
borderBottom: '1px solid var(--border-default)', borderBottom: '1px solid var(--border-default)',
borderRadius: '0', borderRadius: '0',
padding: '0.75rem 1rem', padding: '0.75rem 1rem',
color: 'var(--text-primary)' color: 'var(--tools-text-and-icon-color)'
}} }}
> >
{category.toUpperCase()} {category.toUpperCase()}
@ -213,7 +225,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
paddingBottom: '0.5rem', paddingBottom: '0.5rem',
marginLeft: '1rem', marginLeft: '1rem',
marginRight: '1rem', marginRight: '1rem',
color: 'var(--text-secondary)' color: 'var(--tools-text-and-icon-color)'
}} }}
> >
{subcategory} {subcategory}

5
frontend/src/styles/theme.css
View File

@ -106,6 +106,9 @@
/* Inactive icon colors for light mode */ /* Inactive icon colors for light mode */
--icon-inactive-bg: #9CA3AF; --icon-inactive-bg: #9CA3AF;
--icon-inactive-color: #FFFFFF; --icon-inactive-color: #FFFFFF;
/* New theme colors for text and icons */
--tools-text-and-icon-color: #374151;
} }
[data-mantine-color-scheme="dark"] { [data-mantine-color-scheme="dark"] {
@ -183,6 +186,8 @@
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);
--tools-text-and-icon-color: #D0D6DC;
} }
/* Smooth transitions for theme switching */ /* Smooth transitions for theme switching */