Skip to content

fix(client): set --accent-rgb with --accent, and use the variables index.css defines #180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jherforth merged 1 commit into from
Sep 17, 2026
Merged

fix(client): set --accent-rgb with --accent, and use the variables index.css defines #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions client/src/app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import useIsMobile from './hooks/useIsMobile.js';
import useScreenActivity from './hooks/useScreenActivity.js';
import {
readLocalInterfaceColors,
applyInterfaceColors,
readLocalScreensaverSettings,
readLocalAutoDarkModeSettings,
readLocalVacationModeSettings,
Expand Down Expand Up @@ -592,9 +593,7 @@ const App = () => {
}, [resolveAutoTheme, applyTheme]);

useEffect(() => {
document.documentElement.style.setProperty('--primary', interfaceColors.primary);
document.documentElement.style.setProperty('--secondary', interfaceColors.secondary);
document.documentElement.style.setProperty('--accent', interfaceColors.accent);
applyInterfaceColors(document.documentElement, interfaceColors);
}, [interfaceColors]);

useEffect(() => {
Expand Down Expand Up @@ -1158,7 +1157,7 @@ const App = () => {
borderRadius: '16px',
backgroundColor: 'var(--card-bg)',
border: '1px solid var(--card-border)',
color: 'var(--text-color)',
color: 'var(--text)',
fontSize: '0.8rem',
fontWeight: 600,
boxShadow: 'var(--shadow)',
Expand Down
11 changes: 5 additions & 6 deletions client/src/components/AdminPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ import {
readLocalScreensaverSettings,
readLocalAutoDarkModeSettings,
readLocalVacationModeSettings,
applyInterfaceColors,
} from '../utils/interfaceSettings.js';
import { CONTROL_LIMITS_DEFAULT_KEY } from '../utils/displayControls.js';
import { useTranslation } from 'react-i18next';
Expand Down Expand Up @@ -1335,9 +1336,7 @@ const AdminPanel = ({ setWidgetSettings, onPluginsChanged, onTabsChanged, onRequ
const root = document.documentElement;
const isLight = root.getAttribute('data-theme') === 'light';

root.style.setProperty('--primary', interfaceColors.primary);
root.style.setProperty('--secondary', interfaceColors.secondary);
root.style.setProperty('--accent', interfaceColors.accent);
applyInterfaceColors(root, interfaceColors);

if (isLight) {
root.style.setProperty('--background', interfaceColors.primary);
Expand Down Expand Up @@ -2246,7 +2245,7 @@ const AdminPanel = ({ setWidgetSettings, onPluginsChanged, onTabsChanged, onRequ
);
})}

<Box sx={{ mb: 3, p: 2, border: '2px solid var(--accent)', borderRadius: 1, backgroundColor: 'rgba(158, 127, 255, 0.05)' }}>
<Box sx={{ mb: 3, p: 2, border: '2px solid var(--accent)', borderRadius: 1, backgroundColor: 'rgba(var(--accent-rgb), 0.05)' }}>
<Typography variant="subtitle1" sx={{ mb: 2, fontWeight: 'bold' }}>
{t('admin:widgets.weatherWidget')}
</Typography>
Expand Down Expand Up @@ -2482,7 +2481,7 @@ const AdminPanel = ({ setWidgetSettings, onPluginsChanged, onTabsChanged, onRequ
a made-up line. */}
<Typography
variant="body2"
sx={{ mt: 0.5, color: plugin.manifest?.description ? 'var(--text-color)' : 'text.secondary',
sx={{ mt: 0.5, color: plugin.manifest?.description ? 'var(--text)' : 'text.secondary',
fontStyle: plugin.manifest?.description ? 'normal' : 'italic' }}
>
{plugin.manifest?.description || t('admin:plugins.noDescription')}
Expand Down Expand Up @@ -3896,7 +3895,7 @@ const AdminPanel = ({ setWidgetSettings, onPluginsChanged, onTabsChanged, onRequ
{t('admin:security.help')}
</Alert>

<Box sx={{ p: 3, border: '2px solid var(--accent)', borderRadius: 2, backgroundColor: 'rgba(158, 127, 255, 0.05)' }}>
<Box sx={{ p: 3, border: '2px solid var(--accent)', borderRadius: 2, backgroundColor: 'rgba(var(--accent-rgb), 0.05)' }}>
<Typography variant="subtitle1" sx={{ mb: 2, fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: 1 }}>
<Lock />
{t('admin:security.pinProtection')}
Expand Down
16 changes: 8 additions & 8 deletions client/src/components/CalendarWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1303,7 +1303,7 @@ const CalendarWidget = ({
<IconButton
onClick={handlePreviousPeriod}
size="small"
sx={{ color: 'var(--text-color)' }}
sx={{ color: 'var(--text)' }}
aria-label={t('calendar:widget.previousPeriod')}
>
<ChevronLeft />
Expand All @@ -1319,7 +1319,7 @@ const CalendarWidget = ({
borderRadius: 1,
px: 1,
py: 0.5,
color: 'var(--text-color)',
color: 'var(--text)',
'&:hover': {
backgroundColor: 'rgba(var(--accent-rgb), 0.08)',
},
Expand All @@ -1333,7 +1333,7 @@ const CalendarWidget = ({
<IconButton
onClick={handleNextPeriod}
size="small"
sx={{ color: 'var(--text-color)' }}
sx={{ color: 'var(--text)' }}
aria-label={t('calendar:widget.nextPeriod')}
>
<ChevronRight />
Expand All @@ -1345,7 +1345,7 @@ const CalendarWidget = ({
<IconButton
onClick={goToToday}
size="small"
sx={{ display: { xs: 'none', sm: 'inline-flex' }, color: 'var(--text-color)' }}
sx={{ display: { xs: 'none', sm: 'inline-flex' }, color: 'var(--text)' }}
aria-label={t('calendar:widget.goToToday')}
>
<Today />
Expand All @@ -1359,8 +1359,8 @@ const CalendarWidget = ({
onChange={handleViewModeChange}
size="small"
sx={{
'& .MuiToggleButton-root': { color: 'var(--text-color)', borderColor: 'var(--card-border)' },
'& .MuiToggleButton-root.Mui-selected': { color: 'var(--text-color)', backgroundColor: 'rgba(var(--accent-rgb), 0.15)' },
'& .MuiToggleButton-root': { color: 'var(--text)', borderColor: 'var(--card-border)' },
'& .MuiToggleButton-root.Mui-selected': { color: 'var(--text)', backgroundColor: 'rgba(var(--accent-rgb), 0.15)' },
}}
>
<ToggleButton value="month" aria-label={t('calendar:widget.monthView')}>
Expand All @@ -1373,7 +1373,7 @@ const CalendarWidget = ({
<IconButton
onClick={handleSettingsClick}
size="small"
sx={{ color: 'var(--text-color)' }}
sx={{ color: 'var(--text)' }}
>
<Settings />
</IconButton>
Expand Down Expand Up @@ -1671,7 +1671,7 @@ const CalendarWidget = ({
<Typography variant="h6" sx={{ fontWeight: 'bold', color: day.isToday ? 'var(--accent)' : 'inherit' }}>
{day.dayNumber}
</Typography>
<Typography variant="caption" sx={{ color: 'var(--text-color)', opacity: 0.6 }}>
<Typography variant="caption" sx={{ color: 'var(--text)', opacity: 0.6 }}>
{day.monthName}
</Typography>
</Box>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/ChoreIconPicker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const ChoreIconPicker = ({ value, onChange }) => {
sx={{
...cellSx(!value),
fontSize: '0.7rem',
color: 'var(--text-color)',
color: 'var(--text)',
opacity: 0.8,
}}
{...cellProps(!value, t('chores:icons.none'), () => onChange(''))}
Expand Down
6 changes: 3 additions & 3 deletions client/src/components/ChoreWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1195,7 +1195,7 @@ const ChoreWidget = ({ refreshNonce = 0, hiddenControls = [] }) => {
size="small"
aria-label={t('chores:visibility.openSettings')}
title={t('chores:visibility.openSettings')}
sx={{ color: 'var(--text-color)' }}
sx={{ color: 'var(--text)' }}
>
<SettingsIcon fontSize="small" />
</IconButton>
Expand Down Expand Up @@ -1280,7 +1280,7 @@ const ChoreWidget = ({ refreshNonce = 0, hiddenControls = [] }) => {

<Box sx={{ flex: 1, overflowY: 'auto', minHeight: 0, width: '100%' }}>
{userChores.length === 0 ? (
<Typography variant="body2" sx={{ textAlign: 'center', py: 1, color: 'var(--text-color)', opacity: 0.6 }}>
<Typography variant="body2" sx={{ textAlign: 'center', py: 1, color: 'var(--text)', opacity: 0.6 }}>
{t('chores:widget.noChoresToday')}
</Typography>
) : (
Expand Down Expand Up @@ -1562,7 +1562,7 @@ const ChoreWidget = ({ refreshNonce = 0, hiddenControls = [] }) => {
textAlign: 'center',
fontWeight: 'bold',
my: 1,
color: overspent ? 'error.main' : (parsed > 0 ? 'var(--accent)' : 'var(--text-muted)'),
color: overspent ? 'error.main' : (parsed > 0 ? 'var(--accent)' : 'var(--text-secondary)'),
transition: 'color 0.2s ease',
}}
>
Expand Down
12 changes: 6 additions & 6 deletions client/src/components/ClamValueModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const ClamValueModal = ({ open, onClose, onSave, user, isSaving = false }) => {
sx={{
display: 'block',
textAlign: 'center',
color: 'var(--text-muted)',
color: 'var(--text-secondary)',
mb: 1,
fontSize: '0.85rem',
}}
Expand All @@ -130,7 +130,7 @@ const ClamValueModal = ({ open, onClose, onSave, user, isSaving = false }) => {
fontSize: '2.5rem',
lineHeight: 1.2,
mb: 2,
color: 'var(--text-color)',
color: 'var(--text)',
}}
>
{value === '' ? '0' : value} 🥟
Expand Down Expand Up @@ -169,7 +169,7 @@ const ClamValueModal = ({ open, onClose, onSave, user, isSaving = false }) => {
color: 'var(--accent)',
'&:hover': {
borderColor: 'var(--accent)',
backgroundColor: 'rgba(158, 127, 255, 0.1)',
backgroundColor: 'rgba(var(--accent-rgb), 0.1)',
},
}}
>
Expand All @@ -194,7 +194,7 @@ const ClamValueModal = ({ open, onClose, onSave, user, isSaving = false }) => {
border: '2px solid var(--accent)',
color: 'var(--accent)',
'&:hover': {
backgroundColor: 'rgba(158, 127, 255, 0.1)',
backgroundColor: 'rgba(var(--accent-rgb), 0.1)',
},
}}
>
Expand All @@ -213,10 +213,10 @@ const ClamValueModal = ({ open, onClose, onSave, user, isSaving = false }) => {
disabled={isSaving}
sx={{
borderColor: 'var(--card-border)',
color: 'var(--text-color)',
color: 'var(--text)',
'&:hover': {
borderColor: 'var(--accent)',
backgroundColor: 'rgba(158, 127, 255, 0.05)',
backgroundColor: 'rgba(var(--accent-rgb), 0.05)',
},
}}
>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/ColorPickerPopover.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const ColorPickerInner = ({ hex, hsv, hsl, onChange }) => {
fontFamily: 'monospace',
outline: 'none',
background: 'var(--card-bg, #fff)',
color: 'var(--text-primary, #000)',
color: 'var(--text)',
},
label: { display: 'none' },
}}
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/CountdownCircle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ const CountdownCircle = ({ refreshInterval, onRefresh, isActive = true }) => {
strokeLinecap="round"
style={{
transition: 'stroke-dashoffset 0.1s linear',
filter: 'drop-shadow(0 0 4px rgba(158, 127, 255, 0.5))',
filter: 'drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.5))',
}}
/>
</svg>
Expand Down
10 changes: 5 additions & 5 deletions client/src/components/DraggableWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,17 +134,17 @@ const DraggableWidget = ({
borderRadius: 2,
transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
boxShadow: isSelected
? '0 8px 32px rgba(158, 127, 255, 0.3)'
? '0 8px 32px rgba(var(--accent-rgb), 0.3)'
: '0 2px 8px rgba(0, 0, 0, 0.1)',
backgroundColor: 'var(--card-bg)',
overflow: 'hidden',
cursor: isSelected ? 'move' : 'pointer',
'&:hover': {
border: isSelected
? '3px solid var(--accent)'
: '3px solid rgba(158, 127, 255, 0.3)',
: '3px solid rgba(var(--accent-rgb), 0.3)',
boxShadow: isSelected
? '0 8px 32px rgba(158, 127, 255, 0.3)'
? '0 8px 32px rgba(var(--accent-rgb), 0.3)'
: '0 4px 16px rgba(0, 0, 0, 0.15)',
}
}}
Expand All @@ -159,8 +159,8 @@ const DraggableWidget = ({
right: 0,
bottom: 0,
backgroundImage: `
linear-gradient(to right, rgba(158, 127, 255, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(158, 127, 255, 0.1) 1px, transparent 1px)
linear-gradient(to right, rgba(var(--accent-rgb), 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(var(--accent-rgb), 0.1) 1px, transparent 1px)
`,
backgroundSize: `${containerWidth / gridCols}px ${rowHeight}px`,
pointerEvents: 'none',
Expand Down
8 changes: 4 additions & 4 deletions client/src/components/PhotoWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,13 +424,13 @@ const PhotoWidget = ({ refreshNonce = 0, isActive = true }) => {
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Typography variant="h6">📷 Photos</Typography>
<Box sx={{ display: 'flex', gap: 1 }}>
<IconButton onClick={handleTogglePlayback} size="small" sx={{ color: 'var(--text-color)' }}>
<IconButton onClick={handleTogglePlayback} size="small" sx={{ color: 'var(--text)' }}>
{isPlaying ? <Pause /> : <PlayArrow />}
</IconButton>
<IconButton onClick={fetchPhotos} size="small" disabled={loading} sx={{ color: 'var(--text-color)' }}>
<IconButton onClick={fetchPhotos} size="small" disabled={loading} sx={{ color: 'var(--text)' }}>
<Refresh />
</IconButton>
<IconButton onClick={handleSettingsClick} size="small" sx={{ color: 'var(--text-color)' }}>
<IconButton onClick={handleSettingsClick} size="small" sx={{ color: 'var(--text)' }}>
<Settings />
</IconButton>
</Box>
Expand All @@ -446,7 +446,7 @@ const PhotoWidget = ({ refreshNonce = 0, isActive = true }) => {

{!loading && !error && photos.length === 0 && (
<Box sx={{ textAlign: 'center', py: 4 }}>
<Typography sx={{ color: 'var(--text-color)', opacity: 0.6 }}>{t('photos:widget.noPhotos')}</Typography>
<Typography sx={{ color: 'var(--text)', opacity: 0.6 }}>{t('photos:widget.noPhotos')}</Typography>
</Box>
)}

Expand Down
12 changes: 6 additions & 6 deletions client/src/components/PinModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ const PinModal = ({ open, onClose, onVerify, mode = 'verify', title, allowRememb
sx={{
display: 'block',
textAlign: 'center',
color: 'var(--text-muted)',
color: 'var(--text-secondary)',
mb: 2,
fontSize: '0.85rem'
}}
Expand All @@ -257,7 +257,7 @@ const PinModal = ({ open, onClose, onVerify, mode = 'verify', title, allowRememb
{remember && (
<Typography
variant="caption"
sx={{ display: 'block', color: 'var(--text-muted)', pl: 4, mt: -0.5 }}
sx={{ display: 'block', color: 'var(--text-secondary)', pl: 4, mt: -0.5 }}
>
This device will stop asking. You can always require the PIN
again from Admin &rarr; Security.
Expand Down Expand Up @@ -309,7 +309,7 @@ const PinModal = ({ open, onClose, onVerify, mode = 'verify', title, allowRememb
color: 'var(--accent)',
'&:hover': {
borderColor: 'var(--accent)',
backgroundColor: 'rgba(158, 127, 255, 0.1)'
backgroundColor: 'rgba(var(--accent-rgb), 0.1)'
}
}}
>
Expand Down Expand Up @@ -344,7 +344,7 @@ const PinModal = ({ open, onClose, onVerify, mode = 'verify', title, allowRememb
border: '2px solid var(--accent)',
color: 'var(--accent)',
'&:hover': {
backgroundColor: 'rgba(158, 127, 255, 0.1)'
backgroundColor: 'rgba(var(--accent-rgb), 0.1)'
}
}}
>
Expand All @@ -361,10 +361,10 @@ const PinModal = ({ open, onClose, onVerify, mode = 'verify', title, allowRememb
sx={{
py: 1.5,
borderColor: 'var(--card-border)',
color: 'var(--text-color)',
color: 'var(--text)',
'&:hover': {
borderColor: 'var(--accent)',
backgroundColor: 'rgba(158, 127, 255, 0.05)'
backgroundColor: 'rgba(var(--accent-rgb), 0.05)'
}
}}
>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/PrizeCelebration.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const PrizeCelebration = ({ username, prizeName, onDismiss }) => {
<Box
sx={{
backgroundColor: 'var(--card-bg)',
color: 'var(--text-color)',
color: 'var(--text)',
border: '1px solid var(--card-border)',
borderRadius: 3,
boxShadow: 'var(--shadow)',
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/TabIconModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ const TabIconModal = ({
border: isSelected ? '2px solid var(--accent)' : '2px solid transparent',
transition: 'all 0.2s ease',
'&:hover': {
backgroundColor: isSelected ? 'var(--accent)' : 'rgba(158, 127, 255, 0.1)',
backgroundColor: isSelected ? 'var(--accent)' : 'rgba(var(--accent-rgb), 0.1)',
transform: 'scale(1.05)',
},
}}
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/VacationScreensaver.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ const VacationScreensaver = ({ onExit, keepScreenAwake }) => {
transform: 'translate(-50%, -50%)',
fontSize: '1.4rem',
fontWeight: 600,
color: 'var(--text-color)',
color: 'var(--text)',
opacity: 0.35,
pointerEvents: 'none',
userSelect: 'none',
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/WeatherWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1126,7 +1126,7 @@ const WeatherWidget = ({
top: 8,
right: 8,
zIndex: 10,
color: 'var(--text-color)',
color: 'var(--text)',
}}
>
<Settings />
Expand Down
Loading