-
Notifications
You must be signed in to change notification settings - Fork 8.5k
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
Refine customization around text color adjustment #14940
Comments
Could you share your settings.json file/? |
Sure. Note that I did try most of the available options that can be in any way related. This is what it looks like after all my manipulation: settings.json{
"$help": "https://aka.ms/terminal-documentation",
"$schema": "https://aka.ms/terminal-profiles-schema",
"actions":
[
{
"command":
{
"action": "splitPane",
"split": "right"
},
"keys": "alt+shift+o"
},
{
"command":
{
"action": "splitPane",
"profile": "{00000000-0000-0000-ba54-000000000002}",
"split": "auto"
},
"keys": "alt+shift+5"
},
{
"command":
{
"action": "splitPane",
"profile": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
"split": "auto"
},
"keys": "alt+shift+1"
},
{
"command": "find",
"keys": "ctrl+shift+f"
},
{
"command": "unbound",
"keys": "ctrl+c"
},
{
"command": "unbound",
"keys": "ctrl+v"
},
{
"command":
{
"action": "splitPane",
"profile": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
"split": "auto"
},
"keys": "alt+shift+2"
},
{
"command":
{
"action": "splitPane",
"split": "down"
},
"keys": "alt+shift+h"
},
{
"command":
{
"action": "splitPane",
"profile": "{2c4de342-38b7-51cf-b940-2309a097f518}",
"split": "auto"
},
"keys": "alt+shift+3"
},
{
"command":
{
"action": "splitPane",
"split": "auto"
},
"keys": "alt+shift+d"
},
{
"command":
{
"action": "splitPane",
"profile": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}",
"split": "auto"
},
"keys": "alt+shift+4"
}
],
"copyFormatting": "none",
"copyOnSelect": false,
"defaultProfile": "{d7b20cea-47a9-518c-95a4-c8bd91e2e1c6}",
"profiles":
{
"defaults":
{
"adjustIndistinguishableColors": "always",
"colorScheme": "VSCode WSL",
"font":
{
"face": "FiraCode NFM",
"features":
{
"calt": 1,
"ss03": 1,
"ss05": 1
},
"size": 14.0
},
"useAtlasEngine": false
},
"list":
[
{
"adjustIndistinguishableColors": "indexed",
"antialiasingMode": "cleartype",
"colorScheme": "VSCode WSL",
"font":
{
"face": "FiraCode NFM",
"size": 14.0,
"weight": "normal"
},
"guid": "{d7b20cea-47a9-518c-95a4-c8bd91e2e1c6}",
"hidden": false,
"name": "Ubuntu 22.04.2 LTS",
"opacity": 100,
"source": "CanonicalGroupLimited.Ubuntu22.04LTS_79rhkp1fndgsc",
"useAtlasEngine": true
},
{
"guid": "{17bf3de4-5353-5709-bcf9-835bd952a95e}",
"hidden": true,
"name": "Ubuntu-22.04",
"source": "Windows.Terminal.Wsl"
},
{
"guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
"hidden": false,
"name": "Windows PowerShell"
},
{
"guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
"hidden": false,
"name": "Command Prompt"
},
{
"guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
"hidden": true,
"name": "Ubuntu",
"source": "Windows.Terminal.Wsl",
"startingDirectory": "//wsl$/Ubuntu/home/ignat/projects"
},
{
"guid": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}",
"hidden": true,
"name": "Azure Cloud Shell",
"source": "Windows.Terminal.Azure"
},
{
"commandline": "%PROGRAMFILES%/git/usr/bin/bash.exe -i -l",
"guid": "{00000000-0000-0000-ba54-000000000002}",
"icon": "%PROGRAMFILES%/Git/mingw64/share/git/git-for-windows.ico",
"name": "Git Bash",
"startingDirectory": "%USERPROFILE%"
},
{
"guid": "{b9363be8-5790-5ecc-b943-5154b666d572}",
"hidden": true,
"name": "Developer Command Prompt for VS 2022",
"source": "Windows.Terminal.VisualStudio"
},
{
"guid": "{5e2884e9-b7c4-583f-856c-c712398f7c29}",
"hidden": true,
"name": "Developer PowerShell for VS 2022",
"source": "Windows.Terminal.VisualStudio"
},
{
"guid": "{b8fff302-10ea-579a-82f8-ed4d452b3a4d}",
"hidden": true,
"name": "Developer Command Prompt for VS 2019",
"source": "Windows.Terminal.VisualStudio"
},
{
"guid": "{1d58632f-d73e-54fd-909a-c3c09e989d2f}",
"hidden": true,
"name": "Developer PowerShell for VS 2019",
"source": "Windows.Terminal.VisualStudio"
},
{
"guid": "{c520fdae-4659-598e-bedb-4899c12fc45b}",
"hidden": true,
"name": "Developer Command Prompt for VS 2017",
"source": "Windows.Terminal.VisualStudio"
},
{
"altGrAliasing": true,
"antialiasingMode": "grayscale",
"closeOnExit": "automatic",
"commandline": "%SystemRoot%\\System32\\cmd.exe",
"cursorShape": "bar",
"elevate": true,
"guid": "{ffcfd0e1-d07a-4fbd-8aee-d2948fedd21b}",
"hidden": false,
"historySize": 9001,
"icon": "ms-appx:///ProfileIcons/{0caa0dad-35be-5f56-a8ff-afceeeaa6101}.png",
"name": "Command Prompt (Admin)",
"padding": "8, 8, 8, 8",
"snapOnInput": true,
"startingDirectory": "%USERPROFILE%",
"useAcrylic": false
}
]
},
"schemes":
[
{
"background": "#0C0C0C",
"black": "#0C0C0C",
"blue": "#0037DA",
"brightBlack": "#767676",
"brightBlue": "#3B78FF",
"brightCyan": "#61D6D6",
"brightGreen": "#16C60C",
"brightPurple": "#B4009E",
"brightRed": "#E74856",
"brightWhite": "#F2F2F2",
"brightYellow": "#F9F1A5",
"cursorColor": "#FFFFFF",
"cyan": "#3A96DD",
"foreground": "#CCCCCC",
"green": "#13A10E",
"name": "Campbell",
"purple": "#881798",
"red": "#C50F1F",
"selectionBackground": "#FFFFFF",
"white": "#CCCCCC",
"yellow": "#C19C00"
},
{
"background": "#012456",
"black": "#0C0C0C",
"blue": "#0037DA",
"brightBlack": "#767676",
"brightBlue": "#3B78FF",
"brightCyan": "#61D6D6",
"brightGreen": "#16C60C",
"brightPurple": "#B4009E",
"brightRed": "#E74856",
"brightWhite": "#F2F2F2",
"brightYellow": "#F9F1A5",
"cursorColor": "#FFFFFF",
"cyan": "#3A96DD",
"foreground": "#CCCCCC",
"green": "#13A10E",
"name": "Campbell Powershell",
"purple": "#881798",
"red": "#C50F1F",
"selectionBackground": "#FFFFFF",
"white": "#CCCCCC",
"yellow": "#C19C00"
},
{
"background": "#282C34",
"black": "#282C34",
"blue": "#61AFEF",
"brightBlack": "#5A6374",
"brightBlue": "#61AFEF",
"brightCyan": "#56B6C2",
"brightGreen": "#98C379",
"brightPurple": "#C678DD",
"brightRed": "#E06C75",
"brightWhite": "#DCDFE4",
"brightYellow": "#E5C07B",
"cursorColor": "#FFFFFF",
"cyan": "#56B6C2",
"foreground": "#DCDFE4",
"green": "#98C379",
"name": "One Half Dark",
"purple": "#C678DD",
"red": "#E06C75",
"selectionBackground": "#FFFFFF",
"white": "#DCDFE4",
"yellow": "#E5C07B"
},
{
"background": "#FAFAFA",
"black": "#383A42",
"blue": "#0184BC",
"brightBlack": "#4F525D",
"brightBlue": "#61AFEF",
"brightCyan": "#56B5C1",
"brightGreen": "#98C379",
"brightPurple": "#C577DD",
"brightRed": "#DF6C75",
"brightWhite": "#FFFFFF",
"brightYellow": "#E4C07A",
"cursorColor": "#4F525D",
"cyan": "#0997B3",
"foreground": "#383A42",
"green": "#50A14F",
"name": "One Half Light",
"purple": "#A626A4",
"red": "#E45649",
"selectionBackground": "#FFFFFF",
"white": "#FAFAFA",
"yellow": "#C18301"
},
{
"background": "#002B36",
"black": "#002B36",
"blue": "#268BD2",
"brightBlack": "#073642",
"brightBlue": "#839496",
"brightCyan": "#93A1A1",
"brightGreen": "#586E75",
"brightPurple": "#6C71C4",
"brightRed": "#CB4B16",
"brightWhite": "#FDF6E3",
"brightYellow": "#657B83",
"cursorColor": "#FFFFFF",
"cyan": "#2AA198",
"foreground": "#839496",
"green": "#859900",
"name": "Solarized Dark",
"purple": "#D33682",
"red": "#DC322F",
"selectionBackground": "#FFFFFF",
"white": "#EEE8D5",
"yellow": "#B58900"
},
{
"background": "#FDF6E3",
"black": "#002B36",
"blue": "#268BD2",
"brightBlack": "#073642",
"brightBlue": "#839496",
"brightCyan": "#93A1A1",
"brightGreen": "#586E75",
"brightPurple": "#6C71C4",
"brightRed": "#CB4B16",
"brightWhite": "#FDF6E3",
"brightYellow": "#657B83",
"cursorColor": "#002B36",
"cyan": "#2AA198",
"foreground": "#657B83",
"green": "#859900",
"name": "Solarized Light",
"purple": "#D33682",
"red": "#DC322F",
"selectionBackground": "#FFFFFF",
"white": "#EEE8D5",
"yellow": "#B58900"
},
{
"background": "#000000",
"black": "#000000",
"blue": "#3465A4",
"brightBlack": "#555753",
"brightBlue": "#729FCF",
"brightCyan": "#34E2E2",
"brightGreen": "#8AE234",
"brightPurple": "#AD7FA8",
"brightRed": "#EF2929",
"brightWhite": "#EEEEEC",
"brightYellow": "#FCE94F",
"cursorColor": "#FFFFFF",
"cyan": "#06989A",
"foreground": "#D3D7CF",
"green": "#4E9A06",
"name": "Tango Dark",
"purple": "#75507B",
"red": "#CC0000",
"selectionBackground": "#FFFFFF",
"white": "#D3D7CF",
"yellow": "#C4A000"
},
{
"background": "#FFFFFF",
"black": "#000000",
"blue": "#3465A4",
"brightBlack": "#555753",
"brightBlue": "#729FCF",
"brightCyan": "#34E2E2",
"brightGreen": "#8AE234",
"brightPurple": "#AD7FA8",
"brightRed": "#EF2929",
"brightWhite": "#EEEEEC",
"brightYellow": "#FCE94F",
"cursorColor": "#000000",
"cyan": "#06989A",
"foreground": "#555753",
"green": "#4E9A06",
"name": "Tango Light",
"purple": "#75507B",
"red": "#CC0000",
"selectionBackground": "#FFFFFF",
"white": "#D3D7CF",
"yellow": "#C4A000"
},
{
"background": "#300A24",
"black": "#171421",
"blue": "#0037DA",
"brightBlack": "#767676",
"brightBlue": "#08458F",
"brightCyan": "#2C9FB3",
"brightGreen": "#26A269",
"brightPurple": "#A347BA",
"brightRed": "#C01C28",
"brightWhite": "#F2F2F2",
"brightYellow": "#A2734C",
"cursorColor": "#FFFFFF",
"cyan": "#3A96DD",
"foreground": "#FFFFFF",
"green": "#26A269",
"name": "Ubuntu-22.04-ColorScheme",
"purple": "#881798",
"red": "#C21A23",
"selectionBackground": "#FFFFFF",
"white": "#CCCCCC",
"yellow": "#A2734C"
},
{
"background": "#000000",
"black": "#777C7D",
"blue": "#5C83B7",
"brightBlack": "#767875",
"brightBlue": "#729FCF",
"brightCyan": "#34E2E2",
"brightGreen": "#8AE234",
"brightPurple": "#AD7FA8",
"brightRed": "#EF2929",
"brightWhite": "#EEEEEC",
"brightYellow": "#FCE94F",
"cursorColor": "#FFFFFF",
"cyan": "#06989A",
"foreground": "#FFFFFF",
"green": "#4E9A06",
"name": "VSCode WSL",
"purple": "#907295",
"red": "#DB4646",
"selectionBackground": "#F0F0F0",
"white": "#CCCCCC",
"yellow": "#C4A000"
},
{
"background": "#000000",
"black": "#000000",
"blue": "#000080",
"brightBlack": "#808080",
"brightBlue": "#0000FF",
"brightCyan": "#00FFFF",
"brightGreen": "#00FF00",
"brightPurple": "#FF00FF",
"brightRed": "#FF0000",
"brightWhite": "#FFFFFF",
"brightYellow": "#FFFF00",
"cursorColor": "#FFFFFF",
"cyan": "#008080",
"foreground": "#C0C0C0",
"green": "#008000",
"name": "Vintage",
"purple": "#800080",
"red": "#800000",
"selectionBackground": "#FFFFFF",
"white": "#C0C0C0",
"yellow": "#808000"
}
],
"themes": []
} |
For what it's worth, I tried a bunch of other terminal apps and all of them are struggling more or less. So maybe it's just VS Code terminal that just better in this particular case and this shouldn't be a bug report but a feature request? |
We're never going to get anything like what VS Code is doing without a significantly different color adjustment algorithm. Look at the green, yellow, and cyan backgrounds. The foreground colors have been adjusted to such an extent that they might as well all be black! Also note that there are color combinations that are intended to be invisible, but in VS they are not. For example, if an application has output something in red on red, I expect it to be completely invisible, and not show up as bright white on red! If we wanted to do something like this, it would probably mean we'd have to offer it as yet another color rendering option, because I don't see this has a replacement for the existing algorithm. At least the Delta E algorithm still keeps the foreground colors reasonably distinguishable. |
I tend to agree. That's such an aggressive adjustment of the original colors, that it's hardly recognizable as the original scheme in the first place. I think we've had discussions in the past on letting users configure the delta-E threshold for adjusting the colors, but I suspect that wouldn't create the magnitude of change here. There's also been other discussions about having a "high-contrast mode", that very aggressively replaces the selected colors with ones that would be more legible. I forget how that works. That sounds like something you'd possible be more interested in. That's tracked in... #12999 / #3066. I'll let @PankajBhojwani make the final call on this one |
Maybe the answer is to give users a table of 162 color combinations and just let them tweak the values in whatever way they prefer. |
We could also let people configure the minimum distance between the foreground and background color for a similar effect, but with almost no required code changes necessary. I personally don't think that letting users configure the visibility of text that has an identical foreground/background color is necessary, since it's intentionally invisible anyways. |
This is a good idea. But practice says that users customize the appearance of applications rather with the help of the applications themselves. The only exception is the color of the cursor, which cannot be set without changing the value in settings.json, because OSC 12 is overwritten. |
I would be happy with tweakable 162 color combinations, 👍 to that.
What would be a use for such functionality? Spoiler tag? I think the app should use true color then and not rely on a terminal app rendering. But the same color being invisible on the same color is fine, maybe VS Code is wrong on that one, but if there is a difference, it should be readable IMO. |
Tried implementing a naive proof-of-concept adjustment logic with HTML and TypeScript (Demo). Results are meh, but if anyone wants to try their skills in it: the repo is here, fork away! Then I've looked into how VS Code does the adjustment and updated the OP with my findings. Please, give it a look! |
Triaged! Also, thanks @Igonato for providing such great resources and a bug report. This is great! |
#15283 will change this to look like this: VS Code from OP for reference: The black ●●● that randomly occur are a side effect from me cutting some corners. To be honest, I don't wish to adopt the approach VS Code has implemented. It doesn't understand that two colors of equal luminance, but vastly different chroma are easily distinguishable. This makes implement cursors with their algorithm a bit bothersome, but I want to use the same algorithm for this exact issue as well. An inverted cursor on top of a This is how my approach handles it: The example is a little contrived, but there's many more color combinations that would produce the same issue. It makes my cursors look a little "inconsistent". Color contrasting with Oklab is more expensive but works about as well. 1 It can be made much cheaper with SIMD, which I'll do in a future PR. Footnotes
|
Note to future us: this line terminal/src/renderer/base/RenderSettings.cpp Line 185 in 1477c0d
sets the delta for the contrast ratio. That's what we'd want to affect if we did want to add a knob for this setting. x-ref #3066, #12999 |
I don't think vscode changes the background colors. Some notes from my experience building the feature:
|
Could this feature be implemented to allow users to customize their contrast ratio/delta E? I've been encountering this issue lately. My concernWhat I'm aiming for is an easy way to obtain a comfortable foreground color from basic colors (e.g., #0000ff, #00000), thus preventing the need for fine-tuning each color individually. While the current results are satisfactory, I desire more personalized colors. However, achieving this currently requires modifying the source code and rebuilding the app or adjusting colors individually using a palette, which leads to a poor user experience. For instance, current approach adjusts #990000 to #fa6c5b on #1e1e1e, resulting in a lighter color than my desire. VSCode, for example, changes the color to #ef5959, which is more visually appealing, and I could change the minimum contrast ratio to further enhance comfort. My thoughts about the discussionDevelopers think the invisible text should reamain invisible, but I think that should be decided by users. Even a program outputs invisible text (e.g. red on red), the text still exists, and some users may wish to see it. Moreover, I fail to grasp why the current algorithm My user experience about color adjustmentAdditionally, a notable terminal emulator for color adjustments I've used is Terminal.app on macOS, although it doesn't employ a minimum contrast ratio (the algorithm remains undisclosed). On Terminal.app, with #1e1e1e background, #990000 appears as #d6492c, and #0000b2 is displayed as #6a42f6 (#4788ff on terminal and #7979ff on VSCode), which is more comfortable for me despite #6a42f6 on #1e1e1e falling below the WCAG 2.1 standard (3.0) for contrast ratio. My hopes for future improvementsI hope the future version of terminal can:
These expectations are for sparing users the hassle of modifying source code or individual colors. |
I appreciate your insight on this feature request and that you've provided comparable terminal emulators. Thanks! However, this sort of language--while it's phrased as something you're doing or not doing--typically implies some incredulity that the person you're talking to or about would so audaciously miss something "obvious". The incremental cost of adding and maintaining in perpetuity a new setting to control the delta-E coefficient was deemed higher than the benefit of shipping it as-was. That's all. This team generally operates under the principle of shipping the minimum viable thing to validate the need for a feature and open up avenues for exploration in the future. 🙂 I think we're leaning towards a configurable minimum contrast ratio, rather than exposing the dE coefficient directly to user control. That would allow us to switch up the nudging algorithm in the background if one were proven to be better/faster/generate less code/etc. without tying user settings to our specific implementation details. |
Thank you for the reply! I am a non-native speaker and there may be potential for misinterpretation in my expression. I do understand that developers may have their concerns regarding software maintenance and reasons about settings exposing. In my perspective, offering detailed configurations and accessibility of features in an application oriented towards programmers can enhance its usability, even if it might lead to unforeseen issues. Users who possess knowledge of how to configure these features can leverage the advantages of them and consider minor issues as acceptable. Conversely, those unfamiliar with the usage are likely to keep default settings. Additionally, configuration in string format within a file suffices. This approach has no big impact on performance and memory usage, yet enables the program to extract specific parameters from it. At least this approach allows me to avoid time-consuming tasks such as online searches, source code modifications and a rebuilt process. 😂 I eagerly anticipate future versions that incorporate a configurable minimum contrast ratio! |
Windows Terminal version
1.16.10262.0
Windows build number
10.0.22000.0
Other Software
Inside WSL
Steps to reproduce
Running the following shell script:
Expected Behavior
Colors in VS Code terminal look like this (all combinations are readable):
![image](https://user-images.githubusercontent.com/788609/222312982-0c6619f8-5e51-4459-ad36-19bd6a5967f6.png)
Actual Behavior
In the Terminal app, things are worse:
![image](https://user-images.githubusercontent.com/788609/222313624-75d152f1-a760-4b87-86ea-e56067fae812.png)
I tried changing color schemes to no avail. Changing "Automatically adjust lightness of indistinguishable text" setting doesn't seem to have any effect either.
2023-03-06 UPDATE
Investigation Into VS Code Inner Workings
The contrast adjustment in VS Code terminal is set by
terminal.integrated.minimumContrastRatio
in settings. Mentioned in the docs a11y section: .../editor/accessibility#_terminal-accessibility - number between 1 and 21 with 4.5 as a default.Actually, makes perfect sense it being an accessibility feature. With normal vision some bg/fg combinations are annoyingly hard to process. For a person with even mild colorblindness they could be completely unreadable.
The travel path for the minimum contrast value is:
xterm.js
instance that does the terminal rendering: vscode/.../xtermTerminal.ts:209;xterm.js
invokes.ensureContrastRatio
in xterm.js/.../DomRendererRowFactory.ts:338;relativeLuminance
(same file just above).Most of the math is in there. I haven't found the place where background colors are adjusted (they are clearly darkened a bit).
Reasons to Reuse it for the Terminal App
Also, it would be really cool to have an option for the Terminal app to outright pick up VS Code settings (color scheme, minimum contrast, font family, font size, keybindings, etc...), but that is certainly a scope creep in the context of this issue.
The text was updated successfully, but these errors were encountered: