Add Light Theme for Improved Accessibility

[sermelipharo]

The current version of the website lacks a light theme, which significantly impacts accessibility for users with visual impairments, such as astigmatism. Reading light text on a dark background (reverse contrast) can cause discomfort, eye strain, and difficulty focusing, making the website completely unusable without external tools or extensions.

Problem

• Accessibility issue: Users with astigmatism and similar conditions struggle with reverse contrast.
• Lack of choice: The absence of a light theme removes the ability for users to customize their experience to suit their needs.
• Inclusivity: Accessibility is a critical aspect of an inclusive web experience, and the lack of a light theme excludes a portion of the audience.

Suggested Solution

• Implement a light theme option that allows users to switch from dark mode to light mode.
• Add a theme toggle in the UI or use system preferences (e.g., prefers-color-scheme) to detect the user's preference.

Benefits

• Improved accessibility for users with visual impairments.
• Enhanced user experience by providing customization options.
• Compliance with accessibility guidelines and best practices.

Without this change, the website is completely inaccessible to me and likely many others in similar situations. I am forced to rely on third-party tools to make the content readable, which is far from ideal. Please consider addressing this issue to ensure the site is usable for all visitors. Thank you! 🙏

[mitchellh]

I'm not trying to be crass about this at all and this is a genuine question (not rhetorical), but isn't this what this accessibility option in macOS (and others) was made for? https://support.apple.com/guide/mac-help/change-display-colors-easier-onscreen-mchl11ddd4b3/mac You can also bind it to a keybinding. I use this quite frequently...

In addition to that, browsers have supported user mode stylesheets for some time. I haven't used these in recent years but I also thought this was one of the expressed design goals of this as well.

This is mostly in response to this comment:

Without this change, the website is completely inaccessible to me and likely many others in similar situations.

This sounds a bit hyperbolic, since the above options exist. I don't think every website/app/etc in the world needs a separate light/dark theme. It adds additional maintenance burden and complicates future improvements since we have to make sure everything functions in both.

There appear to be multiple options here that are all possible that contradict the website being "completely inaccessible":

1. Invert colors
2. User stylesheets in the browser
3. Read the docs in a text editor (they're all markdown in a single directory with the exact same layout as the website) in docs/. Not a website, but still the same contents.
4. Reference information is available as man pages, html, and markdown in the Ghostty share directory on installation on both macOS and Linux.

I'm not against a light theme in time so don't take this as absolute rejection , but I don't want to increase maintenance burden on what is already a total passion project free time pursuit, so I'm not super interested in prioritizing this right now.

[sersorrel]

Reading the docs on github doesn't seem like a particularly pleasant experience, fwiw:

The text contrast on the website is pretty low (Lc -44.8) which doesn't help things on the accessibility front. Using gray-6 rather than gray-5 for the text would bring it up to Lc -70, which comes closer to recommended values and (for me, on my screen, in current lighting conditions) feels quite a bit easier to read, though I realise that "too much contrast" can also cause difficulties for some people.

I am admittedly impressed at how well the simplest-possible user style works:

* {
    color: black !important;
    background-color: white !important;
}

You do presumably lose useful features like syntax highlighting of config snippets by doing that, however.