├── .eslintrc ├── .gitignore ├── README.md ├── index.js └── package.json /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb-base", 3 | "rules": { 4 | "comma-dangle": 0, 5 | "object-shorthand": 0, 6 | "arrow-parens": [2, "always"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `hyperterm-spacegray` 2 | 3 | ![Spacegray Theme in Action](https://cloud.githubusercontent.com/assets/7525670/16979989/4ddde96e-4e64-11e6-8383-fd48a942ae53.png) 4 | 5 | A port of the Spacegray theme to hyperterm, optimized for terminal usage. 6 | 7 | Contributions appreciated! 8 | 9 | ## Installation 10 | 11 | Add this to the plugins array in your `.hyperterm.js` and reload hyperterm to install it! 12 | 13 | ![Spacegray Theme Installation Instructions](https://cloud.githubusercontent.com/assets/7525670/16980506/95a69974-4e66-11e6-8eaa-162f01062273.gif) 14 | 15 | # License 16 | 17 | Licensed under the MIT license. 18 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // Constants 2 | const backgroundColor = '#343d46'; 3 | const foregroundColor = '#c0c5ce'; 4 | const darkerBackground = '#2F3841'; 5 | const borderColor = '#4f5b66'; 6 | 7 | // Colors 8 | const RED = '#B4656F'; 9 | const GREEN = '#68A281'; 10 | const YELLOW = '#E2EB98'; 11 | const BLUE = '#5786B8'; 12 | const PINK = '#E0BAD7'; 13 | const CYAN = '#38CCD1'; 14 | const LIGHT_GRAY = foregroundColor; 15 | const MEDIUM_GRAY = '#878C96'; 16 | const WHITE = '#ffffff'; 17 | 18 | const colors = { 19 | black: backgroundColor, 20 | red: RED, 21 | green: GREEN, 22 | yellow: YELLOW, 23 | blue: BLUE, 24 | magenta: PINK, 25 | cyan: CYAN, 26 | white: LIGHT_GRAY, 27 | lightblack: MEDIUM_GRAY, 28 | lightRed: RED, 29 | lightGreen: GREEN, 30 | lightYellow: YELLOW, 31 | lightBlue: BLUE, 32 | lightMagenta: PINK, 33 | lightCyan: CYAN, 34 | lightWhite: WHITE 35 | }; 36 | 37 | // Apply theme 38 | exports.decorateConfig = (config) => ( 39 | Object.assign({}, config, { 40 | backgroundColor, 41 | foregroundColor, 42 | borderColor: borderColor, 43 | cursorColor: foregroundColor, 44 | colors, 45 | css: ` 46 | ${config.css || ''} 47 | /* Set background color */ 48 | .hyperterm_main { 49 | background-color: ${backgroundColor} !important; 50 | } 51 | 52 | /* Highlight active tab by making rest of nav darker */ 53 | .header_header { 54 | background-color: ${darkerBackground} !important; 55 | } 56 | 57 | /* Set tab colors */ 58 | .tab_tab { 59 | color: ${foregroundColor} !important; 60 | background-color: ${darkerBackground} !important; 61 | border: none !important; 62 | border-right: 1px solid transparent !important; 63 | border-left: 1px solid transparent !important; 64 | border-bottom: 1px solid ${borderColor} !important; 65 | } 66 | 67 | /* Hide bottom border if tab is active, make bg lighter */ 68 | .tab_active { 69 | background-color: ${backgroundColor} !important; 70 | height: calc(100% + 1px); 71 | border-left: 1px solid ${borderColor} !important; 72 | border-right: 1px solid ${borderColor} !important; 73 | border-bottom: none !important; 74 | } 75 | 76 | .tab_tab:last-child { 77 | border-right: 1px solid transparent !important; 78 | } 79 | 80 | /* Hide hardcoded black bottom border */ 81 | .tab_active:before { 82 | border-bottom: none !important; 83 | } 84 | 85 | .tab_text { 86 | border-color: transparent !important; 87 | } 88 | `, 89 | termCSS: ` 90 | ${config.termCSS || ''} 91 | ::selection { 92 | color: ${darkerBackground}; 93 | background-color: ${WHITE}; 94 | } 95 | ` 96 | }) 97 | ); 98 | 99 | // Development middleware for HMR 100 | exports.middleware = () => (next) => (action) => { 101 | /* eslint-disable no-param-reassign, default-case */ 102 | switch (action.type) { 103 | case 'CONFIG_LOAD': 104 | case 'CONFIG_RELOAD': 105 | action.config.foregroundColor = foregroundColor; 106 | action.config.backgroundColor = backgroundColor; 107 | action.config.cursorColor = foregroundColor; 108 | action.config.colors = colors; 109 | } 110 | next(action); 111 | }; 112 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hyperterm-spacegray", 3 | "version": "0.1.2", 4 | "description": "Spacegray theme for hyperterm", 5 | "main": "index.js", 6 | "scripts": { 7 | "prepublish": "npm run test", 8 | "test": "eslint ." 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/mxstbr/hyperterm-spacegray.git" 13 | }, 14 | "keywords": [ 15 | "hyperterm", 16 | "spacegray", 17 | "theme" 18 | ], 19 | "author": "Max Stoiber (http://mxstbr.com)", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/mxstbr/hyperterm-spacegray/issues" 23 | }, 24 | "homepage": "https://github.com/mxstbr/hyperterm-spacegray#readme", 25 | "devDependencies": { 26 | "eslint": "^3.1.0", 27 | "eslint-config-airbnb-base": "^8.0.0", 28 | "eslint-plugin-import": "^1.11.0" 29 | } 30 | } 31 | --------------------------------------------------------------------------------