Skip to content
This repository has been archived by the owner on May 21, 2019. It is now read-only.

The most hackable theme for your favorite terminal Hyper

License

Notifications You must be signed in to change notification settings

jerrykal/hyper-material-box

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

hyper-material-box npm npm

The most hackable theme for your favorite terminal Hyper

top

🏁 Let's jump right in

All you need is two simple steps !!

πŸ“₯ Installation

Just add the following script to your .hyper.js:

module.exports = {
  plugins: [ 'hyper-material-box' ],
}

Restart your Hyper.app.
Done πŸŽ‰

πŸ”§ Config

You can add the following scripts to your .hyper.js, if you like what you see.

πŸ”§ Color Scheme

The default color scheme is solarized-dark.

Currently, we provide our user over 30 beautiful color schemes (click the name to see the screenshot):

For example, if you like the material color scheme, you can add the following script:

module.exports = {
  config: {
    materialBox: {
      scheme: 'material',
    }
  }
}

material

πŸ”§ User

You can override the default color scheme with the user section.

If your favorite color scheme isn't in the list, you can create a new scheme by yourself,
for example you can add the following script instead adding scheme: 'material':

module.exports = {
  config: {
    materialBox: {
      user: {
        colors: {
          black: '#263238',
          red: '#FF5370',
          green: '#C3E88D',
          yellow: '#FFCB6B',
          blue: '#82AAFF',
          magenta: '#F07178',
          cyan: '#89DDFF',
          white: '#EEFFFF',
          lightBlack: '#546E7A',
          lightRed: '#FF5370',
          lightGreen: '#C3E88D',
          lightYellow: '#FFCB6B',
          lightBlue: '#82AAFF',
          lightMagenta: '#F07178',
          lightCyan: '#89DDFF',
          lightWhite: '#EEFFFF',
        },

        // Default
        backgroundColor: '#263238',
        foregroundColor: '#CCCCCC',
        cursorColor: '#EEFFFF',
        borderColor: 'transparent',

        // Accent color
        accentColor: '#80CBC4',

        // Other (optional, it will be override by foregroundColor)
        tabTitleColor: 'rgba(255, 255, 255, 0.2)',
        selectedTabTitleColor: '#EEFFFF',

        // css (optional)
        css: '',
        termCSS: '',
      }
    }
  }
}

πŸ”§ Selected Tab Flavor

The default selected tab flavor is underline.

You can change the selected tab flavor by set the selectedTabFlavor to preline, overline, filled or none:

module.exports = {
  config: {
    materialBox: {
      selectedTabFlavor: 'preline',
    }
  }
}

preline_tab_flavor

module.exports = {
  config: {
    materialBox: {
      selectedTabFlavor: 'overline',
    }
  }
}

overline_tab_flavor

module.exports = {
  config: {
    materialBox: {
      selectedTabFlavor: 'filled',
    }
  }
}

filled_tab_flavor

module.exports = {
  config: {
    materialBox: {
      selectedTabFlavor: 'none',
    }
  }
}

none_tab_flavor

πŸ”§ Highlight Selected Tab

highlight selected tab is disable by default

You can highlight the selected tab by set highlightSelectedTab to true:

module.exports = {
  config: {
    materialBox: {
      highlightSelectedTab: true,
    }
  }
}

highlight_active_tab

πŸ”§ Display Border

The border is hide by default.

You can enable the border by set the displayBorder to true:

module.exports = {
  config: {
    materialBox: {
      displayBorder: true,
    }
  }
}

display_border

πŸ”§ Accent Color

You can change the accent color by set the user: { accentColor } to another color:

module.exports = {
  config: {
    materialBox: {
      user: {
        accentColor: 'red',
      }
    }
  }
}

accent_color_red

πŸ”§ Light Effect

The overline selected tab flavors doesn't support light effect.

You can enable the light effect by set the lightEffect to true:

module.exports = {
  config: {
    materialBox: {
      lightEffect: true,
    }
  }
}

light_effect

πŸ”§ Background Opacity

The default background opacity is 1.0.

You can change the background opacity by set the backgroundOpacity to 0.1 ~ 0.9:

module.exports = {
  config: {
    materialBox: {
      backgroundOpacity: 0.5,
    }
  }
}

background_opacity

πŸ”§ Background Vibrancy

Background vibrancy only available when background opacity value is between 0.1 ~ 0.9

You can enable the background vibrancy by set the backgroundVibrancy to true:

module.exports = {
  config: {
    materialBox: {
      backgroundVibrancy: true,
    }
  }
}

background_vibrancy

πŸ”§ Auto Hide Title

auto hide title is disable by default

You can set the autoHideTitle to true, it will hide the title when the window only has one tab:

module.exports = {
  config: {
    materialBox: {
      autoHideTitle: true,
    }
  }
}

auto_hide_title

πŸ”§ Hide Traffic-Lights

hide traffic light is disable by default

If you want to hide the traffic-lights, you can set the hideTrafficLights to true:

module.exports = {
  config: {
    materialBox: {
      hideTrafficLights: true,
    }
  }
}

hide_traffic_lights

πŸ”§ Other

πŸ”§ Left Close Button

left close button is disable by default

If you like the left close button, you can set the closeOnTheLeft to true:

module.exports = {
  config: {
    materialBox: {
      closeOnTheLeft: true,
    }
  }
}

❀️ Contributing to hyper-material-box

You can contribute your own color scheme to this project, see the CONTRIBUTING.md for more details.

⚑ Credit

⚑ The 80rave color scheme contributed by @PetrBarborka
⚑ The apex color scheme inspired by apex/apex-syntax
⚑ The auto hide title inspired by sindresorhus/hyper-hide-title
⚑ The base16 color scheme family inspired by Base16
⚑ The dracula color scheme inspired by Dracula β€” A dark theme for Atom, Alfred, Brackets, Emacs, iTerm ...
⚑ The gruvbox color scheme family inspired by Briles/gruvbox-atom
⚑ The hide traffic-lights inspired by albinekb/hyperclean
⚑ The left close button inspired by jhen0409/hyperterm-close-on-left
⚑ The light effect inspired by simeydotme/hyperterm-gooey
⚑ The material color scheme family inspired by equinusocio/material-theme
⚑ The material UI inspired by equinusocio/hyper-material-theme
⚑ The matrix color scheme inspired by giuseppeg/hyperterm-green
⚑ The monokai color scheme inspired by the most popular color scheme for Sublime Text
⚑ The nord color scheme inspired by arcticicestudio/nord-hyper
⚑ The one-dark color scheme inspired by atom/one-dark-syntax
⚑ The one-light color scheme inspired by atom/one-light-syntax
⚑ The overline selected tab flavor inspired by pauldariye/hyper-midnight
⚑ The predawn color scheme inspired by jamiewilson/predawn-hyperterm
⚑ The preline selected tab flavor inspired by Kikobeats/hyper-flat
⚑ The seti color scheme inspired by jesseweed/seti-syntax
⚑ The snazzy color scheme contributed by @stoe
⚑ The solarized color scheme faimly inspired by Solarized - Ethan Schoonover
⚑ The tomorrow color scheme family inspired by chriskempson/tomorrow-theme

❀️ Thank you guys, you guys are all amazing !!! ❀️

πŸ“„ License

This project is licensed under the MIT License, please see the πŸ“„LICENSE.md for more details πŸ‘

About

The most hackable theme for your favorite terminal Hyper

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •