Scanline theme for Hyper terminal is a terminal built on web technologies, namely Electron. As such, it can be customized using CSS. Here’s a screenshot of Hyper with scanlines, made possible through CSS:


And here’s the config file for that:

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See 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: 26,
// font family with optional fallbacks
fontFamily: '"Fira Code iScript", "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(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(150,150,150,0.3)',
// border color (window, tabs)
borderColor: '#333',
// custom CSS to embed in the main window
css: `
header.header_header {
opacity: 0;
.terms_terms {
margin-top: 16px !important;
margin-left: 8px !important;
background: linear-gradient(45deg,
rgba(14,14,14,1) 0%,
rgba(78,92,90,1) 18%,
rgba(130,157,152,1) 33%,
rgba(142,166,162,1) 50%,
rgba(153,175,171,1) 67%,
rgba(174,191,188,1) 78%,
rgba(216,224,222,1) 100%);
box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
mix-blend-mode: overlay;
box-shadow: inset 0 0 100px black;
@keyframes scan {
0% { background-position-y: 0px; }
50% { background-position-y: 100px; }
100% { background-position-y: 0px; }
.hyper_main::after {
background-color: lightgreen;
content: "";
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
pointer-events: none;
background-image: linear-gradient( to bottom, #444, #444 50%, #555 50%, #555);
background-size: 100% 6px;
background-position-y: 0px;
background-blend-mode: multiply;
mix-blend-mode: hard-light;
animation: scan 20s linear infinite;
.terminal.xterm {
mix-blend-mode: color-dodge;
// 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: '',
// 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: false,
// custom padding (CSS format, i.e.: `top right bottom left`)
padding: '0px',
// 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: '',
// for advanced config flags please refer to
// 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',

To use it:

  1. Open Hyper terminal and press CTRL , to open preferences file.
  2. Copy and paste the code above to replace existing preferences (or just copy-paste over the ‘css’ section.

That’s it.

NOTE: The subtle scanline animation is a bit of a drain on the CPU but it can be disabled  replacing line 89 with ‘animation: none;’


Scanline theme for Hyper terminal

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s