Hyper: Foreground color makes nano menu unreadable

[0x80]

Whatever foreground color I set, nano seems to use it for the menu text and their background colors, making it unreadable. For example with foregroundColor: '#f2777a' I get:

[Sagi363]

You can create a plugin like https://hyper.is/#hyperyellow with new background color like this:
termCSS: ${config.termCSS || ''} span { background-color: rgba(0,159,255,0.6); }

[chrisdothtml]

@Sagi363 You can more easily make that change in your .hyper.js file in the termCSS property

[0x80]

I don't get what you're saying. I already have a background color. That's the dark color. Nano doesn't use the background color for the menu letter blocks.

In iTerm nano seems to use my background color for the menu text, and the foreground color for the menu blocks. But somehow nano in Hyper seems to use the foreground color for both.

Here's my hyper.js config. I set an oceanic next color scheme.

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 12,

    // font family with optional fallbacks
    fontFamily: 'Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgb(255, 255, 255, 0.2)',

    // `BEAM` for |, `UNDERLINE` for _, `BLOCK` for █
    cursorShape: 'BLOCK',

    // color of the text
    foregroundColor: '#cbd0d7',

    // terminal background color
    backgroundColor: 'rgb(27, 43, 52)',

    // border color (window, tabs)
    borderColor: '#cbd0d7',

    // custom css to embed in the main window
    css: '',

    // custom css to embed in the terminal window
    termCSS: '',

    // custom padding (css format, i.e.: `top right bottom left`)
    padding: '12px 14px',

    // the full list. if you're going to provide the full color palette,
    // including the 6 x 6 color cubes and the grayscale map, just provide
    // an array here instead of a color map object
    colors: {
      black: '#233944',
      red: '#f2777a',
      green: '#a8cfa5',
      yellow: '#fcd176',
      blue: '#78aad6',
      magenta: '#d1a7d0',
      cyan: '#6fbfc0',
      white: '#cbd0d7',
      lightBlack: '#788691',
      lightRed: '#f2777a',
      lightGreen: '#a8cfa5',
      lightYellow: '#fcd176',
      lightBlue: '#78aad6',
      lightMagenta: '#d1a7d0',
      lightCyan: '#6fbfc0',
      lightWhite: '#dfe5ed'
    },

    // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
    // if left empty, your system's login shell will be used by default
    shell: '',

    // for setting shell arguments (i.e. for using interactive shellArgs: ['-i'])
    // by default ['--login'] will be used
    shellArgs: ['--login'],

    // for environment variables
    env: {},

    // set to false for no bell
    bell: 'SOUND',

    // if true, selected text will automatically be copied to the clipboard
    copyOnSelect: false

    // URL to custom bell
    // bellSoundURL: 'http://example.com/bell.mp3',

    // for advanced config flags please refer to https://hyperterm.org/#cfg
  },

  // a list of plugins to fetch and install from npm
  // format: [@org/]project[#version]
  // examples:
  //   `hyperpower`
  //   `@company/project`
  //   `project#1.0.1`
  plugins: [],

  // in development, you can create a directory under
  // `~/.hyperterm_plugins/local/` and include it here
  // to load it and avoid it being `npm install`ed
  localPlugins: []
};

[chrisdothtml]

@0x80 He was saying you could edit the CSS in your config to change the background color of span elements (the element those nano blocks are contained in).

You could do a quick fix by changing your termCSS property on line 28 to something like:

module.exports = {
  config: {
    ...
    termCSS: `
      span {
        background-color: transparent !important;
      }
    `,
    ...
  }
};

[rumpelsepp]

Same happens in vim.

[0x80]

@chrisdothtml Thanks that solved it for me!

How do you figure out that these blocks are targeted as spans?

[chrisdothtml]

If you open the dev tools via View > Toggle Developer Tools, you can inspect the HTML. This solution is a quick fix, but the issue is also happening to me, so probably should be fixed in hyper source code

[pbeshai]

Same thing happens with the cursor. Looks like color isn't set on anything.

[kannix]

Just wanted to add that changing the span color to background-color: transparent !important; does solve the problem in nano but will break curses based linux dialogs

