saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-11 06:55:39 +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)}
size="md"
radius="md"
leftSection={tool.icon}
leftSection={
<div style={{ color: 'var(--tools-text-and-icon-color)' }}>
{tool.icon}
</div>
}
fullWidth
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}.
</span>
{tool.name}
@ -147,7 +159,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
onChange={(e) => setSearch(e.currentTarget.value)}
autoComplete="off"
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
className="tool-picker-scrollable"
@ -176,7 +188,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
transition: 'transform 0.2s ease',
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>
}
fullWidth
@ -189,7 +201,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
borderBottom: '1px solid var(--border-default)',
borderRadius: '0',
padding: '0.75rem 1rem',
color: 'var(--text-primary)'
color: 'var(--tools-text-and-icon-color)'
}}
>
{category.toUpperCase()}
@ -213,7 +225,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
paddingBottom: '0.5rem',
marginLeft: '1rem',
marginRight: '1rem',
color: 'var(--text-secondary)'
color: 'var(--tools-text-and-icon-color)'
}}
>
{subcategory}

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

@ -106,6 +106,9 @@
/* Inactive icon colors for light mode */
--icon-inactive-bg: #9CA3AF;
--icon-inactive-color: #FFFFFF;
/* New theme colors for text and icons */
--tools-text-and-icon-color: #374151;
}
[data-mantine-color-scheme="dark"] {
@ -183,6 +186,8 @@
--shadow-md: 0 4px 6px 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);
--tools-text-and-icon-color: #D0D6DC;
}
/* Smooth transitions for theme switching */