Feature: contrast theme changes #361
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 4 commits
February 28, 2024 10:28
The ' ' space that is in the h2 in the template is swallowed up by the material icon. By adding a manual margin of the width of a normal space (1/4th character width). Another solution would be to replace the space with a ` `, but this adds the non-breaking space to the selection of text when highlighting words in the browser, which i did not prefer.
This is done by inspecting the app using chromium-based dev tools. The dev-tools report the contrast ratios to their respective backgrounds. Every ratio – that i've found that was less then 4.5 – was updated using the automatic "next best" color that satisfies the ratio requirements for accessibility. In some cases, i took the creative freedom to match some of the colors to match better in their hue based on hsl color theory. Please compare the screenshots in the associated PR. I tried to match the original style as well as possible. I was only able to meet the contrast requirements by separating accent-text colors for content and header through the introduction of a new header-accent-text color.
A typo in the env var mapping caused that theme.js was not possible to override "footer-neutral-text".
lukengda
changed the title
|
Looks great, thanks! |
Joxit
approved these changes
Mar 11, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi, I worked on a theme that meets the contrast ratio as described in #357, i went over all text colors and their background colors they appear on to check the contrast ratios. I am not sure whether the changes fall into the "purely cosmetic" changes or not. I guess thats up to you to decide.
Though, i also encountered a small bug in theming caused by a typo.
Closes #357
Approach
The changes are done by inspecting the app using chromium-based dev tools. The dev-tools report the contrast ratios to their respective backgrounds. Every ratio – that i've found that was less then 4.5 – was updated using the automatic "next best" color that satisfies the ratio requirements for accessibility by clicking the button marked with the red arrow in the following screenshot:
In some cases, i took the creative freedom to match some of the colors to match better in their hue based on hsl color theory. I tried to match the original style as well as possible. Let me know if i should revert some of the changes.
I was only able to meet the contrast requirements by separating accent-text colors for content and header through the introduction of a new header-accent-text color.
Before-and-after Comparison
current themes on the left, new proposal on the right.
Light theme
Dark theme