Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correctly invert text on "Is OCaml Web" page #2191

Merged
merged 1 commit into from Mar 17, 2024

Conversation

SquidDev
Copy link
Contributor

The "Is OCaml Xyz Yet?" pages (currently only Is OCaml Web Yet?) are not correctly styled in dark mode, leading to hard to read text.

A screenshot of 'Is OCaml Web Yet?' The page background is in black (dark mode being enabled), but the body still uses the light-mode theme (also being dark), making it unreadable.

This commit adds the missing tag dark:prose-invert class to the page - a rudimentary search shows that this is the only page missing it. In order for the heading and tagline to also be styled, I've moved them inside the prose tag (following tutorial.eml, which is used for most pages in the "Guides" section).

This does slightly change the layout of the page (the header is slightly smaller), but this is more consistent with other pages in this section, so feels like a win. Happy to revert this if preferred though!

A screenshot of 'Is OCaml Web Yet?' with this commit applied. Once again, the page is in dark mode, but now the text is white and thus readable!

 - Add missing dark:prose-invert tag
 - Move header and tagline inside the body. This also removes some
   padding, to make it more consistent with pages.
Copy link
Collaborator

@cuihtlauac cuihtlauac left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @SquidDev, this looks good to me

@cuihtlauac cuihtlauac linked an issue Mar 14, 2024 that may be closed by this pull request
@stuckinforloop
Copy link

The same issue is there on the docs pages as well. For instance, look at the following example:

Dark Mode

Screenshot 2024-03-14 at 17 50 42

Light Mode

Screenshot 2024-03-14 at 17 52 08

@sabine sabine merged commit fde2222 into ocaml:main Mar 17, 2024
3 checks passed
@SquidDev SquidDev deleted the hotfix/dark-mode-is-ocaml-web branch March 19, 2024 12:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dark mode unreadable in some pages
4 participants