[chrisdothtml]

As far as I can tell, hyper doesn't actually decide the output of it, but rather hterm does. It also seems to work mostly with inline CSS for the elements, so that makes it a bit difficult:

<span style="background-color: rgb(236, 239, 241);">^G</span> Get Help

The only thing I can think of is to convert the foregroundColor into rgb, then add a css rule that selects anything with that as the background color (this feels so wrong):

[style*="background-color: rgb(236, 239, 241)"] {
  background-color: transparent !important;
}

I wonder if other projects using hterm have this issue

[savtwo]

good stuff @chrisdothtml

[johnaoss]

@chrisdothtml Thank you for the fix!

It seems like foregroundColor is just changing the entire span to be the same color, rather than nano's typical behaviour.

Added note, it seemed to have worked on Hyper 0.7.1, and that this was a recent bug.

[taylorthurlow]

@chrisdothtml Worked great for the meantime. Looking forward to this getting released.

[rumpelsepp]

Does not seem to work here on Linux.

[matheuss]

@rumpelsepp looks like you're running an outdated version of my feature/windows-linux branch 😅

[rumpelsepp]

My git log thinks otherwise; see the screenshot :/

[riccardolardi]

Same issue here

[riccardolardi]

Adding span {background-color: transparent !important;} into termCSS property fixed it for me but it surely is a temporary dirty fix

[almsh]

Another slightly-less-dirty fix span[style="background-color: rgb(255, 255, 255);"] {color: black !important;}

[riccardolardi]

Any update on this? Still not resolved here on 1.0.1.1369 (MacOS)

[Rowno]

Hyper 1.0.1.1369 looks fine for me on MacOS 10.12.2.

[xamgore]

Seems that the issue is connected with #819, where people have the same problem on hyper + zsh + ohmyzsh.

[Hemphill]

This is still happening in v2, not sure why it's closed. #1894 is also closed but I don't see a real resolution there either.

[vgarzom]

Same error here!. I add this span[style*="background-color: rgb(255, 255, 255);"] {color: black !important;} and tried with [style*="background-color: rgb(255, 255, 255);"] {color: black !important;} but error is still happening.

Hyper version: 2.0.0
Plugins:
hyperpower (1.0.0),
hyper-material-theme (2.0.8),
hyper-tabs-enhanced (0.4.2),
hyper-statusline (1.7.6)

[olivermaton]

I've got the same issue, only noticed it once I installed ohmyzsh.

[stingalleman]

Hi, any update on this?

Config file:

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.

