IssueHuntAdjust `show-whitespace` color so it also works in dark mode #3772
Shinigami92 posted onGitHub
https://github.com/sindresorhus/refined-github/blob/master/source/features/show-whitespace.css
As you can see I'm using the GitHub-Dark Theme but the whitespace are not really visible with this theam :slightly_frowning_face:
When I look into the source code, I can see a hard-coded fill. Can we make this configurable or overridable in any way?
I tried to just override it in Chrome via DevTools, but I had no luck :thinking:
Don't know what I'm doing wrong or if this is even the correct color setting
GitHub will soon support Dark Mode natively and we can fix it properly then.
Interesting, didn't know that GitHub will support Dark Mode anytime soon. Do you have a source for a roadmap or whatsoever?
So should we close this for now? Or let it open to track that we want to support it when native Dark Mode comes out?
Unfortunately background images can't be updated dynamically. You have 2 options to paste in the CSS field:
[data-rgh-whitespace] {
filter: brightness(20);
}or
[data-rgh-whitespace="tab"] {
background-image: url(data:image/svg+xml,%3Csvg preserveAspectRatio=\"xMinYMid meet\" viewBox=\"0 0 12 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z\" fill=\"white\"/%3E%3C/svg%3E);
]
[data-rgh-whitespace="space"] {
background-image: url(data:image/svg+xml,%3Csvg preserveAspectRatio=\"xMinYMid meet\" viewBox=\"0 0 12 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z\" fill=\"white\"/%3E%3C/svg%3E);
}Perhaps you could even suggest to the theme maintainers to include this CSS
A value of 4 works great :+1:
[data-rgh-whitespace] {
filter: brightness(4);
}I will suggest this to the theme repo
I'd generally suggest replacing background images with proper SVGs that can be targeted via CSS.
Ok good too know. I'm not really into CSS and more a user of frameworks like Vuetify ^^ And this handles all the stuff for me
@silverwind I knew you would suggest that, but SVGs don’t have background-repeat. Plus SVG would be part of the content, but the content here should be just a tab character.
Hmm I see, I guess background is justified in such a case. I think it may be possible to fill: var(--somevar) to make the color changeable in CSS, but I'm not 100% sure on browser support of that.
No, backgrounds and <img> don’t have access to anything on the page, including the variables
Looks like it's possible using mask-image:
https://jsfiddle.net/silverwind/Lpr736t9/
Thought an even better solution would be to use a gray color in the middle of the lightness spectrum which will work on both light and dark background, e.g. #80808040 but having it configurable never bad to have.
mask-image
I'm gonna assume that masks will be more expensive than just drawing the SVG and considering that this will be used by hundreds of elements that's gonna be a performance hit for no good reason.
middle of the lightness spectrum which will work on both light and dark background
That's a good solution, as long as it actually looks good on both. #80808040 is a little too light for example
having it configurable never bad to have.
Given the 190 features we have, configurability is bad.
Given the 190 features we have, configurability is bad.
I didn't mean user-configurable, but outside-configurable via CSS 😉
This is already outside-configurable: https://github.com/sindresorhus/refined-github/issues/3772#issuecomment-735004772 😁
If there was a no-downsides way to set the color via CSS variable we’d welcome it; The problem is that we haven’t found one.
Yeah, that's what we do currently and it's ugly.
Anyways, if you could choose a color that works on dark and light, that'd be my preference and you don't even need to change it once GH enabled their dark mode.
if you could choose a color that works on dark and light
PR welcome for such a color. As previously said, the color should look good on both, it shouldn't appear lighter than it is on white (which is the default)
Dark mode arrived 🎉
<img src="https://user-images.githubusercontent.com/7195563/101522115-1627b000-3987-11eb-9c5d-fa97c2c17604.png" width="300px"/>
Great! Does GitHub make it easy to detect dark mode? Because if the color can’t be found, an alternative solution would be to just use the detection and add a new rule.
There is data-color-mode on <html> but I'd suggest refraining from detection for this feature if possible because it would not work with GHD (thought that can be detected too by the presence of a <style> node).
So I noticed that the current color is very close to the line numbers, so I looked at how their color changes from light to dark mode. The color uses the --color-diff-blob-num-text CSS variable, which is
<table> <tr> <td>Mode <td>HSL <tr> <td>Light <td>hsl(210deg 13% 12% / 30%) <tr> <td>Dark <td>hsl(210deg 67% 96% / 30%) </table>
The current svg fill color is rgba(36,41,46,25%), which is hsl(210deg 12% 16% / 25%). More or less the same as in light mode, so to bring it up to the same color in Dark mode I multiply the saturation by 67/12 and brightness by 96/16, so the CSS would look like this:
:root[data-color-mode="dark"] [data-rgh-whitespace] {
filter: saturate(5.5) brightness(6);
}I also tried with filter: invert(1) and it kinda looks the same without so much math. Preview:
This works but as @silverwind said, it doesn't support GitHub Dark. But it looks like they already support RGH*:
So we might not need to do anything else in that regard.
* They use rgba(95,90,96,60%) btw.
Ideally I want to remove that rule in GHD because it's overriding the whole SVG so will not follow if you ever change it.
If you decide that --color-diff-blob-num-text is a fine color for the whitespace, I'd suggest using above mask-image trick to make it use the variable.
I've never used mask-image before, but is this kind of what you had in mind?
diff --git a/source/features/show-whitespace.css b/source/features/show-whitespace.css
index e28e28de..78052c0f 100644
--- a/source/features/show-whitespace.css
+++ b/source/features/show-whitespace.css
@@ -4,14 +4,17 @@
background-clip: border-box;
background-repeat: repeat-x;
background-position: left center;
+ background-color: var(--color-diff-blob-num-text, rgba(36,41,46,25%));
+ -webkit-mask-image: var(--rgh-whitespace-glyph);
+ mask-image: var(--rgh-whitespace-glyph);
}
[data-rgh-whitespace='tab'] {
- background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z" fill="rgba(36,41,46,25%)"/%3E%3C/svg%3E');
+ --rgh-whitespace-glyph: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z"/%3E%3C/svg%3E');
background-size: calc(var(--tab-size, 4) * 1ch) 1.25em;
}
[data-rgh-whitespace='space'] {
- background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z" fill="rgba(36,41,46,25%)"/%3E%3C/svg%3E');
+ --rgh-whitespace-glyph: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z"/%3E%3C/svg%3E');
background-size: 1ch 1.25em;
}Wait no, all the background- properties have to be transformed to mask- properties (plus the -webkit prefix for some browsers). Here's the final one (I think this works in all cases, tested on tabs and spaces):
[data-rgh-whitespace] {
line-height: 1em;
white-space: break-spaces;
background-color: var(--color-diff-blob-num-text, rgba(36,41,46,25%));
-webkit-mask-clip: border-box;
-webkit-mask-image: var(--rgh-whitespace-glyph);
-webkit-mask-repeat: repeat-x;
-webkit-mask-position: left center;
mask-clip: border-box;
mask-image: var(--rgh-whitespace-glyph);
mask-repeat: repeat-x;
mask-position: left center;
}
[data-rgh-whitespace='tab'] {
--rgh-whitespace-glyph: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z"/%3E%3C/svg%3E');
-webkit-mask-size: calc(var(--tab-size, 4) * 1ch) 1.25em;
mask-size: calc(var(--tab-size, 4) * 1ch) 1.25em;
}
[data-rgh-whitespace='space'] {
--rgh-whitespace-glyph: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z"/%3E%3C/svg%3E');
-webkit-mask-size: 1ch 1.25em;
mask-size: 1ch 1.25em;
}Here's it working for tabs and spaces:
And here with GitHub Dark, removing the adhoc CSS they added
(pardon the bad image sizing)
Looks good from the screenshots, but you can remove the --rgh-whitespace-glyph variable as it's not really necessary (thought nice to have I guess). All that matters is background-color on the element, the SVG mask then "cuts" away everything except the parts operlapping the image.
I have been using masking recently and found that one needs to tread carefully with the props as browser support is lacking for some of the newer props (especially Firefox lacks a few).
What does work is mask-image, mask-size and mask-repeat (unprefixed) and those should be all you need to achieve the effect.
Those 3 you mentioned need the -webkit- prefix on my end (Chrome 87). That's why I used the variable, for DRYness. Otherwise I get this:
I know the linter complains about the vendor prefix, but for mask-size, mask-image, mask-repeat, mask-position and mask-clip caniuse reports needing the prefix in Chrome and Safari.
Do not use masks https://github.com/sindresorhus/refined-github/issues/3772#issuecomment-736145523
The suggested solution at the moment is duplicating the rules like:
[data-color-mode="dark"] [data-rgh-whitespace='tab'] {
background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z" fill="white"/%3E%3C/svg%3E');
}
[data-color-mode="dark"] [data-rgh-whitespace='space'] {
background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z" fill="white"/%3E%3C/svg%3E');
}With the correct color. This won't work for the custom GHD stylesheet, but that's not a problem I'm trying to solve in this repo. Adding that CSS already works.
Alright, so
diff --git a/source/features/show-whitespace.css b/source/features/show-whitespace.css
index e28e28de..7a09f254 100644
--- a/source/features/show-whitespace.css
+++ b/source/features/show-whitespace.css
@@ -15,3 +15,12 @@
background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z" fill="rgba(36,41,46,25%)"/%3E%3C/svg%3E');
background-size: 1ch 1.25em;
}
+
+[data-color-mode='dark'] [data-rgh-whitespace='tab'] {
+ background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z" fill="rgba(240,246,252,25%)"/%3E%3C/svg%3E');
+}
+
+[data-color-mode='dark'] [data-rgh-whitespace='space'] {
+ background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z" fill="rgba(240,246,252,25%)"/%3E%3C/svg%3E');
+
+}Used rgba(240,246,252,25%) (the color of line numbers at 25% transparency like in the svg for light mode).
Do not use masks #3772 (comment)
Good call, I tested on a big file (in Firefox) and there was a lag before the glyphs appeared.
Should I commit this as part of #3806 (adding authorship)?
Yes you can add it to that PR, no authorship needed
For those who doesn't want to see the spaces, i think there is no way to disable it. So, what should be the proper CSS to set a blank character instead?
I tried it with something like that which tries to make the color similar, but they are still visible
[data-rgh-whitespace] {
filter: brightness(0);
white-space: none;
}
[data-rgh-whitespace='tab'] {
background-image:none
}UPDATE I respond to myself. That is the way to make it go away:
[data-rgh-whitespace='tab'] {
visibility: hidden;
}
[data-rgh-whitespace='space'] {
visibility: hidden;
}
@uri200 are you trying to disable the entire feature? Or only some of it?
If you want to disable the feature you can uncheck show-whitespace in the feature options.
Thanks @yakov116 how could I have missed that!!!
here you have the setting for those who are blind as me
No worries.
Glad to be of help.