Website Relaunch

straight-shoota · June 3, 2024, 8:41am

I’ve created an issue about this on the website repo:

Accessibility: Mixed color scheme on the homepage

opened 08:39AM - 03 Jun 24 UTC

enhancement

The website suppors both light and dark color schemes, following the user's pref…erence. The choice between dark mode and light mode is not simply one of taste, but also has functional considerations. Some people have trouble reading light text on dark backgrounds, for example. However, the header part of the home page is always a dark scheme. We received a comment about this on the forum from a user asking to have the light mode actually be light all the time: https://forum.crystal-lang.org/t/website-relaunch/6719/18 What we're currently doing is basically ignore the user setting for the color scheme and always use a dark scheme for the homepage header. On smaller viewports the header can cover the entire screen, which even more accentuates the problem because then there's literally no difference between light mode and dark mode. In these secreenshots for example, only a small part on the bottom shows the main content area which follows the intended color scheme. With a little less vertical viewport size, this would be gone. Light: ![grafik](https://github.com/crystal-lang/crystal-website/assets/466378/419ae17d-6c5d-46e6-b80f-8390175f76de) Dark: ![grafik](https://github.com/crystal-lang/crystal-website/assets/466378/a9938f0c-2787-4e62-9809-4bbf435ff00d) While I do think this stark contrast has asthetic value, we should not set that above the basic needs for being able to read the content. A solution to this would be to have the header follow the color scheme of the rest of the page. This example just uses `filter: invert();` which doesn't get everything right but is good enough to show how it would look. An actual implementation would be more sophisticated, of course. I don't think this would be too bad. ![9f5b078f5c4151aa487f80a7980a97220de7b0c9](https://github.com/crystal-lang/crystal-website/assets/466378/26f4e82f-9167-4b79-82f9-b216be4a1d6e) There is probably no browser configuration that we could use to determine whether the user prefers uniform color scheme. So if we want to change this we can only do it for everyone or as a custom user setting.