module.exports = {
  config: {
    // choose either `'stable'` for receiving highly polished,
    // or `'canary'` for less polished but more frequent updates
    updateChannel: 'stable',

    // default font size in pixels for all tabs
    fontSize: 12,

    // font family with optional fallbacks
    fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

    // default font weight: 'normal' or 'bold'
    fontWeight: 'normal',

    // font weight for bold characters: 'normal' or 'bold'
    fontWeightBold: 'bold',

    // line height as a relative unit
    lineHeight: 1,

    // letter spacing as a relative unit
    letterSpacing: 0,

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(255,255,255,0.8)',

    // terminal text color under BLOCK cursor
    cursorAccentColor: '#000',

    // `'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █
    cursorShape: 'BLOCK',

    // set to `true` (without backticks and without quotes) for blinking cursor
    cursorBlink: false,

    // color of the text
    foregroundColor: '#fff',

    // terminal background color
    // opacity is only supported on macOS
    backgroundColor: '#000',

    // terminal selection color
    selectionColor: 'rgba(248,28,229,0.3)',

    // border color (window, tabs)
    borderColor: '#333',

    // custom CSS to embed in the main window
    css: '',

    // custom CSS to embed in the terminal window
    termCSS: '[style*="background-color: rgb(255, 255, 255);"] {color: black !important;}',

    // if you're using a Linux setup which show native menus, set to false
    // default: `true` on Linux, `true` on Windows, ignored on macOS
    showHamburgerMenu: '',

    // set to `false` (without backticks and without quotes) if you want to hide the minimize, maximize and close buttons
    // additionally, set to `'left'` if you want them on the left, like in Ubuntu
    // default: `true` (without backticks and without quotes) on Windows and Linux, ignored on macOS
    showWindowControls: '',

    // custom padding (CSS format, i.e.: `top right bottom left`)
    padding: '0px 5px 13px',

    // the full list. if you're going to provide the full color palette,
    // including the 6 x 6 color cubes and the grayscale map, just provide
    // an array here instead of a color map object
    colors: {
      black: '#000000',
      red: '#C51E14',
      green: '#1DC121',
      yellow: '#C7C329',
      blue: '#0A2FC4',
      magenta: '#C839C5',
      cyan: '#20C5C6',
      white: '#C7C7C7',
      lightBlack: '#686868',
      lightRed: '#FD6F6B',
      lightGreen: '#67F86F',
      lightYellow: '#FFFA72',
      lightBlue: '#6A76FB',
      lightMagenta: '#FD7CFC',
      lightCyan: '#68FDFE',
      lightWhite: '#FFFFFF',
    },

    MaterialTheme: {
      // Set the theme variant,
      // OPTIONS: 'Darker', 'Palenight', 'Ocean', ''
      theme: 'Ocean',

      // [Optional] Set the rgba() app background opacity, useful when enableVibrance is true
      // OPTIONS: From 0.1 to 1
      backgroundOpacity: '0.2',

      // [Optional] Set the accent color for the current active tab
     // accentColor: '#64FFDA',

      // [Optional] Mac Only. Need restart. Enable the vibrance and blurred background
      // OPTIONS: 'dark', 'ultra-dark', 'bright'
      // NOTE: The backgroundOpacity should be between 0.1 and 0.9 to see the effect.
      vibrancy: 'dark'
  },

//  paneNavigation: {
//    debug: false,
//    hotkeys: {
//      navigation: {
//        up: 'ctrl+alt+up',
//        down: 'ctrl+alt+down',
//        left: 'ctrl+alt+left',
//        right: 'ctrl+alt+right'
//      },
//      jump_prefix: 'ctrl+alt', // completed with 1-9 digits
//      permutation_modifier: 'shift', // Added to jump and navigation hotkeys for pane permutation
//      maximize: 'meta+enter'
//    },
//    showIndicators: true, // Show pane number
//    indicatorPrefix: '^⌥', // Will be completed with pane number
//    indicatorStyle: { // Added to indicator <div>
//      position: 'absolute',
//      top: 0,
//      left: 0,
//      fontSize: '12px'
//    },
//   focusOnMouseHover: false,
//    inactivePaneOpacity: 0.6 // Set to 1 to disable inactive panes dimming
//  },

    // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
    // if left empty, your system's login shell will be used by default
    //
    // Windows
    // - Make sure to use a full path if the binary name doesn't work
    // - Remove `--login` in shellArgs
    //
    // Bash on Windows
    // - Example: `C:\\Windows\\System32\\bash.exe`
    //
    // PowerShell on Windows
    // - Example: `C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
    shell: '',

    // for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
    // by default `['--login']` will be used
    shellArgs: ['--login'],

    // for environment variables
    env: {},

    // set to `false` for no bell
    bell: 'SOUND',

    // if `true` (without backticks and without quotes), selected text will automatically be copied to the clipboard
    copyOnSelect: false,

    // if `true` (without backticks and without quotes), hyper will be set as the default protocol client for SSH
    defaultSSHApp: true,

    // if `true` (without backticks and without quotes), on right click selected text will be copied or pasted if no
    // selection is present (`true` by default on Windows and disables the context menu feature)
    // quickEdit: true,

    // URL to custom bell
    // bellSoundURL: 'http://example.com/bell.mp3',

    // for advanced config flags please refer to https://hyper.is/#cfg
  },

  // a list of plugins to fetch and install from npm
  // format: [@org/]project[#version]
  // examples:
  //   `hyperpower`
  //   `@company/project`
  //   `project#1.0.1`
  plugins: ["hyper-material-theme", "hyper-search", "hyperline"],



    //"verminal","hyper-transparent"],

  // in development, you can create a directory under
  // `~/.hyper_plugins/local/` and include it here
  // to load it and avoid it being `npm install`ed
  localPlugins: [],

  keymaps: {
    // Example
    // 'window:devtools': 'cmd+alt+o',
  },
};

