├── preview.png
├── preview2.png
├── README.md
├── package.json
└── index.js


/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EliverLara/hyper-sweet/HEAD/preview.png


--------------------------------------------------------------------------------
/preview2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EliverLara/hyper-sweet/HEAD/preview2.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 
 3 | <h1> Hyper Sweet </h1>
 4 | 
 5 | A dark and modern theme for [hyper](https://hyper.is/).
 6 | 
 7 | </div>
 8 | 
 9 | <img src="preview.png"/>
10 | 
11 | ## How to use
12 | 
13 | Add  ` hyper-sweet` to  `plugins` in `~/.hyper.js`.
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hyper-sweet",
 3 |   "version": "1.0.0",
 4 |   "keywords": [
 5 |     "hyper",
 6 |     "hyperterm",
 7 |     "hyper-sweet",
 8 |     "theme",
 9 |     "dark"
10 |     ],
11 |   "description": "A dark and modern theme for hyper",
12 |   "repository": "https://github.com/EliverLara/hyper-sweet.git",
13 |   "author": "EliverLara",
14 |   "license": "MIT",
15 |   "dependencies": {}
16 | }
17 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | // Constants
 2 | const backgroundColor = '#161925';
 3 | const foregroundColor = '#C3C7D1';
 4 | const activeTabBg = '#161925';
 5 | const g1 = '#5800E2';
 6 | const g2 = '#FF00E6'
 7 | 
 8 | // Colors
 9 | const RED = '#ed254e';
10 | const GREEN = '#71f79f';
11 | const YELLOW = '#f9dc5c';
12 | const BLUE = '#7cb7ff';
13 | const MAGENTA = '#c74ded';
14 | const CYAN = '#00c1e4';
15 | const LIGHT_GRAY = '#F2EFEA';
16 | const DARK_GRAY = '#555753';
17 | 
18 | const ACTIVE_TAB = '#ED3A53';
19 | 
20 | // Mapped Colors
21 | const colors = {
22 |   black: backgroundColor,
23 |   red: RED,
24 |   green: GREEN,
25 |   yellow: YELLOW,
26 |   blue: BLUE,
27 |   magenta: MAGENTA,
28 |   cyan: CYAN,
29 |   white: LIGHT_GRAY,
30 |   lightBlack: DARK_GRAY,
31 |   lightRed: RED,
32 |   lightGreen: GREEN,
33 |   lightYellow: YELLOW,
34 |   lightBlue: BLUE,
35 |   lightMagenta: MAGENTA,
36 |   lightCyan: CYAN,
37 |   colorCubes: '#fff',
38 |   grayscale: foregroundColor
39 | };
40 | 
41 | // Additional Constants
42 | const cursorColor = MAGENTA;
43 | const borderColor = backgroundColor;
44 | 
45 | exports.decorateConfig = (config) => {
46 |   return Object.assign({}, config, {
47 |     foregroundColor,
48 |     backgroundColor,
49 |     borderColor,
50 |     cursorColor,
51 |     colors,
52 |     css: `
53 |       ${config.css || ''}
54 |       .cursor-node {
55 |         background-color: ${MAGENTA} !important;
56 |         border-color: ${MAGENTA} !important;
57 |       }
58 |       .hyper_main {
59 |         border: none !important;
60 |       }
61 |       .header_header {
62 |         background: ${backgroundColor} !important;
63 |       }
64 |       .splitpane_divider {
65 |         background-color: rgba(130, 128, 184, 0.5) !important;
66 |       }
67 |       .tab_tab {
68 |         border: 0;
69 |       }
70 |       .tab_textActive {
71 |         background:
72 |         linear-gradient(to right, ${g1}, ${g2})
73 |         left 
74 |         bottom
75 |         ${activeTabBg}    
76 |         no-repeat !important; 
77 |         background-size: 100% 3px!important;
78 |         border: 0 !important;
79 |         border-image: none !important;
80 |         text-shadow: 0px 0px 4px #C50ED2;
81 |       }
82 |     `
83 |   })
84 | }


--------------------------------------------------------------------------------