├── .gitignore ├── package.json ├── LICENSE ├── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | *.log 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hyper-dark-scrollbar", 3 | "version": "1.2.4", 4 | "description": "Dark scrollbar for Hyper", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/moso/hyper-dark-scrollbar.git" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/moso/hyper-dark-scrollbar/issues" 12 | }, 13 | "keywords": [ 14 | "hyper", 15 | "hyperterm", 16 | "hyper-plugin", 17 | "hyperterm-plugin", 18 | "plugin", 19 | "scroll", 20 | "scrollbar" 21 | ], 22 | "author": { 23 | "name": "Morten Sørensen", 24 | "email": "morten@moso.io", 25 | "url": "https://moso.io" 26 | }, 27 | "dependencies": { 28 | "color": "^2.0.0" 29 | }, 30 | "license": "MIT" 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017-2019 Morten Sørensen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const Color = require('color'); 3 | 4 | exports.decorateConfig = (config) => { 5 | const backColor = Color(config.backgroundColor) 6 | const colors = { 7 | light: backColor.lightness(27).string(), 8 | dark: backColor.darken(0.18).string(), 9 | hover: backColor.lightness(33).string() 10 | } 11 | 12 | return Object.assign({}, config, { 13 | css: ` 14 | ${config.css || ''} 15 | .xterm-viewport::-webkit-scrollbar-button { 16 | width: 0; 17 | height: 0; 18 | display: none; 19 | } 20 | .xterm-viewport::-webkit-scrollbar-corner { 21 | background-color: transparent; 22 | } 23 | .xterm-viewport::-webkit-scrollbar { 24 | width: 4px; 25 | height: 4px; 26 | } 27 | .xterm-viewport::-webkit-scrollbar-track, 28 | .xterm-viewport::-webkit-scrollbar-thumb { 29 | -webkit-border-radius: 8px; 30 | } 31 | .xterm-viewport::-webkit-scrollbar-track { 32 | background-color: ${colors.dark}; 33 | } 34 | .xterm-viewport::-webkit-scrollbar-thumb { 35 | background-color: ${colors.light}; 36 | -webkit-box-shadow: none; 37 | } 38 | .xterm-viewport::-webkit-scrollbar-thumb:hover { 39 | background-color: ${colors.hover}; 40 | -webkit-box-shadow: none; 41 | } 42 | .xterm .xterm-viewport { 43 | overflow-y: auto; 44 | } 45 | ` 46 | }) 47 | }; 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # hyper-dark-scrollbar 2 | Dark scrollbar for [Hyper](https://github.com/zeit/hyper) - a plugin that stylizes the chunky Windows-ish scrollbar into a more sleek scrollbar. 3 | 4 | The scrollbar is originally designed for [hyperterm-atom-dark](https://github.com/mdo/hyperterm-atom-dark), however, it also looks great on the standard theme, and should look fine on dark themes, as it utilises the theme background color. You're ~welcome~ encouraged to fork this project and modify it if you need to tinker with the colors to fit your theme better, or create a PR if I missed something that needs fixing. 5 | 6 | ![screenshot](https://dev.moso.io/hyper/hyper-dark-scrollbar/screenshot.png) 7 | 8 | ### Changelog 9 | **1.2.4** 10 | - Added hover-effect on the scrollbar 11 | 12 | **1.2.3** 13 | - Fixed scrollbar always visible ([4922649](https://github.com/moso/hyper-dark-scrollbar/commit/4922649b3505980524d1d856651f330a98ac02ac)) - thanks [@krve](https://github.com/krve)! 14 | 15 | **1.2.2** 16 | - Added attention note about the order of plugins for this plugin to work correctly 17 | - Removed docs about `hpm` 18 | 19 | **1.2.1** 20 | - Removed support for Hyper v1.4.8 21 | 22 | **1.2.0** 23 | - Fixed lacking support for xterm api in Hyper v2.x 24 | - Upgraded dependencies 25 | 26 | **1.1.0** 27 | - [henrikdahl](https://github.com/henrikdahl) magic - see [e6124e7](https://github.com/moso/hyper-dark-scrollbar/commit/e6124e7640291940acf46883d4022bef900ada60) for changes. 28 | 29 | **1.0.0** 30 | - Initial release. 31 | 32 | ### Install 33 | 34 | **Hyper store**: 35 | ``` 36 | hyper i hyper-dark-scrollbar 37 | ``` 38 | 39 | **Manually**: 40 | 41 | 1. Open Hyper's preferences with `Ctrl+,` (or manually at `~/.hyper.js`) with your editor. 42 | 2. Update your list of plugins to include hyper-dark-scrollbar, like so: 43 | 44 | plugins: [ 45 | 'hyper-dark-scrollbar' 46 | ], 47 | 48 | 3. Reload (`Ctrl+Shift+R`) or restart Hyper and voila! 49 | 50 | ### Attention 51 | 52 | If you have added a theme to Hyper, you will need to make sure `hyper-dark-scrollbar` is loaded **_after_** the theme; preferably last. Otherwise the utilisation of the `color`-package won't work, and you'll end up with whatever colors are defined in your `~/.hyper.js`. 53 | 54 | Check your `~/.hyper.js` and make sure it look like this: 55 | 56 | ```javascript 57 | module.exports = { 58 | config: { 59 | 60 | // ... 61 | 62 | plugins: [ 63 | 'theme', 64 | // other plugins 65 | 'hyper-dark-scrollbar' 66 | ], 67 | 68 | // ... 69 | } 70 | } 71 | ``` 72 | 73 | ### Related 74 | 75 | - [hyper-snazzy-scrollbar](https://github.com/Stanzilla/hyper-dark-scrollbar) - a fork for the [hyper-snazzy](https://github.com/sindresorhus/hyper-snazzy) theme 76 | - [hyper-arc-dark-controls](https://github.com/moso/hyper-arc-dark-controls) 77 | - [hyper-pocillo-controls](https://github.com/moso/hyper-pocillo-controls) 78 | 79 | ### License 80 | 81 | MIT 82 | --------------------------------------------------------------------------------