[V2] Color degredations
mike-engel opened this issue · 43 comments
- I am on the latest Hyper.app version
- I have searched the issues of this repo and believe that this is not a duplicate
- OS version and name: macOS 10.13.0
- Hyper.app version: 2.0.4 & 1.4.8
- Link of a Gist with the contents of your .hyper.js: https://gist.github.com/mike-engel/0fcc34f787fa7875e91faf36ea19d67a
- Relevant information from devtools: N/A
- The issue is reproducible in vanilla Hyper.app: Yep. Moving my hyper.js config to another location and restarting also has bad color representations.
Issue
While moving to 2.0, I've noticed that colors are not behaving properly anymore. In programs like Vim the colors between 2.x and 1.x are vastly different. While debugging, I also noticed that the color representations between the two versions seem to be much different.
Referring to this gist and this script, you can see from my screenshots that there are some differences.
This may be an issue with xterm.js, so if it is, let me know and I'll move over there. Here's my vim config as well. It's important to note that that exact vim config looks ok on 1.x, but not ok on 2.x.
Please let me know if there's any info you need. If you have some general ideas on where to start, I can work on a PR. Thanks!
EDIT: It seems like xterm.js doesn't support truecolor, which may be part of the problem with the color script, but doesn't explain the vim differences.
Screenshots
Vim
Color script
2.x
1.x
@mike-engel Had not noticed that error, it could be due to xterm.js 🤔
I'll take a look at this problem.
I have noticed this too.
I switched to a true-color vim theme in 1.x due to #155 , this does not work in 2.x
I tried switching back to my old theme and it also is not rendering properly in 2.x
I am using this hyper-theme to get the solarized color palette
@welnanick We are working to solve the problem of colors.
My colours configuraion barely has any impact in Windows Bash. I can only seem to get the window background colour working - tried the solarized theme but it also doesn't seem to work.
It seems to always force the default bash colours.
I'm having the same issue with fish, some colors just don't work.
fwiw I'm using fish as well. Could be an issue with how fish represents colors
I'm not using fish, and I am also having these issues, so unfortunately I don't think its related to fish :/
To be clear, this issue is related to 256 colors not true color.
Color Script, that tests 256 colors must render same thing in 2.x than in 1.x
ok 3-byte color mode in script is 24-bits Truecolor. This is not supposed to work yet. So everything is ok with color script on Mac (in last canary with xterm3 too).
@mike-engel Can you try to reproduce your vim issue with our last canary? (with and without your hyper plugins)
@chabou It looks like the latest canary is much better, but for some reason my vim config is still using the incorrect colors. It could be my vim config, but it is curious how different it looks with the same config. The color test, however, looks much better 😄
Screenshots
Left: Hyper 1.4.8
Right: 2.0.0-canary.11
Vim
Color test
@mike-engel can you confirm me that running vim with your config in Terminal or iTerm looks like hyper v1.4.8?
@chabou running iterm2 stock (minus base16 ocean dark from chris simpson) with my vim theme produces what I'd expect, which matches hyper 1.4.8. Let me know if you'd like me to try anything else!
If it helps, here's my vim config: https://github.com/mike-engel/vimfiles/blob/master/vimrc
iTerm2 v3.1.5
Thank you for your screenshot.
I installed your config and reproduced your issue.
I tried to dig deeper into this issue and this is what I found:
Using set termguicolors needs to have a 24-bits (truecolor) ISO-8613-3 compatible terminal. Xtermjs isn't yet compatible. In this case, terminal render a #303030 appromixation instead of #2B303B blue grey.
When termguicolors isn't set, it fallback on 16/256 color.
And I found that your hyper theme hyper-base16-ocean-dark hasn't the right colors.
If you use theses colors, you'll have same colors thant iTerm2:
foregroundColor: '#C0C5CE',
backgroundColor: '#2B303B',
colors: {
black: '#2B303B',
red: '#BF616A',
green: '#A3BE8C',
yellow: '#EBCB8B',
blue: '#8FA1B3',
magenta: '#B48EAD',
cyan: '#96B5B4',
white: '#C0C5CE',
lightBlack: '#65737E',
lightRed: '#BF616A',
lightGreen: '#A3BE8C',
lightYellow: '#EBCB8B',
lightBlue: '#8FA1B3',
lightMagenta: '#B48EAD',
lightCyan: '#96B5B4',
lightWhite: '#EFF1F5',
},
If you want to keep theme colors, I think you could use something like https://github.com/chriskempson/base16-shell with let base16colorspace=256 vim theme parameter.
Thanks @chabou. I'll take a look at my configs tonight and try to update them.
On my setup this issue is not limited to vim, the colors beyond 16 are not right.
I have a base16 solarized-dark colorscheme and tested the colors with colortest from chriskempson/base16-shell
hyper.js
module.exports = {
config: {
updateChannel: 'canary',
fontSize: 15,
fontFamily: '"MesloLGSDZ Nerd Font", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
base16: {
scheme: 'solarized'
},
},
plugins: [
'hypersixteen'
],
};
2.0.0 canary-14
1.4.8
The main difference is for Bright_White and colors > 15.
I think that Bright_White is ok: https://github.com/winneon/hypersixteen/blob/master/src/HyperSixteen.js#L31
Maybe v1.4.8 has some side effect with this color. But now, it seems to be what solarized theme expects.
There is indeed some "regressions" with colors > 15, but this is exactly how it is looks like with iTerm.
So for me, there is no other regression than dropped truecolor support.
Vanilla 2.0.0-canary.14
iTerm
strange, for me in iTerm colors > 15 are working with base16-shell and base16-solarized-dark.sh
Here are the dotfiles I'm using: kinglouie/dotfiles
+1. My vim is horrendously ugly in 2.0.0-canary.14, but looked fine in 1.4.8. This is my last barrier to switching from iTerm2.
👍 I used to have colorscheme on .hyper.js, but it doesn't work on v2 anymore.
Definition: https://gist.github.com/nkzawa/970f75de0f9f8b05524d99452dfabd54
For anyone using the hyper-solarized-dark plugin, I was having an issue with the background color but fixed it with this PR -> ghosh/hyper-solarized-dark#20
Not related to the main issue here, but it at least made vim look less bad w/ solarized dark :)
I had emulated Sublime's Blackboard theme. Here's a screenshot of version 1 on the left and version 2 on the right:
Version 2 is extremely dim.
Verifying that colors > 15 are still the wrong colors in Hyper 2.0.0-canary.18.
This issue is still occurring. I have very similar issues as @colinrcummings
Left is the same theme running on terminal, right is the theme running on Hyper. You can clearly see that the whole window seems to be dimmed.
@tehp this seems to be an issue with the hyper-snazzy plugin (which it looks like you're using). See sindresorhus/hyper-snazzy#41
Workaround I'm using now, found in the above issue, is adding this to my .hyper.js config
css: '.terminal, .term_fit:not(.term_term) {opacity: 1 !important;}',
Still the same problem, even with 2.1.0-canary.1 without any plugins.
1.4.8:
2.1.0:
Using hyper-snazzy#1.2.2 fixed the issue for me @cpetersson, but thank you for the tip. Interested to know why this broke.
I'm having this issue with the latest version of Hyper too. No plugins. Vim colour scheme showing wrong colours
Any progress on the issue? Does anyone has any temporary solutions to the problem? I am trying to use one-dark.vim. However, as mentioned in the issue color mapping is incorrect.
My current output:
Expected output:
Experiencing the same issue here. Any updates?
| Hyper 2.0.0 (stable) | Hyper 1.4.8 (stable) |
|---|---|
 |
 |
I'm experiencing the same issue on Windows. All of my settings are identical to my mac environment, which uses iterm2, and I wanted to replicate the environment on Windows. Colors on both zsh and vim are not working correctly.
and I have an annoying green highlight on directory names
Any progress on this issue? I have exactly the same problem. However, if i comment out set termguicolors the colors become more alive. The background stays ugly brown though
Fixed on xterm.js 🎉 xtermjs/xterm.js#1895
Doesn't look like it's in a stable release yet though - https://github.com/xtermjs/xterm.js/releases/tag/3.13.0-beta1
Just downloaded hyperterm 3 to give it a shot. I tweet a lot of visual programs, some of them don't look good on hyperterm b/c of this issue, eg:
https://twitter.com/josh_cheek/status/1116321447234940928
ruby -eh,w=$LINES,$COLUMNS'
B=(0..20).map{[0,rand*h,rand*5,rand]}
loop{B. map!{|x,y,v,a|[(x+v),y+a=y<0?-a:a-0.1,v,a]}
$><<"\e[H"<<h.times. map{|v|w.times. map{|u|d=B. map{|x,y|Math.sqrt (w/2-(x+w/2-u)%w)**2/4+(v-y)**2}.min*9
"\e[48;2;#{d<0?0:d>255?255:d. to_i};0;0m "}*""}*"\n"}'
On iTerm2, it looks like this (the weird line is b/c ss is partway through a screen update):
On Hyperterm3 (3.0.0) it looks like this:
On the upside, it is super smooth.
@JoshCheek Will have a look into this.
@JoshCheek Looks like it's fixed in latest xterm.js when updated inside Hyper, so we just need to make sure it makes its way into the WebGL renderer.
https://github.com/xtermjs/xterm.js/releases/tag/3.13.0
^ Looks like xtermjs just reached 3.13. Stable release that should hopefully (theoretically?) make it into hyper's fork :)
Edit: changed link to actual release notes
Is there any indication as to when this issue will be fixed?
Is this issue planed to be solved soon?
Edit:
I found not exciting news on this subject on the issue #3695
It looks like we'll have to wait for v4 😢
Try with a CI build from canary, otherwise please open a new issue