Dark Theme Tweaks #1062
Dark Theme Tweaks #1062
Conversation
scss/_variables.scss
Outdated
| @@ -6,10 +6,10 @@ $blue-light: lighten($blue, 20%); | |||
| $blue-active-highlight: lighten($blue, 10%); | |||
|
|
|||
| // Grays | |||
| $gray: #899199; | |||
| $gray: #999999; | |||
There was a problem hiding this comment.
#899199 against a white background wasn't AA-compliant to begin with, so we can't make it even lighter in the Light theme.
I did a quick contrast check the other day, and to meet AA it looks like we won't be able to share the same blue and gray values across both Light/Dark themes.
There was a problem hiding this comment.
Yeah! I've updated it to #808080, which is AA-compliant for the white theme. The same color in the dark theme should now adjust it to be a bit lighter where it is used to #999999 (#808080 isn't AA-compliant against the #1E1E1E bg)
I also snuck in a fix for the markdown preview with inline code syntax, it was changing the font size and looked a bit odd.
There was a problem hiding this comment.
Dark theme — The grays used for .dialog-tabs-button and .settings-group p text need to be lightened. (Currently at contrast ratio 2.95)
Light theme — I'm not sure where you got #808080 as AA-compliant for normal text against #FFF, since it is at contrast ratio 3.95. But I'm ok with this value for this PR, since it isn't worse than the current state and we need to make other tweaks to the Light theme colors anyway 👍
There was a problem hiding this comment.
Oh, I must be mistaken about it being compliant. But it is what Apple uses for secondary text:
There was a problem hiding this comment.
Interesting! It guess it's ok for Cocoa apps because macOS has an "Increase contrast" option in Accessibility settings...?
Adding a font size fix for `inline code` in markdown.
|
@mirka any more thoughts on this? |
I think we can merge once this is addressed ☝️ |
OK I've added some fixes for those in ea7d690
|
Co-Authored-By: roundhill <dan@automattic.com>
|
I finally upgraded to a version that includes this change—is it just me, or is this a bit...too contrastical? 🧐 I'm very much a 👍 for meeting AA ratios for folks that need it (as I probably will in a few years!), but I've had to switch back to light mode while I wait for other apps to add dark modes so I can drop my display brightness overall to compensate for how searing the white now is on this black. Any chance for getting a third theme option added? I'd be happy to work on a PR for it! |
I'd like to propose we change the dark them to match up with the recent changes we've made to the iOS and macOS apps. It essentially desaturates the 'blueness' of the dark theme, and increases the contrast by making the text a bit lighter and the background color darker. The border color is also way more subtle than before.
Before:
After:
To Test
$gray*variables which were slightly tweaked in this PR)