Skip to content
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

[V2] Color degredations #2294

Closed
2 tasks done
mike-engel opened this issue Sep 27, 2017 · 43 comments
Closed
2 tasks done

[V2] Color degredations #2294

mike-engel opened this issue Sep 27, 2017 · 43 comments
Labels
⚡ Type: Regression This used to work before but a recent update broke it.
Milestone

Comments

@mike-engel
Copy link
Contributor

mike-engel commented Sep 27, 2017

  • 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

screen shot 2017-09-26 at 20 29 39

Color script

2.x

screen shot 2017-09-26 at 21 12 07

1.x

screen shot 2017-09-26 at 21 12 08

@markozxuu
Copy link

@mike-engel Had not noticed that error, it could be due to xterm.js 🤔

I'll take a look at this problem.

@welnanick
Copy link

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

@markozxuu
Copy link

@welnanick We are working to solve the problem of colors.

@darkdreamingdan
Copy link

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.

@fsegouin
Copy link

I'm having the same issue with fish, some colors just don't work.

@mike-engel
Copy link
Contributor Author

fwiw I'm using fish as well. Could be an issue with how fish represents colors

@welnanick
Copy link

I'm not using fish, and I am also having these issues, so unfortunately I don't think its related to fish :/

@Stanzilla Stanzilla mentioned this issue Jan 23, 2018
8 tasks
@Stanzilla
Copy link
Collaborator

xtermjs/xterm.js#484

@chabou chabou added this to the 2.0.0 milestone Feb 3, 2018
@chabou
Copy link
Collaborator

chabou commented Feb 3, 2018

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

@chabou
Copy link
Collaborator

chabou commented Feb 3, 2018

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 chabou added the 👀 Awaiting Response Issue or PR is awaiting a response from the author label Feb 3, 2018
@mike-engel
Copy link
Contributor Author

@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

screen shot 2018-02-03 at 16 21 21

Color test

screen shot 2018-02-03 at 16 23 49

@chabou
Copy link
Collaborator

chabou commented Feb 12, 2018

@mike-engel can you confirm me that running vim with your config in Terminal or iTerm looks like hyper v1.4.8?

@mike-engel
Copy link
Contributor Author

mike-engel commented Feb 13, 2018

@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

screen shot 2018-02-12 at 20 24 53

@chabou chabou removed the 👀 Awaiting Response Issue or PR is awaiting a response from the author label Feb 13, 2018
@chabou
Copy link
Collaborator

chabou commented Feb 13, 2018

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',
    },

@chabou
Copy link
Collaborator

chabou commented Feb 13, 2018

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.

@chabou chabou mentioned this issue Feb 13, 2018
@mike-engel
Copy link
Contributor Author

Thanks @chabou. I'll take a look at my configs tonight and try to update them.

@kinglouie
Copy link

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

bildschirmfoto 2018-02-23 um 16 49 53

1.4.8

bildschirmfoto 2018-02-23 um 16 47 31

@chabou
Copy link
Collaborator

chabou commented Feb 24, 2018

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
capture d ecran 2018-02-24 a 15 00 51

iTerm
capture d ecran 2018-02-24 a 15 01 47

@kinglouie
Copy link

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

bildschirmfoto 2018-02-24 um 22 37 41

@mpcsh
Copy link

mpcsh commented Feb 26, 2018

+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.

@nkzawa
Copy link

nkzawa commented Mar 4, 2018

👍 I used to have colorscheme on .hyper.js, but it doesn't work on v2 anymore.

Definition: https://gist.github.com/nkzawa/970f75de0f9f8b05524d99452dfabd54

@chabou
Copy link
Collaborator

chabou commented Mar 4, 2018

@nkzawa your issue is not the same. I opened an issue for it: #2728

@sethetter
Copy link

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 :)

@colinrobertbrooks
Copy link

I had emulated Sublime's Blackboard theme. Here's a screenshot of version 1 on the left and version 2 on the right:

2017-11-29_12-57-35

Version 2 is extremely dim.

@Stanzilla Stanzilla added the ⚡ Type: Regression This used to work before but a recent update broke it. label Apr 23, 2018
@tehp
Copy link

tehp commented Apr 26, 2018

This issue is still occurring. I have very similar issues as @colinrcummings
image
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.

@cpetersson
Copy link

@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;}',

@cseelus
Copy link

cseelus commented May 4, 2018

Still the same problem, even with 2.1.0-canary.1 without any plugins.

1.4.8:
untitled

2.1.0:
screen shot 2018-05-04 at 15 01 46

@tehp
Copy link

tehp commented May 4, 2018

Using hyper-snazzy#1.2.2 fixed the issue for me @cpetersson, but thank you for the tip. Interested to know why this broke.

@ghost
Copy link

ghost commented Jul 7, 2018

I'm having this issue with the latest version of Hyper too. No plugins. Vim colour scheme showing wrong colours

@ln-P
Copy link

ln-P commented Jul 31, 2018

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:
screen shot 2018-07-31 at 11 29 49

Expected output:
test

@victorronnow
Copy link

Experiencing the same issue here. Any updates?

Hyper 2.0.0 (stable) Hyper 1.4.8 (stable)
capture d ecran 2018-11-07 a 17 00 13 capture d ecran 2018-11-07 a 17 00 18

@ckangnz
Copy link

ckangnz commented Nov 14, 2018

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.

image

and I have an annoying green highlight on directory names

image

@S-vdv
Copy link

S-vdv commented Nov 30, 2018

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
screenshot from 2018-11-30 17-16-49

@kinglouie
Copy link

Fixed on xterm.js 🎉 xtermjs/xterm.js#1895

@DonnieWest
Copy link

Doesn't look like it's in a stable release yet though - https://github.com/xtermjs/xterm.js/releases/tag/3.13.0-beta1

@JoshCheek
Copy link

JoshCheek commented May 6, 2019

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):

image

On Hyperterm3 (3.0.0) it looks like this:

image

On the upside, it is super smooth.

@MrRio
Copy link
Contributor

MrRio commented May 6, 2019

@JoshCheek Will have a look into this.

@MrRio
Copy link
Contributor

MrRio commented May 6, 2019

@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.

Screenshot 2019-05-06 at 14 59 27

@DonnieWest
Copy link

DonnieWest commented May 9, 2019

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

@ghost
Copy link

ghost commented Aug 30, 2019

Is there any indication as to when this issue will be fixed?

@SkyaTura
Copy link

SkyaTura commented Oct 10, 2019

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 😢

@Stanzilla
Copy link
Collaborator

Try with a CI build from canary, otherwise please open a new issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
⚡ Type: Regression This used to work before but a recent update broke it.
Projects
None yet
Development

No branches or pull requests