vercel / hyper

A terminal built on web technologies
https://hyper.is
MIT License
43.27k stars 3.52k forks source link

[Mac] Dark mouse cursor is hard to see on dark background #1045

Open flowmemo opened 7 years ago

flowmemo commented 7 years ago

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)

flowmemo commented 7 years ago

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 )

moeriki commented 7 years ago

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

    termCSS: `
      * {
        cursor: default;
      }
      x-row span {
        cursor: text;
      }
    `,
dimitrieh commented 7 years ago

iterm2 does this really well

rianquinn commented 6 years ago

The fix works, but this bug was really annoying.

Anand-Moghe commented 6 years ago

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

scmx commented 6 years ago

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)

chrismendis commented 5 years ago

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; }
    `,
tanya355 commented 4 years ago

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