Criando um tema para o Hyperterm

O Hyperterm é um terminal desenvolvido com JavaScript/HTML/CSS, ou seja, baseado em padrões Web. O objetivo do projeto, crido pelo pessoal da Zeit, é criar uma experiência bonita e extensível para a interface de linha de comando. Inicialmente o projeto apenas funcionava no macOS, mas agora já está disponível para Linux (para Windows deve sair logo).

Uma das funcionalidades legais do Hyperterm é o poder de criar plugins e temas. A API é relativamente fácil e nos permite criar algo simples em poucos minutos. Plugins do Hyperterm são módulos do npm, e não é preciso nem instalar nada. Por exemplo, veja no Gif abaixo como instalar o tema hyperyellow:

Basta adicionar o nome do plugin no arquivo de configuração do Hyperterm (~/.hyperterm.js) para que o mesmo seja instalado. Fácil né?

Como temas são apenas plugins, a API é a mesma ao desenvolve-lo. Em um tema precisamos definir o hook decorateConfig.

exports.decorateConfig = (config) => {   return Object.assign({}, config, {   }); } 

Eu criei um tema inspirado nas cores do BrazilJS para ver o ecosistema do Hyperterm em ação, vejam como ficou:

Para instala-lo, basta adiciona-lo na lista de plugins (~/.hyperterm.js). javascript plugins: ['hyperterm-theme-braziljs']

O código para este tema segue abaixo:

exports.decorateConfig = (config) => {   return Object.assign({}, config, {     cursorColor: '#ffde17',     fontSize: 12,     windowSize: [680, 450],     fontFamily: 'Roboto+Condensed, Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',     cursorShape: 'BLOCK',     foregroundColor: '#fff',     backgroundColor: '#000',     borderColor: '',     padding: '0px 0px',     css: `       ${config.css || ''}       .tabs_nav .tabs_list .tab_text {         color: yellow;       }       .tabs_nav .tabs_title {         color: yellow;       }       .hyperterm_main.main_b54qtm {         background-image: url(data:image/png;base64)         background-size: 80px 60px, cover;       }       .term_fit.fit_1ssoezr.term_term.term_13hv8io {         opacity: 0.9;       }     `,     termCSS: `       .hyperterm_main.main_b54qtm {         background-image: url('https://braziljs.org/assets/images/braziljs.svg');       }     `     },     shell: ''   }); } 

Notem que estamos apenas sobrescrevendo valores de configuração Hyperterm no nosso tema. Seja criativo e crie o seu baseado em suas preferências, ou use este do BrazilJS :)