├── .gitignore ├── .npmrc ├── screen.png ├── index.js ├── plugin.json ├── package.json ├── README.md └── lib ├── theme.js └── theme.test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | save-exact=true 2 | -------------------------------------------------------------------------------- /screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erikmueller/an-old-hype/HEAD/screen.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const theme = require('./lib/theme') 2 | 3 | exports.decorateConfig = config => Object.assign({}, config, theme(config)) 4 | -------------------------------------------------------------------------------- /plugin.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "an-old-hype", 3 | "description": "Customizable Hyper theme inspired by a galaxy far far away...", 4 | "type": "theme", 5 | "preview": "https://cdn.jsdelivr.net/gh/erikmueller/an-old-hype/screen.png", 6 | "colors": [ 7 | "#ef7c2a", 8 | "#4fb4d8", 9 | "#848794" 10 | ], 11 | "dateAdded": "1524048709796" 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "an-old-hype", 3 | "version": "0.1.6", 4 | "description": "Hyper theme inspired by a galaxy far far away...", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "standard && ava" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://erikmueller@github.com/erikmueller/an-old-hype.git" 12 | }, 13 | "keywords": [ 14 | "hyper", 15 | "terminal", 16 | "term", 17 | "hyperterm", 18 | "hyperterm-theme", 19 | "theme", 20 | "starwars" 21 | ], 22 | "author": "erikmueller", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/erikmueller/an-old-hype/issues" 26 | }, 27 | "homepage": "https://github.com/erikmueller/an-old-hype#readme", 28 | "devDependencies": { 29 | "ava": "0.17.0", 30 | "standard": "8.6.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # An old Hype 2 | 3 | [![CircleCI](https://circleci.com/gh/erikmueller/an-old-hype.svg?style=svg)](https://circleci.com/gh/erikmueller/an-old-hype) 4 | 5 | > Hyper theme inspired by a galaxy far far away... 6 | 7 | Based on [An Old Hope](https://github.com/JesseLeite/an-old-hope-syntax-atom) - a splendid atom syntax theme by Jesse Leite 8 | 9 | ## Usage 10 | 11 | Open the `~/.hyper.js` file (on Mac you can simply press `Cmd`+`,`) and go to the plugins section and add 12 | 13 | 14 | ```js 15 | plugins: ['an-old-hype'] 16 | ``` 17 | 18 | to the plugins array. 19 | 20 | ## Features 21 | 22 | * __Transparent background__ - Opacity can be customized 23 | * __Visible divider__ - lets you see where tiled terminals begin and end 24 | * __6 theme styles to choose from__ 25 | * `vader` 26 | * `yoda` 27 | * `threePO` 28 | * `r2` 29 | * `luke` (default) 30 | * `falcon` 31 | 32 | ## Settings 33 | 34 | You can customize the __background opacity__ and the __style__ as well as the __active tab marker__. 35 | To do so, provide a `themeSettings` object in the `config` property of your `~/.hyper.js`: 36 | 37 | ```js 38 | 39 | config: { 40 | ... 41 | // Customize the theme 42 | themeSettings: { 43 | // Do not make background transparent (default is 0.6) 44 | opacity: 1, 45 | // Switch from luke's orange uniform to master yoda (check the available styles above) 46 | style: 'yoda', 47 | // Change the character that mars a tab active 48 | tabActiveMarker: '💁' 49 | }, 50 | ... 51 | } 52 | ``` 53 | 54 | ## Screenshot 55 | 56 | ![](screen.png) 57 | 58 | `oh-my-zsh` with the `pure` prompt and `Hasklig` font 59 | -------------------------------------------------------------------------------- /lib/theme.js: -------------------------------------------------------------------------------- 1 | // 2 | // Hyper term theme inspired by a galaxy far far away... 3 | // Based on the awesome `an-old-hope` atom syntax theme by Jesse Leite 4 | // 5 | 6 | const colors = { 7 | vader: '#eb3d54', 8 | yoda: '#78bd65', 9 | threePO: '#e5cd52', 10 | r2: '#4fb4d8', 11 | luke: '#ef7c2a', 12 | falcon: { 13 | white: '#cbcdd2', 14 | silver: '#848794', 15 | grey: '#686b78', 16 | black: '#1c1d21' 17 | } 18 | } 19 | 20 | module.exports = config => { 21 | const themeSettings = config.themeSettings || {} 22 | const tabActiveMarker = typeof themeSettings.tabActiveMarker === 'string' 23 | ? themeSettings.tabActiveMarker 24 | : '►' 25 | const backgroundColor = `rgba(0, 0, 0, ${themeSettings.opacity || 0.6})` 26 | const styleColor = themeSettings.style === 'falcon' 27 | ? colors.falcon.silver 28 | : colors[themeSettings.style || 'luke'] 29 | 30 | return { 31 | backgroundColor, 32 | foregroundColor: colors.falcon.white, 33 | borderColor: colors.falcon.grey, 34 | cursorColor: styleColor, 35 | colors: { 36 | black: colors.falcon.black, 37 | red: colors.vader, 38 | green: colors.yoda, 39 | yellow: colors.threePO, 40 | blue: colors.r2, 41 | magenta: colors.luke, 42 | cyan: colors.r2, 43 | white: colors.falcon.white, 44 | lightBlack: colors.falcon.grey, 45 | lightRed: colors.vader, 46 | lightGreen: colors.yoda, 47 | lightYellow: colors.threePO, 48 | lightBlue: colors.r2, 49 | lightMagenta: colors.luke, 50 | lightCyan: colors.r2, 51 | lightWhite: colors.falcon.white 52 | }, 53 | termCSS: ` 54 | ${config.termCSS || ''} 55 | .terminal .xterm-selection div { 56 | background-color: ${styleColor}; 57 | } 58 | `, 59 | css: ` 60 | ${config.css || ''} 61 | .tab_tab:not(.tab_active) { 62 | color: ${colors.falcon.silver}; 63 | } 64 | .tab_textActive .tab_textInner::before { 65 | color: ${styleColor}; 66 | content: "${tabActiveMarker} "; 67 | } 68 | .splitpane_divider { 69 | background-color: ${colors.falcon.grey} !important; 70 | } 71 | ` 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /lib/theme.test.js: -------------------------------------------------------------------------------- 1 | import test from 'ava' 2 | import theme from './theme' 3 | 4 | const defaultStyle = 'luke' 5 | const defaultOpacity = 0.6 6 | const calcBgColor = opac => `rgba(0, 0, 0, ${opac})` 7 | const defaultTabActiveMarker = '►' 8 | const defaultColors = { 9 | vader: '#eb3d54', 10 | yoda: '#78bd65', 11 | threePO: '#e5cd52', 12 | r2: '#4fb4d8', 13 | luke: '#ef7c2a', 14 | falcon: { 15 | white: '#cbcdd2', 16 | silver: '#848794', 17 | grey: '#686b78', 18 | black: '#1c1d21' 19 | } 20 | } 21 | 22 | const getMarker = css => 23 | (css.match(/content: "(.+)";/) || [])[1] 24 | const getMarkerColor = css => 25 | (css.match(/.tab_textActive.*[\s]*color: (.+);/) || [])[1] 26 | 27 | test('we have the correct starwars colors', t => { 28 | const {colors} = theme({}) 29 | 30 | t.is(colors.red, defaultColors.vader) 31 | t.is(colors.green, defaultColors.yoda) 32 | t.is(colors.yellow, defaultColors.threePO) 33 | t.is(colors.blue, defaultColors.r2) 34 | t.is(colors.magenta, defaultColors.luke) 35 | t.is(colors.cyan, defaultColors.r2) 36 | t.is(colors.white, defaultColors.falcon.white) 37 | t.is(colors.lightRed, defaultColors.vader) 38 | t.is(colors.lightGreen, defaultColors.yoda) 39 | t.is(colors.lightYellow, defaultColors.threePO) 40 | t.is(colors.lightBlue, defaultColors.r2) 41 | t.is(colors.lightMagenta, defaultColors.luke) 42 | t.is(colors.lightCyan, defaultColors.r2) 43 | t.is(colors.lightWhite, defaultColors.falcon.white) 44 | }) 45 | 46 | test('style returns default config', t => { 47 | const {cursorColor, css} = theme({}) 48 | const markerColor = getMarkerColor(css) 49 | const expectedColor = defaultColors[defaultStyle] 50 | 51 | t.is(cursorColor, expectedColor) 52 | t.is(markerColor, expectedColor) 53 | }) 54 | 55 | test('style returns "yoda" config', t => { 56 | const {cursorColor, css} = theme({themeSettings: {style: 'yoda'}}) 57 | const markerColor = getMarkerColor(css) 58 | const expectedColor = defaultColors.yoda 59 | 60 | t.is(cursorColor, expectedColor) 61 | t.is(markerColor, expectedColor) 62 | }) 63 | 64 | test('style returns "falcon" config', t => { 65 | const {cursorColor, css} = theme({themeSettings: {style: 'falcon'}}) 66 | const markerColor = getMarkerColor(css) 67 | const expectedColor = defaultColors.falcon.silver 68 | 69 | t.is(cursorColor, expectedColor) 70 | t.is(markerColor, expectedColor) 71 | }) 72 | 73 | test('returns default background color', t => { 74 | const {backgroundColor} = theme({}) 75 | 76 | t.is(backgroundColor, calcBgColor(defaultOpacity)) 77 | }) 78 | 79 | test('returns background with custom opacity', t => { 80 | const opacity = 1 81 | const {backgroundColor} = theme({themeSettings: {opacity}}) 82 | 83 | t.is(backgroundColor, calcBgColor(opacity)) 84 | }) 85 | 86 | test('returns default active marker', t => { 87 | const {css} = theme({}) 88 | const marker = getMarker(css) 89 | 90 | t.is(marker, `${defaultTabActiveMarker} `) // note the space 91 | }) 92 | 93 | test('returns custom active marker', t => { 94 | const tabActiveMarker = '💁' 95 | const {css} = theme({themeSettings: {tabActiveMarker}}) 96 | const marker = getMarker(css) 97 | 98 | t.is(marker, `${tabActiveMarker} `) // note the space (again) 99 | }) 100 | --------------------------------------------------------------------------------