├── .gitignore ├── .prettierrc ├── res ├── poster.png ├── poster2.png ├── screenshot.png └── screenshot2.png ├── .babelrc ├── .npmignore ├── .eslintrc ├── src ├── stylesheets │ ├── root.js │ ├── index.js │ ├── term.js │ └── header.js ├── colors │ └── index.js ├── index.js └── images │ └── mirai-akari.svg ├── .editorconfig ├── webpack.config.js ├── README.md ├── README.en.md ├── LICENSE └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /index.js 4 | 5 | .vscode 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /res/poster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yui540/hyper-akari/HEAD/res/poster.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /res/poster2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yui540/hyper-akari/HEAD/res/poster2.png -------------------------------------------------------------------------------- /res/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yui540/hyper-akari/HEAD/res/screenshot.png -------------------------------------------------------------------------------- /res/screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yui540/hyper-akari/HEAD/res/screenshot2.png -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | LICENSE 2 | src/ 3 | webpack.config.js 4 | node_modules/ 5 | .babelrc 6 | .editorconfig 7 | .gitignore 8 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["google"], 3 | "env": { 4 | "browser": true 5 | }, 6 | "parserOptions": { 7 | "ecmaVersion": 2017, 8 | "sourceType": "module" 9 | }, 10 | "rules": { 11 | "semi": 0, 12 | "require-jsdoc": 0 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/stylesheets/root.js: -------------------------------------------------------------------------------- 1 | import color from 'color' 2 | import {backgroundColor} from '../colors' 3 | 4 | export default ({vibrancyOpacity}) => { 5 | return ` 6 | .hyper_main { 7 | background-color: ${color(backgroundColor).fade(1 - vibrancyOpacity)}; 8 | } 9 | ` 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [{package.json,*.yml}] 15 | indent_style = space 16 | indent_size = 2 17 | -------------------------------------------------------------------------------- /src/stylesheets/index.js: -------------------------------------------------------------------------------- 1 | import root from './root' 2 | import header from './header' 3 | import term from './term' 4 | 5 | export const termCSS = (options) => { 6 | return ` 7 | 8 | ` 9 | } 10 | 11 | export const css = (options) => { 12 | return ` 13 | ${root(options)} 14 | ${header(options)} 15 | ${term(options)} 16 | ` 17 | } 18 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const mode = process.env.MODE || 'production' 2 | 3 | module.exports = { 4 | mode: mode, 5 | entry: "./src/index.js", 6 | output: { 7 | path: `${ __dirname }`, 8 | filename: "index.js" 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.js/, 14 | loader: 'babel-loader', 15 | exclude: /node_modules/ 16 | }, 17 | { 18 | test: /\.(gif|png|jpg|svg)/, 19 | loader: 'url-loader' 20 | } 21 | ] 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/stylesheets/term.js: -------------------------------------------------------------------------------- 1 | import illust from '../images/mirai-akari.svg' 2 | 3 | export default ({illust: show, opacity}) => { 4 | return ` 5 | .terms_terms:before { 6 | content: ""; 7 | display: ${show ? 'block' : 'none'}; 8 | position: absolute; 9 | z-index: 1; 10 | top: 0; 11 | left: 0; 12 | width: 100%; 13 | height: 100%; 14 | background-image: url(${illust}); 15 | background-size: auto 80%; 16 | background-position: right bottom; 17 | background-repeat: no-repeat; 18 | opacity: ${opacity}; 19 | } 20 | .xterm .xterm-viewport { 21 | background-color: rgba(0,0,0,0) !impotant; 22 | } 23 | ` 24 | } 25 | -------------------------------------------------------------------------------- /src/colors/index.js: -------------------------------------------------------------------------------- 1 | export const backgroundColor = '#2E3440' 2 | 3 | export const foregroundColor = '#F8F8F0' 4 | 5 | export const cursorColor = '#fff' 6 | 7 | export const selectionColor = 'rgba(136,192,208,0.5)' 8 | 9 | export const borderColor = 'rgba(136,192,208,0.2)' 10 | 11 | export const colors = { 12 | black: backgroundColor, 13 | red: '#c45c66', 14 | green: '#c3ce5f', 15 | yellow: '#FD971F', 16 | blue: '#49a9a4', 17 | magenta: '#66D9EF', 18 | cyan: '#38CCD1', 19 | white: '#ffffff', 20 | lightBlack: '#65737e', 21 | lightRed: '#c45c66', 22 | lightGreen: '#c3ce5f', 23 | lightYellow: '#FD971F', 24 | lightBlue: '#49a9a4', 25 | lightMagenta: '#66D9EF', 26 | lightCyan: '#38CCD1', 27 | lightWhite: foregroundColor, 28 | } 29 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | backgroundColor, 3 | foregroundColor, 4 | borderColor, 5 | selectionColor, 6 | colors, 7 | cursorColor 8 | } from './colors' 9 | import { termCSS, css } from './stylesheets' 10 | 11 | exports.decorateConfig = config => { 12 | const options = Object.assign({}, { 13 | illust: true, 14 | opacity: 0.3, 15 | }, config.hyperAkari) 16 | 17 | return Object.assign({}, config, { 18 | backgroundColor: backgroundColor, 19 | foregroundColor, 20 | borderColor, 21 | selectionColor, 22 | colors, 23 | cursorColor, 24 | termCSS: ` 25 | ${ config.termCSS || '' } 26 | `, 27 | css: ` 28 | ${ config.css || '' } 29 | ${ css(options) } 30 | ${ termCSS(options) } 31 | ` 32 | }) 33 | } 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HyperAkari 2 | 3 | ![poster](./res/poster.png) 4 | 5 | HyperAkariは、ターミナルエミュレータ「Hyper」のテーマプラグインです。 6 | 7 | 青をメインにした色合いになっています。 8 | 9 | - 登場するキャラクター 10 | - ミライアカリ 11 | - [YouTubeチャンネル](https://www.youtube.com/channel/UCMYtONm441rBogWK_xPH9HA) 12 | - 開発者 13 | - yui540 14 | - [Twitter - @yui540](https://twitter.com/yui540) 15 | - README 16 | - [Japanese](./README.md) 17 | - [English](./README.en.md) 18 | 19 | # スクリーンショット 20 | 21 | ![poster2](./res/poster2.png) 22 | ![screenshot](./res/screenshot.png) 23 | ![screenshot2](./res/screenshot2.png) 24 | 25 | ## 使い方 26 | 27 | ```bash 28 | $ hyper i hyper-akari 29 | ``` 30 | 31 | ## オプション 32 | 33 | ```js:.hyper.js 34 | config: { 35 | // ... 36 | hyperAkari: { 37 | illust: true, // イラストを表示するか（デフォルトは true） 38 | opacity: 0.3, // イラストの不透明度0~1（デフォルトは0.3） 39 | vibrancy: 'dark', // オープン動的効果 (デフォルトは dark) 40 | vibrancyOpacity: 0.7, // ダイナミックエフェクトの透明度 0~1 (デフォルトは 0.7) 41 | }, 42 | // ... 43 | } 44 | ``` 45 | -------------------------------------------------------------------------------- /README.en.md: -------------------------------------------------------------------------------- 1 | # HyperAkari 2 | ![poster](./res/poster.png) 3 | 4 | Hyperakari is a theme plugin for the terminal emulator called Hyper. 5 | 6 | It uses blue as a base tone. 7 | 8 | - Character 9 | - MiraiAkari 10 | - [YouTube](https://www.youtube.com/channel/UCMYtONm441rBogWK_xPH9HA) 11 | - Developer 12 | - yui540 13 | - [Twitter - @yui540](https://twitter.com/yui540) 14 | - README 15 | - [Japanese](./README.md) 16 | - [English](./README.en.md) 17 | 18 | ## Screenshot 19 | ![poster2](./res/poster2.png) 20 | ![screenshot](./res/screenshot.png) 21 | ![screenshot2](./res/screenshot2.png) 22 | 23 | ## Usage 24 | ```bash 25 | $ hyper i hyper-akari 26 | ``` 27 | 28 | ## Options 29 | ```js:.hyper.js 30 | config: { 31 | // ... 32 | hyperAkari: { 33 | illust: true, // Whether to show the image or not (default: true) 34 | opacity: 0.3 // Opacity of the image（default: 0.3） 35 | vibrancy: 'dark', // (default: dark) 36 | vibrancyOpacity: 0.7, // (default: 0.7) 37 | }, 38 | // ... 39 | } 40 | ``` -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 yui540 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hyper-akari", 3 | "description": "🦋MiraiAkari themes for your Hyper terminal", 4 | "version": "0.0.3", 5 | "main": "index.js", 6 | "scripts": { 7 | "precommit": "lint-staged", 8 | "lint": "eslint src/**/*.js", 9 | "format": "prettier-eslint --write src/**/*.js", 10 | "build": "cross-env MODE=production webpack", 11 | "build:dev": "cross-env MODE=development webpack", 12 | "watch": "cross-env MODE=development webpack --watch" 13 | }, 14 | "lint-staged": { 15 | "*.{js}": [ 16 | "prettier --write", 17 | "eslint", 18 | "git add" 19 | ] 20 | }, 21 | "keywords": [ 22 | "hyper", 23 | "hyper-akari", 24 | "theme", 25 | "mirai-akari" 26 | ], 27 | "repository": "https://github.com/yui540/hyper-akari.git", 28 | "license": "MIT", 29 | "author": "yui540 ", 30 | "devDependencies": { 31 | "babel-core": "^6.26.3", 32 | "babel-loader": "^7.1.5", 33 | "babel-preset-env": "^1.7.0", 34 | "color": "^3.0.0", 35 | "cross-env": "^5.2.0", 36 | "eslint": "^5.1.0", 37 | "eslint-config-google": "^0.9.1", 38 | "husky": "^0.14.3", 39 | "lint-staged": "^7.2.0", 40 | "prettier": "^1.13.7", 41 | "prettier-eslint": "^8.8.2", 42 | "prettier-eslint-cli": "^4.7.1", 43 | "url-loader": "^1.0.1", 44 | "webpack": "^4.15.1", 45 | "webpack-cli": "^3.0.8" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/stylesheets/header.js: -------------------------------------------------------------------------------- 1 | import {backgroundColor, colors} from '../colors' 2 | 3 | export default () => { 4 | return ` 5 | .header_header { 6 | background-color: rgba(255, 255, 255, 0.08); 7 | } 8 | .tabs_title { 9 | position: relative; 10 | padding: 0; 11 | background-color: ${backgroundColor}; 12 | } 13 | .tabs_title:after { 14 | content: ""; 15 | display: block; 16 | position: absolute; 17 | bottom: 0; 18 | left: 0; 19 | width: 100%; 20 | height: 1px; 21 | background-color: ${colors.blue}; 22 | opacity: 0.7; 23 | } 24 | .tab_tab { 25 | position: relative; 26 | border: none; 27 | overflow: hidden; 28 | } 29 | .tab_tab:after { 30 | content: ""; 31 | display: block; 32 | position: absolute; 33 | bottom: 0px; left: 0; 34 | width: 100%; height: 1px; 35 | background-color: ${colors.blue}; 36 | opacity: 0.7; 37 | transform: translateX(-100%); 38 | transition: all 0.4s ease 0s; 39 | } 40 | .tab_tab.tab_active { 41 | border: none; 42 | background-color: ${backgroundColor}; 43 | } 44 | .tab_active:after { 45 | transform: translateX(0%); 46 | } 47 | .tab_tab .tab_icon { 48 | top: 2px; 49 | right: 2px; 50 | width: 30px; 51 | height: 30px; 52 | } 53 | .tab_tab .tab_icon:before { 54 | content: ""; 55 | display: block; 56 | position: absolute; 57 | top: 0; 58 | left: 0; 59 | width: 100%; 60 | height: 100%; 61 | border-radius: 50%; 62 | background-color: ${colors.blue}; 63 | opacity: 0.3; 64 | transform: scale(0); 65 | transition: all 0.3s ease 0s; 66 | } 67 | .tab_tab .tab_icon .tab_shape { 68 | top: 10px; 69 | left: 10px; 70 | width: 10px; 71 | height: 10px; 72 | opacity: 0; 73 | } 74 | .tab_tab:hover .tab_icon .tab_shape { 75 | opacity: 1; 76 | } 77 | .tab_tab .tab_icon:hover { 78 | background-color: transparent; 79 | } 80 | .tab_tab .tab_icon:hover:before { 81 | transform: scale(1); 82 | } 83 | ` 84 | } 85 | -------------------------------------------------------------------------------- /src/images/mirai-akari.svg: -------------------------------------------------------------------------------- 1 | アセット 5 --------------------------------------------------------------------------------