ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: invert macOS and PlayStation icons in dark mode

Browse Source 
Both logos are dark/black and disappear against dark backgrounds.
Apply dark:invert CSS filter to flip them to white in dark mode.
This commit is contained in:
Usman Baig
2026-03-19 13:19:08 +01:00
parent 7cbfbc54ca
commit bf3097c26e
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/utils/icons.tsx
View File

@@ -58,6 +58,8 @@ export function getBrowserIcon(browserName: string) {
return <img src={src} alt={browserName} width={18} height={18} className="inline-block" style={{ verticalAlign: '-0.125em' }} />
}
const OS_DARK_INVERT = new Set(['macos', 'playstation'])
const OS_ICON_MAP: Record<string, string> = {
'windows': 'windows',
'macos': 'macos',
@@ -81,7 +83,8 @@ export function getOSIcon(osName: string) {
if (!osName) return <Question className="text-neutral-400" />
const file = OS_ICON_MAP[osName.toLowerCase()]
if (!file) return <Question className="text-neutral-400" />
return <img src={`/icons/os/${file}.png`} alt={osName} width={18} height={18} className="inline-block" style={{ verticalAlign: '-0.125em' }} />
const cls = OS_DARK_INVERT.has(file) ? 'inline-block dark:invert' : 'inline-block'
return <img src={`/icons/os/${file}.png`} alt={osName} width={18} height={18} className={cls} style={{ verticalAlign: '-0.125em' }} />
}
export function getDeviceIcon(deviceName: string) {