Further improvements to Dark mode - #3806
Conversation
|
Added another fix for the background of parsed backticks text. BTW, I found that commit lists in PR conversations is no longer parsed correctly: diff --git a/source/features/parse-backticks.tsx b/source/features/parse-backticks.tsx
index 4ee24d39..dbdf32ae 100644
--- a/source/features/parse-backticks.tsx
+++ b/source/features/parse-backticks.tsx
@@ -13,7 +13,7 @@ function init(): void {
'.js-commits-list-item .mb-1, .js-commits-list-item pre', // `isCommitList` commit message and description
'.Details[data-issue-and-pr-hovercards-enabled] .d-none a.link-gray-dark', // `isRepoRoot` commit message
'.commit-title, .commit-desc', // `isCommit` commit message and description
- '.commit-message', // `isPRConversation`, `isCompare`, `isReleasesOrTags` pushed commits
+ '.commit-message, .js-commit', // `isPRConversation`, `isCompare`, `isReleasesOrTags` pushed commits
'.blame-commit-message', // `isBlame` commit message
'a[id^="issue_"]', // `isConversationList` issue and PR title
'.TimelineItem-body > del, .TimelineItem-body > ins', // `isIssue`, `isPRConversation` title editsIf I'm correct in my assessment, which I'm not sure, this is more an effect of the new GitHub UI version push and not an issue with dark mode, since light mode has the same markup. Should I push it here as well or make another commit? |
|
Separate PR |
|
@mcornella Yeah this is what I mentioned in #3798 (comment):
If you don't mind, I can open a separate PR to validate all selectors 😃 |
|
@kidonng sorry, I had the branch ready yesterday. I pushed #3812, with an added fix for correctness (commit number 2). EDIT: you could still make a PR checking the rest of the selectors, I'm not familiar with them enough to know where in the GitHub UI they apply. You can even cherry-pick my commits and put them all into a single PR if you want. |
|
Can you react with 🚀 on each comment that this PR fixes in the main issue? So I mark them as resolved once I merge it |
|
Done! |
|
Thanks! Are there any other hardcoded colors in the extension or should I merge this? |
Maybe #3772 could be also fixed in this PR? |
@mcornella I will be busy for a couple of days, so go ahead if you find anything broken. I will comment on your PR if I have the time. |
|
Some features that use
|
|
Going through features that have color changes I stumbled upon |
|
Alright, I've checked the files in FixedChecked and workingPending #3772 and #3806 (comment) this is almost ready. These are the grep results sorted by result, in case anybody's interested: DetailsAnd I used these two commands: |
Can be done in a future lint PR. |
|
After the 2 comments are fixed, let's merge this, together with #3812, and release a new hotfix version. |
|
This is still too bright:
Compared to: This can also be fixed separately if you don't have time, so we can merge this PR earlier. |
All CSS variables have the same value as the current one for light mode.
Which one do you prefer? |
|
4 looks good. In a separate PR (maybe with #3823), I wonder how it would look if we dropped the spacing between each cell, so it looks like an actual table |
We need the first `background-color: initial` to remove the "selected" styling. Then, use `--color-menu-bg-active` for the color when hovering to work with Dark mode.
|
Replying to #3798 (comment):
Using First screenshot is the current color: The other option is to target
Went with
Using
Tried really hard on this one. When user has reacted, the box-shadow should be
After that, I used the color picker to pick the exact color of the background (without transparency), but GitHub changes the background color when the viewport is less than 544px, so when the reactions are zoomed in there is a visible border (notice the black background in the second pic):
I went with this last option because it's not that common that people will be looking at stuff with a 544px viewport, but I'd love some feedback on this. I could add a media query but is it really worth it? Patchdiff --git a/source/features/conflict-marker.css b/source/features/conflict-marker.css
index 537103c2..04906514 100644
--- a/source/features/conflict-marker.css
+++ b/source/features/conflict-marker.css
@@ -2,3 +2,7 @@
vertical-align: middle;
color: #c0c0c0;
}
+
+[data-color-mode='dark'] .rgh-conflict-marker svg {
+ color: #505050;
+}
diff --git a/source/features/emphasize-draft-pr-label.css b/source/features/emphasize-draft-pr-label.css
index 0f561279..8f2cf418 100644
--- a/source/features/emphasize-draft-pr-label.css
+++ b/source/features/emphasize-draft-pr-label.css
@@ -1,7 +1,7 @@
.js-issue-row [aria-label='Open draft pull request'] svg {
- stroke: #586069;
+ stroke: var(--color-text-secondary, #586069);
stroke-width: 1.2px;
- color: #fff !important;
+ color: var(--color-bg-canvas, #fff) !important;
paint-order: stroke;
overflow: visible !important;
}
diff --git a/source/features/highlight-collaborators-and-own-conversations.css b/source/features/highlight-collaborators-and-own-conversations.css
index 86184a93..7bd5215c 100644
--- a/source/features/highlight-collaborators-and-own-conversations.css
+++ b/source/features/highlight-collaborators-and-own-conversations.css
@@ -1,5 +1,5 @@
.rgh-collaborator {
- border: 1px solid #c0d3eb;
+ border: 1px solid var(--color-border-tertiary, #c0d3eb);
border-radius: 2em;
padding: 2px 5px;
}
diff --git a/source/features/reactions-avatars.css b/source/features/reactions-avatars.css
index 9f2d76eb..18049c54 100644
--- a/source/features/reactions-avatars.css
+++ b/source/features/reactions-avatars.css
@@ -17,6 +17,10 @@ button.reaction-summary-item { /* `button` excludes the "Add reaction" icon */
--background: #f2f8fa;
}
+[data-color-mode='dark'] .reaction-summary-item.user-has-reacted {
+ --background: #111d2f;
+}
+
.reaction-summary-item a {
display: inline-block;
width: 2em;
@@ -25,10 +29,14 @@ button.reaction-summary-item { /* `button` excludes the "Add reaction" icon */
margin-left: -0.5em;
vertical-align: middle;
background: #efefef; /* Placeholder before the images load */
- box-shadow: 0 0 0 2px var(--background, #fff);
+ box-shadow: 0 0 0 2px var(--background, var(--color-bg-primary, #fff));
font-size: 10px; /* Base sizer */
}
+[data-color-mode='dark'] .reaction-summary-item a {
+ background: #101010; /* Placeholder before the images load */
+}
+
.reaction-summary-item a:first-of-type {
margin-left: 0.5em;
} |
|
No need to force push because it makes it hard to know what changed |
|
The only commit I modified was 0ea87d7 where I only removed the extra CSS variables and added a comment. I've yet to commit #3806 (comment), let me know what you think about each proposal and I'll make the commits. |
|
Looks good |
- Fix the box-shadow color to match the background. - Use a darker background color in avatars when the image didn't load.
| @@ -25,10 +29,14 @@ button.reaction-summary-item { /* `button` excludes the "Add reaction" icon */ | |||
| margin-left: -0.5em; | |||
| vertical-align: middle; | |||
| background: #efefef; /* Placeholder before the images load */ | |||
There was a problem hiding this comment.
Can you use an existing variable here instead?
There was a problem hiding this comment.
There's no variable in https://primer.style/primitives/ that corresponds with #efefef for light mode. This is using --color-bg-canvas-inset (to not make it pure white on light mode):
User has reacted:
Normal:
fregante
left a comment
There was a problem hiding this comment.
After this it can probably be merged
| } | ||
|
|
||
| [data-color-mode='dark'] .rgh-conflict-marker svg { | ||
| color: #505050; |
There was a problem hiding this comment.
This could use a variable too, the color doesn't need to be exactly what it was. If it's near enough as long as it looks good
| stroke: var(--color-text-secondary, #586069); | ||
| stroke-width: 1.2px; | ||
| color: #fff !important; | ||
| color: var(--color-bg-canvas, #fff) !important; |
There was a problem hiding this comment.
I think this is more appropriate, without using important, I don't know if it works
| color: var(--color-bg-canvas, #fff) !important; | |
| fill: var(--color-bg-canvas, #fff); |
|
Sorry, I saw the last comments just now. Thanks for merging! |
|
Yeah I don’t like ever-increasing long-living PRs, especially for bug fixes, it’s best to limit the scope and merge often. The remaining comments and further improvements can be done in a new PR |
|
It looks like the color doesn't work for your own reactions. See here:
|
|
I specifically targeted this in https://github.com/sindresorhus/refined-github/pull/3806/files#diff-da8c7be7c768eb7bc8b49010c3f06209916a1d2282d2069d10646b13731582fdR20, has something changed? EDIT: still works for me: |
|
the background of the emoji too is white for me because .reaction-summary-item img {
background-color: var(--background)
}
apparently, the specifically dark mode targeted fix has not worked for me either. |
|
Can you post a screenshot of the Styles panel of the element in devtools? Also, is |
Ah, damn, that was the issue for me - my Personally, I do not want to set dark mode explicitly. I would rather let my global setting be honored wherever possible. So I guess I will have to live with this 🤦♂️ |
|
can we maybe change the CSS rule to use |
|
That's right I hadn't thought about this case. All the CSS selectors that use @media (prefers-color-scheme: dark) {
[data-color-mode=auto] {There are not many that use this, you can quickly see them in the Files tab of this PR. Unfortunately I don't have time for this, but it should be a quick fix for anyone trying. |
for `prefers-color-scheme: dark` @media query and `[data-color-mode: auto]` reference : refined-github#3806 (comment)
for `prefers-color-scheme: dark` @media query and `[data-color-mode: auto]` reference : refined-github#3806 (comment)
I believe this PR fixes all Dark mode issues, so close issue #3798 once this is merged if you agree.
LINKED ISSUES:
Fix border issues in Support for Github Darkmode #3798:
TEST URLS:
SCREENSHOTS:
Since this PR uses the
--github-border-colorCSS variable already present in the codebase, this automatically fixes other border colors that use this variable. This includes table-input cell borders in comments:This is a better approach than making
--github-border-colora fallback like I did in the previous PR since it requires less changes.More fixes
Feature:
parse-backticks. Use the--color-markdown-code-bgCSS variable to color the background in backticks parsed by theparse-backticksfeature. To find the appropriate CSS variable I inspected the CSS of code elements in Markdown content (you can do it yourself with this very comment). First reported here.Feature:
split-issue-pr-search-results. In a GitHub search, remove the background color in split Issues and PRs, then fix the color when hovering by using the--color-menu-bg-activeCSS variable. I had to use.menu-itemto add specificity to the selector, otherwise it could be done with!important.Feature:
resolve-conflicts. When resolving a conflict, the first line number background uses the light color. We use--color-auto-yellow-1instead which is the coloring used by GitHub, and since--github-faint-yellowisn't used in any other place of the codebase, I removed it from:rootand replaced its value.Feature: many. Some features that use
--github-greenand--github-redappeared darker than the colors that GitHub uses now (--color-text-successand--color-text-danger).Red color:
Green color:
Feature:
show-whitespace. Fix the color of whitespace glyphs (fixes Adjustshow-whitespacecolor so it also works in dark mode #3772).Feature:
table-input. Soften the blue background color of cells.Feature:
conflict-marker. Use a darker color for Dark mode (#505050).Feature:
emphasize-draft-pr-label. Make it less bright on dark mode.Feature:
highlight-collaborators-and-own-conversations. Dim collaborator/own indicator border in PR listsFeature:
reactions-avatars. Fix reaction avatars in dark mode: (1) make the box-shadow color match the background, and (2) use a darker background color in avatars for when the image didn't load.