Hyper: [Mac] Dark mouse cursor is hard to see on dark background

Created on 26 Nov 2016  路  8Comments  路  Source: vercel/hyper

  • [x] I am on the latest Hyper.app version
  • [x] I have searched the issues of this repo and believe that this is not a duplicate
  • OS version and name: OS X 10.11.6
  • Hyper.app version: 0.8.3 (0.8.3.873)
  • The issue is reproducible in vanilla Hyper.app:

Issue


Hyper is cool! But I find the default mouse cursor of OS X is hard to see on dark background, especially when the screen is full of text.

screenshot

System-provided terminal and iTerm2 use custom image of mouse cursor like this:
d8e6e8a5d739406d33fc23d322e480cf-render
(source: https://github.com/gnachman/iTerm2/blob/master/images/IBarCursor-huge.psd)

help wanted Mac Enhancement

Most helpful comment

Some text editors like VS Code, Sublime Text have both white and black mouse cursor. They choose color against the background color of theme.

A temporary workaround is adding the following css into termCSS , which replace the original cursor with the white one in vscode.

 * { cursor: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAL0lEQVQoz2NgCD3x//9/BhBYBWdhgFVAiVW4JBFKGIa4AqD0//9D3pt4I4tAdAMAHTQ/j5Zom30AAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAz0lEQVRIx2NgYGBY/R8I/vx5eelX3n82IJ9FxGf6tksvf/8FiTMQAcAGQMDvSwu09abffY8QYSAScNk45G198eX//yev73/4///701eh//kZSARckrNBRvz//+8+6ZohwCzjGNjdgQxkAg7B9WADeBjIBqtJCbhRA0YNoIkBSNmaPEMoNmA0FkYNoFKhapJ6FGyAH3nauaSmPfwI0v/3OukVi0CIZ+F25KrtYcx/CTIy0e+rC7R1Z4KMICVTQQ14feVXIbR695u14+Ir4gwAAD49E54wc1kWAAAAAElFTkSuQmCC') 2x) 5 8, text; }

(source:
https://github.com/Microsoft/vscode/blob/master/src/vs/editor/browser/viewParts/lines/viewLines.css#L45
https://github.com/Microsoft/vscode/issues/754 )

All 8 comments

Some text editors like VS Code, Sublime Text have both white and black mouse cursor. They choose color against the background color of theme.

A temporary workaround is adding the following css into termCSS , which replace the original cursor with the white one in vscode.

 * { cursor: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAL0lEQVQoz2NgCD3x//9/BhBYBWdhgFVAiVW4JBFKGIa4AqD0//9D3pt4I4tAdAMAHTQ/j5Zom30AAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAz0lEQVRIx2NgYGBY/R8I/vx5eelX3n82IJ9FxGf6tksvf/8FiTMQAcAGQMDvSwu09abffY8QYSAScNk45G198eX//yev73/4///701eh//kZSARckrNBRvz//+8+6ZohwCzjGNjdgQxkAg7B9WADeBjIBqtJCbhRA0YNoIkBSNmaPEMoNmA0FkYNoFKhapJ6FGyAH3nauaSmPfwI0v/3OukVi0CIZ+F25KrtYcx/CTIy0e+rC7R1Z4KMICVTQQ14feVXIbR695u14+Ir4gwAAD49E54wc1kWAAAAAElFTkSuQmCC') 2x) 5 8, text; }

(source:
https://github.com/Microsoft/vscode/blob/master/src/vs/editor/browser/viewParts/lines/viewLines.css#L45
https://github.com/Microsoft/vscode/issues/754 )

Agreed. I use this to mostly have the default cursor.

    termCSS: `
      * {
        cursor: default;
      }
      x-row span {
        cursor: text;
      }
    `,

iterm2 does this really well

The fix works, but this bug was really annoying.

The issue is with mouse pointer and not the terminal cursor. The termCSS fix is not working on my hyper.js terminal.

The currently proposed solutions didn't work for me until I moved the rules to css: instead of termCSS:.

~/.hyper.js https://gist.github.com/scmx/42c1c4878caa45033eb2fe7d539db869

css: `
  .xterm {
    cursor: default;
  }
`,

(Hyper 2.0.0 Stable)

If you'd like to use the white cursor as mentioned in https://github.com/zeit/hyper/issues/1045#issuecomment-263049122, then this the configuration that worked for me:

    // custom css to embed in the main window
    css: `
      * { cursor: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAL0lEQVQoz2NgCD3x//9/BhBYBWdhgFVAiVW4JBFKGIa4AqD0//9D3pt4I4tAdAMAHTQ/j5Zom30AAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAz0lEQVRIx2NgYGBY/R8I/vx5eelX3n82IJ9FxGf6tksvf/8FiTMQAcAGQMDvSwu09abffY8QYSAScNk45G198eX//yev73/4///701eh//kZSARckrNBRvz//+8+6ZohwCzjGNjdgQxkAg7B9WADeBjIBqtJCbhRA0YNoIkBSNmaPEMoNmA0FkYNoFKhapJ6FGyAH3nauaSmPfwI0v/3OukVi0CIZ+F25KrtYcx/CTIy0e+rC7R1Z4KMICVTQQ14feVXIbR695u14+Ir4gwAAD49E54wc1kWAAAAAElFTkSuQmCC') 2x) 5 8, text; }
    `,

If you'd like to use the white cursor as mentioned in #1045 (comment), then this the configuration that worked for me:

    // custom css to embed in the main window
    css: `
      * { cursor: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAL0lEQVQoz2NgCD3x//9/BhBYBWdhgFVAiVW4JBFKGIa4AqD0//9D3pt4I4tAdAMAHTQ/j5Zom30AAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAz0lEQVRIx2NgYGBY/R8I/vx5eelX3n82IJ9FxGf6tksvf/8FiTMQAcAGQMDvSwu09abffY8QYSAScNk45G198eX//yev73/4///701eh//kZSARckrNBRvz//+8+6ZohwCzjGNjdgQxkAg7B9WADeBjIBqtJCbhRA0YNoIkBSNmaPEMoNmA0FkYNoFKhapJ6FGyAH3nauaSmPfwI0v/3OukVi0CIZ+F25KrtYcx/CTIy0e+rC7R1Z4KMICVTQQ14feVXIbR695u14+Ir4gwAAD49E54wc1kWAAAAAElFTkSuQmCC') 2x) 5 8, text; }
    `,

where would you have to add this code? im on a mac High Sierra and have the cursor visibility problem on vs code

Was this page helpful?
0 / 5 - 0 ratings