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
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.
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: activeprefers-contrast: moreprefers-contrast: moreforced-colors: active == prefers-contrast: moreThe 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.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
