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.

Topic		Replies	Views
Marketing Crystal Crystal Contrib	22	1364	April 7, 2021
Crystal 1.12.2 is released! Website	1	202	May 31, 2024
Crystal 1.2.2 has been released! Official release	1	547	December 11, 2021
Crystal 1.15.1 is released! Website	1	137	February 5, 2025
Crystal-Lang-Tools maintenance Community	11	1331	May 29, 2023

Website Relaunch

Related topics