css theming
Hey everyone, I been trying to implement a contrast theming palette for my website. What I've managed to do:
1) The site contains light/dark mode toggle button
2) The site contains 4 additional contrast themes. If a user selects a theme, the light/dark mode toggle is turned off.
3) When user visits the site with their own OS contrast mode(Contrast Themes on Windows and Increase Contrast on Mac), the sites contrast themes are hidden, to prevent the user enabling a contrast theme on top of their OS contrast theme.
4) When a user visits from from Mac and they have "Increase Contrast" enabled, I've chosen one of the contrast themes of the site for that request.
It's working well but I am facing an a problem I can't think a solution for. The problem: in number (4) from above, when I select a contrast theme for the Mac user... this becomes a problem for the Windows user. If the Windows user has their own OS contrast theme selected, when they visit the site, they still get the same theme I selected for the Mac user. That is because, on Windows, you can target high contrast themes with
forced-colors: active and for Mac users you can target their "increase contrast" preference with prefers-contrast: more but, it turns that, prefers-contrast: more get's activated even for a Windows User so forced-colors: active == prefers-contrast: more
The theme of the website is being added for the Mac user with JavaScript. This is super long message but I needed to include the details.2 Replies
I honestly only skimmed the message so feel free to call me an idiot, but I'm pretty sure you can read the OS that the user is on with JavaScript. Just check what OS they're on (user-agent I believe it's called) and handle accordingly
@vince thank you for the suggestion, I didn't know we could do that. I thought of another solution that was css only that works for my usecase, but will keep what you said in mind for future reference