[xamgore]

Great, the issue got closed without a fix or any explanation 🤦🏻‍♂️

[wbsmolen]

This is ongoing with similar issues at https://github.com/zeit/hyper/issues/819 and https://github.com/zeit/hyper/issues/838

Can this please be reopened?

[robthr]

Out of interest, did adding the termCSS background fix work for anyone? I'm on 3.0.0-canary.4 with the same issue.

[laszlokiraly]

this workaround helped me on macOS:
remove alpha from backgroundColor and restart hyper

since hyper.js is using xterm.js, this could be the original problem: https://github.com/xtermjs/xterm.js/issues/1898

[wbsmolen]

this workaround helped me on macOS:
remove alpha from backgroundColor and restart hyper

since hyper.js is using xterm.js, this could be the original problem: xtermjs/xterm.js#1898

This work around did not work for me on Mojave.

[blackfurrycat]

remove alpha from backgroundColor and restart

It works for me on Mojave, but I would prefer to keep alpha for my background color.

[dk0r]

Why is this issue still closed? Setting an alpha background, i.e. backgroundColor: 'rgba(11, 4, 10, 0.6)' still causes nano breakage in mac:

Nano breakage: https://i.imgur.com/9Nxccy3.jpg
.hyper.js: https://gist.github.com/dk0r/5cb0f237ca40ddc2eaf557031b13eaba

[versions]
macOS-10.14.5
hyper-3.0.2

[delewis13]

Broken for me.

macOS 10.14.6
hyper-3.0.2

.hyper.js https://gist.github.com/delewis13/99a37166e70c119669b9bdb723373bde
Screenshot same as dk0r

Running hyper + zsh + oh-my-zsh.

[reisdev]

Same problem here, none of the possible solutions worked!

Manjaro Linux 18.0.4
[email protected]

[dk0r]

It has been 3-years now so I suspect this issue will continue indefinitely.

Tried for so long to love you, hyperterm. RIP ⚰️

cmd+L, hyperterm alternatives 2019, enter

[erhuz]

