├── .gitignore ├── public ├── favicon.ico └── index.html ├── src ├── styles │ ├── _tools.scss │ ├── index.scss │ ├── _theme.scss │ ├── _helpers.scss │ ├── _swatch.scss │ ├── _nav.scss │ ├── _config.scss │ ├── _terminal.scss │ ├── _layout.scss │ ├── _header.scss │ └── _defaults.scss ├── index.js ├── components │ ├── Nav.js │ ├── Tools.js │ ├── Theme.js │ ├── Main.js │ ├── Swatch.js │ ├── Terminal.js │ └── App.js └── data │ └── themes.json ├── config ├── jest │ ├── fileTransform.js │ └── cssTransform.js ├── polyfills.js ├── paths.js ├── env.js ├── webpackDevServer.config.js ├── webpack.config.dev.js └── webpack.config.prod.js ├── README.md ├── scripts ├── parse-theme-colors ├── test.js ├── build-themes.js ├── start.js └── build.js ├── LICENSE └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | node_modules 3 | /build -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glitchbone/vscode-base16-term/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/styles/_tools.scss: -------------------------------------------------------------------------------- 1 | .tools { 2 | button { 3 | opacity: .5; 4 | @include crossfade; 5 | &:hover { 6 | opacity: 1; 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "config"; 2 | @import "defaults"; 3 | @import "helpers"; 4 | @import "layout"; 5 | @import "header"; 6 | @import "nav"; 7 | @import "theme"; 8 | @import "terminal"; 9 | @import "swatch"; 10 | @import "tools"; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import 'normalize.css'; 4 | import './styles/index.scss'; 5 | import App from './components/App'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /src/styles/_theme.scss: -------------------------------------------------------------------------------- 1 | .theme { 2 | text-align: center; 3 | &, 4 | h2 { 5 | @include crossfade; 6 | } 7 | h2 { 8 | font-size: 42px; 9 | font-size: calc(100% + 5vw); 10 | margin: 0; 11 | } 12 | } -------------------------------------------------------------------------------- /src/styles/_helpers.scss: -------------------------------------------------------------------------------- 1 | .clearfix:after { 2 | content: ""; 3 | display: table; 4 | clear: both; 5 | } 6 | 7 | .padded { 8 | padding: 32px; 9 | } 10 | 11 | @mixin crossfade { 12 | transition-property: color, border-color, background-color; 13 | transition-duration: .3s; 14 | } -------------------------------------------------------------------------------- /src/styles/_swatch.scss: -------------------------------------------------------------------------------- 1 | .swatch { 2 | &__color { 3 | display: inline-block; 4 | width: $swatch-color-size; 5 | height: $swatch-color-size; 6 | border-radius: $swatch-color-size / 2; 7 | margin: 0 4px; 8 | border: 2px solid transparent; 9 | @include crossfade; 10 | } 11 | } -------------------------------------------------------------------------------- /src/components/Nav.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { NavLink } from 'react-router-dom'; 3 | 4 | const Nav = (props) => { 5 | 6 | return ( 7 | 10 | ) 11 | } 12 | 13 | export default Nav; -------------------------------------------------------------------------------- /config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | // This is a custom Jest transformer turning file imports into filenames. 6 | // http://facebook.github.io/jest/docs/en/webpack.html 7 | 8 | module.exports = { 9 | process(src, filename) { 10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /src/styles/_nav.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | a { 3 | display: block; 4 | padding: 16px; 5 | text-decoration: none; 6 | color: $default-text-color; 7 | &:hover { 8 | background: $nav-item-bg-color-hover; 9 | } 10 | &.active, 11 | &:focus { 12 | background: $nav-item-bg-color-active; 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/en/webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /src/styles/_config.scss: -------------------------------------------------------------------------------- 1 | $default-text-color: #333; 2 | $header-bg-color: #373277; 3 | $header-text-color: #fff; 4 | $nav-item-bg-color-hover: rgba(0, 0, 0, 0.04); 5 | $nav-item-bg-color-active: rgba(0, 0, 0, 0.1); 6 | $base-font-family: 'Roboto', sans-serif; 7 | $terminal-font-family: 'Droid Sans Mono for Powerline', monospace; 8 | $sidebar-width: 260px; 9 | $terminal-font-size: 20px; 10 | $swatch-color-size: 32px; -------------------------------------------------------------------------------- /src/styles/_terminal.scss: -------------------------------------------------------------------------------- 1 | .terminal { 2 | font-family: $terminal-font-family; 3 | font-size: $terminal-font-size; 4 | line-height: 1.25; 5 | &__screen, 6 | span { 7 | @include crossfade; 8 | } 9 | &__screen { 10 | padding: 16px; 11 | display: inline-block; 12 | border: 1px solid transparent; 13 | } 14 | span { 15 | display: inline-block; 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/_layout.scss: -------------------------------------------------------------------------------- 1 | .app { 2 | display: flex; 3 | flex-direction: column; 4 | min-height: 100vh; 5 | } 6 | 7 | main, 8 | header { 9 | margin-left: $sidebar-width; 10 | } 11 | 12 | main { 13 | flex: 1; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | position: relative; 18 | } 19 | 20 | .sidebar { 21 | position: fixed; 22 | width: $sidebar-width; 23 | height: 100vh; 24 | overflow-y: scroll; 25 | } -------------------------------------------------------------------------------- /src/styles/_header.scss: -------------------------------------------------------------------------------- 1 | header { 2 | background: $header-bg-color; 3 | &, 4 | a { 5 | color: $header-text-color; 6 | } 7 | h1 { 8 | display: inline-block; 9 | font-size: 28px; 10 | margin-top: 0; 11 | padding-bottom: 8px; 12 | margin-bottom: 16px; 13 | border-bottom: 1px solid rgba($header-text-color, .2); 14 | small { 15 | font-size: 16px; 16 | } 17 | } 18 | p { 19 | margin-top: 0; 20 | } 21 | } -------------------------------------------------------------------------------- /src/components/Tools.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {CopyToClipboard} from 'react-copy-to-clipboard'; 3 | 4 | const Tools = (props) => { 5 | 6 | const snippet = JSON.stringify(props).slice(1, -1).split(',').join(',\n') 7 | 8 | return ( 9 |
10 | 11 | 12 | 13 |
14 | 15 | ) 16 | } 17 | 18 | export default Tools; -------------------------------------------------------------------------------- /src/components/Theme.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Terminal from './Terminal'; 3 | import Swatch from './Swatch'; 4 | import Tools from './Tools'; 5 | 6 | const Theme = (props) => { 7 | 8 | return ( 9 |
10 |
11 |

{props.name}

12 | 13 | 14 | 15 |
16 |
17 | ) 18 | } 19 | 20 | export default Theme; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Base16 Terminal Colors for Visual Studio Code 2 | 3 | [glitchbone.github.io/vscode-base16-term](https://glitchbone.github.io/vscode-base16-term) 4 | 5 | ## Building the themes 6 | 7 | Clone this repo & the [base16-shell](https://github.com/chriskempson/base16-shell) repo & build the themes.json file by running this command inside this project folder : 8 | 9 | ```sh 10 | npm run build-themes path/to/base16-shell/scripts 11 | ``` 12 | 13 | ## Author 14 | 15 | **Adrien Glitchbone** 16 | 17 | + [http://glitchbone.com](http://glitchbone.com) 18 | 19 | ## License 20 | 21 | This project is available under the MIT license. See the [LICENSE](LICENSE) file for more information. -------------------------------------------------------------------------------- /src/styles/_defaults.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *:before, 7 | *:after { 8 | box-sizing: inherit; 9 | } 10 | 11 | body { 12 | -webkit-font-smoothing: antialiased; 13 | color: $default-text-color; 14 | } 15 | 16 | body, 17 | button { 18 | font-family: $base-font-family; 19 | } 20 | 21 | button { 22 | background: transparent; 23 | color: #fff; 24 | padding: 12px 24px; 25 | border: 0; 26 | cursor: pointer; 27 | &:focus { 28 | outline: none; 29 | 30 | } 31 | &:active { 32 | transform: scale(.98); 33 | } 34 | } 35 | 36 | h1, 37 | h2, 38 | h3, 39 | h4 { 40 | font-weight: 300; 41 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Base16 Terminal Colors for Visual Studio Code 13 | 14 | 15 | 16 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /scripts/parse-theme-colors: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | print_color() { 4 | eval current_color=\$${1} 5 | current_color=$(echo ${current_color//\//} | tr '[:lower:]' '[:upper:]') 6 | echo "\"$1\":\"#$current_color\"$2" 7 | } 8 | 9 | theme=$1 10 | 11 | if [ -f $theme ]; then 12 | # get the color declarations in said theme, assumes there is a block of text that starts with color00= and ends with new line 13 | eval $(awk '/^color00=/,/^$/ {print}' $theme | sed 's/#.*//') 14 | else 15 | printf "No theme file %s found\n" $theme 16 | fi; 17 | 18 | echo "{" 19 | 20 | for color in `seq -w 0 21`; do 21 | print_color "color${color}" "," 22 | done; 23 | 24 | print_color "color_foreground" "," 25 | print_color "color_background" 26 | 27 | echo "}" -------------------------------------------------------------------------------- /scripts/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Do this as the first thing so that any code reading it knows the right env. 4 | process.env.BABEL_ENV = 'test'; 5 | process.env.NODE_ENV = 'test'; 6 | process.env.PUBLIC_URL = ''; 7 | 8 | // Makes the script crash on unhandled rejections instead of silently 9 | // ignoring them. In the future, promise rejections that are not handled will 10 | // terminate the Node.js process with a non-zero exit code. 11 | process.on('unhandledRejection', err => { 12 | throw err; 13 | }); 14 | 15 | // Ensure environment variables are read. 16 | require('../config/env'); 17 | 18 | const jest = require('jest'); 19 | const argv = process.argv.slice(2); 20 | 21 | // Watch unless on CI or in coverage mode 22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) { 23 | argv.push('--watch'); 24 | } 25 | 26 | 27 | jest.run(argv); 28 | -------------------------------------------------------------------------------- /src/components/Main.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import _ from 'lodash'; 3 | import Theme from './Theme'; 4 | 5 | class Main extends Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | activeTheme: this.props.themes[0] 11 | }; 12 | } 13 | 14 | setActiveTheme(id) { 15 | 16 | const theme = _.find(this.props.themes, {id}); 17 | 18 | this.setState({ 19 | activeTheme: theme ? theme : this.props.themes[0] 20 | }); 21 | } 22 | 23 | componentDidMount() { 24 | this.setActiveTheme(this.props.themeId); 25 | } 26 | 27 | componentWillReceiveProps(nextProps) { 28 | this.setActiveTheme(nextProps.themeId); 29 | } 30 | 31 | render() { 32 | return ( 33 | 34 | ) 35 | } 36 | } 37 | 38 | export default Main; 39 | -------------------------------------------------------------------------------- /config/polyfills.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | if (typeof Promise === 'undefined') { 4 | // Rejection tracking prevents a common issue where React gets into an 5 | // inconsistent state due to an error, but it gets swallowed by a Promise, 6 | // and the user has no idea what causes React's erratic future behavior. 7 | require('promise/lib/rejection-tracking').enable(); 8 | window.Promise = require('promise/lib/es6-extensions.js'); 9 | } 10 | 11 | // fetch() polyfill for making API calls. 12 | require('whatwg-fetch'); 13 | 14 | // Object.assign() is commonly used with React. 15 | // It will use the native implementation if it's present and isn't buggy. 16 | Object.assign = require('object-assign'); 17 | 18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet. 19 | // We don't polyfill it in the browser--this is user's responsibility. 20 | if (process.env.NODE_ENV === 'test') { 21 | require('raf').polyfill(global); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/Swatch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Swatch = (props) => { 4 | 5 | const swatchColors = [ 6 | 'ansiBlack', 7 | 'ansiBlue', 8 | 'ansiBrightBlack', 9 | 'ansiBrightBlue', 10 | 'ansiBrightCyan', 11 | 'ansiBrightGreen', 12 | 'ansiBrightMagenta', 13 | 'ansiBrightRed', 14 | 'ansiBrightWhite', 15 | 'ansiBrightYellow', 16 | 'ansiCyan', 17 | 'ansiGreen', 18 | 'ansiMagenta', 19 | 'ansiRed', 20 | 'ansiWhite', 21 | 'ansiYellow' 22 | ]; 23 | 24 | return ( 25 |
26 | {swatchColors.map((key, i) => 27 |
31 | )} 32 |
33 | ) 34 | } 35 | 36 | export default Swatch; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Adrien Glitchbone 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 13 | all 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 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /src/components/Terminal.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Terminal = (props) => { 4 | 5 | return ( 6 |
7 |
8 | dschrute@dunder-mifflin  9 | 10 |  ~/leads  11 | 12 |   master  13 | 14 |  ls  15 | 16 |
17 |
18 | ) 19 | } 20 | 21 | export default Terminal; -------------------------------------------------------------------------------- /src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { HashRouter as Router } from 'react-router-dom'; 3 | import { Route } from 'react-router-dom'; 4 | import themes from '../data/themes.json'; 5 | import Nav from './Nav'; 6 | import Main from './Main'; 7 | 8 | const App = (props) => { 9 | 10 | return ( 11 | 12 |
13 | 16 |
17 |

Base16 Terminal Colors for Visual Studio Code

18 |

Select a theme & copy/paste the properties under « workbench.colorCustomizations » in your user settings

19 | Made with ❤ by Glitchbone 20 |
21 | ( 22 |
23 | )} /> 24 |
25 |
26 | ) 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /config/paths.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const fs = require('fs'); 5 | const url = require('url'); 6 | 7 | // Make sure any symlinks in the project folder are resolved: 8 | // https://github.com/facebookincubator/create-react-app/issues/637 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath); 11 | 12 | const envPublicUrl = process.env.PUBLIC_URL; 13 | 14 | function ensureSlash(path, needsSlash) { 15 | const hasSlash = path.endsWith('/'); 16 | if (hasSlash && !needsSlash) { 17 | return path.substr(path, path.length - 1); 18 | } else if (!hasSlash && needsSlash) { 19 | return `${path}/`; 20 | } else { 21 | return path; 22 | } 23 | } 24 | 25 | const getPublicUrl = appPackageJson => 26 | envPublicUrl || require(appPackageJson).homepage; 27 | 28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer 29 | // "public path" at which the app is served. 30 | // Webpack needs to know it to put the right