Issue: No theme within the terminal on Hyper 2 Canary releases

[easilyBaffled]

Description

I've just installed (and reinstalled) hyper-pokemon and I've set up my .hyper.js as specified in the Usage section but I am not seeing the theme in the terminal. The tabs are styled properly, I've even got the poketab( and love it! ), but nothing inside the terminal. I'm using: Hyper 2.1.1, hyper-pokemon 0.3.4, Mac ElCapitan 10.11.6

I have checked the package in~/.hyper_plugins/node_modules/hyper-pokemon everything seems to be in order there. There's nothing strange in the app console as far as I can tell.

I'm just getting started using Hyper, so I'm not sure where else I should look for the issue.

.hyper.js

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

    // 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: 'rgba(248,28,229,0.8)',

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

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

    // terminal background color
    backgroundColor: '#000',

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

    // custom css to embed in the main window
    css: 'text-shadow: 0px 0px 15px rgb(255, 255, 255);',

    // 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: '#000000',
      red: '#ff0000',
      green: '#33ff00',
      yellow: '#ffff00',
      blue: '#0066ff',
      magenta: '#cc00ff',
      cyan: '#00ffff',
      white: '#d0d0d0',
      lightBlack: '#808080',
      lightRed: '#ff0000',
      lightGreen: '#33ff00',
      lightYellow: '#ffff00',
      lightBlue: '#0066ff',
      lightMagenta: '#cc00ff',
      lightCyan: '#00ffff',
      lightWhite: '#ffffff'
    },
      pokemon: 'pikachu', // Define your favorite pokemon theme
      pokecursor: 'true', // Activate your theme's pokecursor
      pokemonSyntax: 'dark', // Define the color of the terminal tabs
      unibody: 'true', // Define the color of the Hyper window header
      poketab: 'true',

    // 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: '/bin/zsh',

    // 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://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-pokemon'],

  // 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: []
};

[klaudiosinani]

@easilyBaffled At this moment, the theme supports only the stable channel of Hyper, which includes all releases where their first/major semantic natural number is less than 2.X.X, so downgrading to the latest stable release 1.4.8 should fix the issue : )

[easilyBaffled]

@klauscfhq thanks for the quick solution. I have a few days left before I start my new job, meaning I have a few days of free time left. Do you know why it doesn't work with the latest versions of Hyper? I'd like to help.

[easilyBaffled]

After playing around a bit I found that, at least part of it, was my own fault. In my .hyper.js config I had css: 'text-shadow: 0px 0px 15px rgb(255, 255, 255);', which is not a valid css rule so when it got combined in

css: `
                ${config.css || ''}
                .terms_terms {
                  background: url("file://${pathToTheme}") center;
                  background-size: cover;
                }

that whole block of styling was made in valid.

As for the cursor, I believe the new class name is .terminal-cursor, but I'm still playing with that.

[klaudiosinani]

Fixed on c2ba434.