I am not sure how, but I solved this a few months ago and forgot to post the answer. This is my HyperJS config and I am currently on Ubuntu 18.04. Hope this will help someone out.

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
​
module.exports = {
  config: {
    // choose either `'stable'` for receiving highly polished,
    // or `'canary'` for less polished but more frequent updates
    updateChannel: 'stable',
​
    // default font size in pixels for all tabs
    fontSize: 12,
​
    // font family with optional fallbacks
    fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
​
    // default font weight: 'normal' or 'bold'
    fontWeight: 'normal',
​
    // font weight for bold characters: 'normal' or 'bold'
    fontWeightBold: 'bold',
​
    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(248,28,229,0.8)',
​
    // terminal text color under BLOCK cursor
    cursorAccentColor: '#000',
​
    // `'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █
    cursorShape: 'BLOCK',
​
    // set to `true` (without backticks and without quotes) for blinking cursor
    cursorBlink: true,
​
    // color of the text
    foregroundColor: '#fff',
​
    // terminal background color
    // opacity is only supported on macOS
    backgroundColor: '#000',
​
    // terminal selection color
    selectionColor: 'rgba(248,28,229,0.3)',
​
    // border color (window, tabs)
    borderColor: '#333',
​
    // custom CSS to embed in the main window
    css: '.header_windowHeader{ background-color: #1b1b1b; color: #8d8d8d; } .header_appTitle{ font-size: 14px; }',
​
    // custom CSS to embed in the terminal window
    termCSS: '',
​
    // if you're using a Linux setup which show native menus, set to false
    // default: `true` on Linux, `true` on Windows, ignored on macOS
    showHamburgerMenu: true,
​
    // set to `false` (without backticks and without quotes) if you want to hide the minimize, maximize and close buttons
    // additionally, set to `'left'` if you want them on the left, like in Ubuntu
    // default: `true` (without backticks and without quotes) on Windows and Linux, ignored on macOS
    showWindowControls: true,
​
    // custom padding (CSS format, i.e.: `top right bottom left`)
    padding: '12px 14px',
​
    // the full list. if you're going to provide the full color palette,
    // including the 6 x 6 color cubes and the grayscale map, just provide
    // an array here instead of a color map object
    colors: {
      black       : '#000000',
      red         : '#C51E14',
      green       : '#1DC121',
      yellow      : '#C7C329',
      blue        : '#0A2FC4',
      magenta     : '#C839C5',
      cyan        : '#20C5C6',
      white       : '#C7C7C7',
      lightBlack  : '#686868',
      lightRed    : '#FD6F6B',
      lightGreen  : '#67F86F',
      lightYellow : '#FFFA72',
      lightBlue   : '#6A76FB',
      lightMagenta: '#FD7CFC',
      lightCyan   : '#68FDFE',
      lightWhite  : '#FFFFFF',
    },
​
    // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
    // if left empty, your system's login shell will be used by default
    //
    // Windows
    // - Make sure to use a full path if the binary name doesn't work
    // - Remove `--login` in shellArgs
    //
    // Bash on Windows
    // - Example: `C:\\Windows\\System32\\bash.exe`
    //
    // PowerShell on Windows
    // - Example: `C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
    shell: '',
​
    // for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
    // by default `['--login']` will be used
    shellArgs: ['--login'],
​
    // for environment variables
    env: {},
​
    // set to `false` for no bell
    bell: 'SOUND',
​
    // if `true` (without backticks and without quotes), selected text will automatically be copied to the clipboard
    copyOnSelect: false,
​
    // if `true` (without backticks and without quotes), hyper will be set as the default protocol client for SSH
    defaultSSHApp: true,
​
    // if `true` (without backticks and without quotes), on right click selected text will be copied or pasted if no
    // selection is present (`true` by default on Windows and disables the context menu feature)
    // quickEdit: true,
​
    // URL to custom bell
    // bellSoundURL: 'http://example.com/bell.mp3',
​
    // for advanced config flags please refer to https://hyper.is/#cfg
  },
​
  // a list of plugins to fetch and install from npm
  // format: [@org/]project[#version]
  // examples:
  //   `hyperpower`
  //   `@company/project`
  //   `project#1.0.1`
  plugins: [],
​
  // in development, you can create a directory under
  // `~/.hyper_plugins/local/` and include it here
  // to load it and avoid it being `npm install`ed
  localPlugins: [],
​
  keymaps: {
    // Example
    // 'window:devtools': 'cmd+alt+o',
    'window:devtools': 'ctrl+alt+o',
  },
};

[Kinark]

This happens when using vibrancy. Does someone know how to keep the vibrancy but fix the texts issue?

[erhuz]

@Kinark I've looked into that and have not found a solution yet. But it seems like Hyper handles vibrancy differently on different operating systems. What's your OS and do you have any custom css in your hyper config?

[Kinark]

@erhuz I'm on MacOS Catalina. No custom CSS :(
Just using simple vibrancy plug-in.

[agypsydiver]

macOS Catalina
zsh + ohmyzsh
hyper 3.0.1
Updating to Hyper 3.1.0-canary.4 fixed the issue (:

[erhuz]

@Kinark When I was on MacOS and using hyper with any sort of vibrancy it messed with the foreground color, I have not fix for it except to not use any sort of vibrancy. Sorry :/

[vgarzom]

macOS Catalina
zsh + ohmyzsh
hyper 3.0.1
Updating to Hyper 3.1.0-canary.4 fixed the issue (:

Unfortunately the problem persist for me after updating to Hyper 3.1.0-canary.4. I'm using macOs Mojave 10.14.6, And it is not possible for now update to MacOS Catalina.

[naquiroz]

Why is this issue close? This is still a problem in the sable version and canary

[lopugit]

For people wanting transparency and a fix, if you disable hyper-transparent-vibrancy but enable hyper-opacity it gives you opacity and makes nano text visible. no termCSS needed