├── .gitignore ├── icon.png ├── assets ├── cover.jpg ├── panda.png └── editor.jpg ├── .vscode └── launch.json ├── Color Semantics.md ├── themes ├── regex.yaml ├── css.yaml ├── jsdoc.yaml ├── html.yaml ├── js.yaml ├── template.yaml ├── markdown.yaml ├── colors.yaml ├── panda-base.yaml └── workbench.yaml ├── .github └── ISSUE_TEMPLATE.md ├── package.json ├── vsc-extension-quickstart.md ├── README.md └── dist └── Panda.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PandaTheme/panda-syntax-vscode/HEAD/icon.png -------------------------------------------------------------------------------- /assets/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PandaTheme/panda-syntax-vscode/HEAD/assets/cover.jpg -------------------------------------------------------------------------------- /assets/panda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PandaTheme/panda-syntax-vscode/HEAD/assets/panda.png -------------------------------------------------------------------------------- /assets/editor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PandaTheme/panda-syntax-vscode/HEAD/assets/editor.jpg -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | { 3 | "version": "0.1.0", 4 | "configurations": [ 5 | { 6 | "name": "Launch Extension", 7 | "type": "extensionHost", 8 | "request": "launch", 9 | "runtimeExecutable": "${execPath}", 10 | "args": ["--extensionDevelopmentPath=${workspaceRoot}" ] 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /Color Semantics.md: -------------------------------------------------------------------------------- 1 | # Theme Colors 2 | 3 | Some semantic meaning is intended for colors to help easily scan files. They are 4 | documented here for reference. 5 | 6 | - Language keywords and component names are italicized for emphasis 7 | - Green: Strings 8 | - Pink: Logic Control 9 | - Light Purple: Language access like module.exports, process.env 10 | - Blue: Functions 11 | - Orange: Variable assignments keywords 12 | - Light Pink: Object access 13 | -------------------------------------------------------------------------------- /themes/regex.yaml: -------------------------------------------------------------------------------- 1 | # ----------------------------------------------------------------------------- 2 | # Regex Tokens 3 | # ----------------------------------------------------------------------------- 4 | # Parent match 5 | - scope: string.regexp 6 | settings: 7 | foreground: _light-blue 8 | # Hit word boundary and back references 9 | - scope: string.regexp keyword, string.regexp keyword.control 10 | settings: 11 | foreground: _pink 12 | fontStyle: normal 13 | # Operators like +, ? 14 | - scope: string.regexp keyword.operator 15 | settings: 16 | foreground: _light-pink 17 | -------------------------------------------------------------------------------- /themes/css.yaml: -------------------------------------------------------------------------------- 1 | - scope: entity.name.tag.css 2 | settings: 3 | foreground: _red 4 | 5 | - scope: support.type.property-name.css 6 | settings: 7 | foreground: _very-light-gray 8 | 9 | - scope: variable.scss 10 | settings: 11 | foreground: _light-pink 12 | 13 | - scope: entity.name.tag.reference.scss 14 | settings: 15 | foreground: _red 16 | 17 | - scope: keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css 18 | settings: 19 | foreground: _orange 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 7 | ## Summary 8 | 9 | 13 | Language: 14 | Raw File Contents: 15 | ``` 16 | FILE CONTENTS HERE 17 | ``` 18 | 19 | 20 | -------------------------------------------------------------------------------- /themes/jsdoc.yaml: -------------------------------------------------------------------------------- 1 | # Make JSDoc comments font normal for better readablility 2 | - scope: comment.block.documentation 3 | settings: 4 | fontStyle: normal 5 | # Tags with type defs curly punctation 6 | - scope: entity.name.type.instance.jsdoc punctuation.definition 7 | settings: 8 | foreground: _light-orange 9 | fontStyle: italic 10 | # Type def and method/prop NAMES 11 | - scope: entity.name.type.instance.jsdoc 12 | settings: 13 | foreground: _lighter-gray 14 | fontStyle: italic 15 | # Built in JSdoc block tags 16 | - scope: comment.block storage 17 | settings: 18 | foreground: _light-orange 19 | # Custom doc tags, tag defaults, tag default strings 20 | - scope: comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string 21 | settings: 22 | foreground: _light-pink 23 | 24 | -------------------------------------------------------------------------------- /themes/html.yaml: -------------------------------------------------------------------------------- 1 | # ----------------------------------------------------------------------------- 2 | # HTML, Jade, XML, Vue 3 | # ----------------------------------------------------------------------------- 4 | - scope: meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade 5 | settings: 6 | foreground: _red 7 | 8 | - scope: entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.tag.localname.xml 9 | settings: 10 | foreground: _red 11 | 12 | - scope: entity.name.tag.xml, meta.tag.xml 13 | settings: 14 | foreground: _red 15 | 16 | - scope: source.vue, entity.name.tag.pug, meta.tag.other 17 | settings: 18 | foreground: _red 19 | 20 | - scope: text.pug 21 | settings: 22 | foreground: _very-light-gray-fade 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "theme-panda", 3 | "displayName": "Panda Theme", 4 | "description": "Panda Theme for Visual Studio Code.", 5 | "version": "1.2.0", 6 | "publisher": "tinkertrain", 7 | "engines": { 8 | "vscode": "^1.20.0" 9 | }, 10 | "scripts": { 11 | "build": "node build.js" 12 | }, 13 | "categories": [ 14 | "Themes" 15 | ], 16 | "semanticHighlighting": true, 17 | "icon": "assets/panda.png", 18 | "homepage": "https://github.com/tinkertrain/panda-syntax-vscode", 19 | "galleryBanner": { 20 | "color": "#2a2c2d", 21 | "theme": "dark" 22 | }, 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/tinkertrain/panda-syntax-vscode" 26 | }, 27 | "contributes": { 28 | "themes": [ 29 | { 30 | "label": "Panda Syntax", 31 | "uiTheme": "vs-dark", 32 | "path": "./dist/Panda.json" 33 | } 34 | ] 35 | }, 36 | "devDependencies": { 37 | "@crystal-ball/eslint-config-eloquence": "^1.0.0", 38 | "js-yaml": "^3.13.1" 39 | }, 40 | "__metadata": { 41 | "id": "9764fb1f-aa45-4e65-a18e-705b3b00761c", 42 | "publisherDisplayName": "Panda Theme", 43 | "publisherId": "75da7fb3-a5a8-4f27-8083-e61b15b7b2a5" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /themes/js.yaml: -------------------------------------------------------------------------------- 1 | # ----------------------------------------------------------------------------- 2 | # JS 3 | # ----------------------------------------------------------------------------- 4 | - scope: entity.name.type.class.js 5 | settings: 6 | foreground: _light-blue 7 | 8 | - scope: keyword.control.as.js 9 | settings: 10 | foreground: _light-pink 11 | 12 | - scope: keyword.control.from.js 13 | settings: 14 | foreground: _light-pink 15 | 16 | - scope: keyword.control.export.js 17 | settings: 18 | foreground: _purple 19 | 20 | - scope: variable.language.this.js 21 | settings: 22 | fontStyle: italic 23 | 24 | - scope: support.class.console.js 25 | settings: 26 | fontStyle: italic 27 | 28 | # - scope: variable.other.readwrite.alias.js.jsx 29 | # settings: 30 | # foreground: _contrast-gray 31 | 32 | # ----------------------------------------------------------------------------- 33 | # JSX 34 | # ----------------------------------------------------------------------------- 35 | - scope: entity.name.tag.js, support.class.component.js 36 | settings: 37 | foreground: _red 38 | 39 | - scope: variable.language.super.js 40 | settings: 41 | foreground: _blue 42 | 43 | -------------------------------------------------------------------------------- /themes/template.yaml: -------------------------------------------------------------------------------- 1 | # Tagged template hbs`` 2 | - scope: meta.source.handlebars entity.name.tag 3 | settings: 4 | foreground: _light-blue 5 | # {{, {{{, () and 6 | - scope: punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag 7 | settings: 8 | fontStyle: italic 9 | foreground: _light-orange 10 | # name: Expression Name, 11 | - scope: entity.name.function.expression 12 | settings: 13 | foreground: _pink 14 | # Unescaped value 15 | - scope: entity.unescaped.expression 16 | settings: 17 | foreground: _purple 18 | # Matches pipes in as expressions 19 | - scope: constant.other.symbol 20 | settings: 21 | foreground: _green 22 | # Expression parameter NAME 23 | - scope: entity.expression variable.parameter.name 24 | settings: 25 | foreground: _orange 26 | # Expression parameter VALUE 27 | - scope: entity.expression variable.parameter.value 28 | settings: 29 | foreground: _light-blue 30 | # Ember built in helpers 31 | - scope: entity.expression support.function.builtin 32 | settings: 33 | foreground: _light-pink 34 | # HTML tag names 35 | - scope: entity.name.tag.html 36 | settings: 37 | foreground: _light-orange 38 | # HTML attribute NAME 39 | - scope: entity.other.attribute-name.handlebars 40 | settings: 41 | foreground: _light-orange 42 | # ----------------------------------------------------------------------------- 43 | # JSX 44 | # ----------------------------------------------------------------------------- 45 | # Component names 46 | - scope: support.class.component 47 | settings: 48 | foreground: _pink 49 | fontStyle: italic 50 | # HTML tag names 51 | - scope: meta.tag.js entity.name.tag 52 | settings: 53 | foreground: _light-orange 54 | # HTML and Component attribute's name 55 | - scope: entity.other.attribute-name 56 | settings: 57 | foreground: _orange 58 | -------------------------------------------------------------------------------- /themes/markdown.yaml: -------------------------------------------------------------------------------- 1 | # Bold Text 2 | - scope: markup.bold 3 | settings: 4 | foreground: _orange 5 | font-weight: bold 6 | - scope: punctuation.definition.bold.markdown 7 | settings: 8 | foreground: _light-orange 9 | font-weight: bold 10 | - scope: markup.changed 11 | settings: 12 | foreground: _pink 13 | - scope: markup.deleted 14 | settings: 15 | foreground: _red 16 | # Italic Text 17 | - scope: markup.italic 18 | settings: 19 | foreground: _light-pink 20 | fontStyle: italic 21 | - scope: punctuation.definition.italic.markdown 22 | settings: 23 | foreground: _pink 24 | fontStyle: italic 25 | - scope: markup.inserted 26 | settings: 27 | foreground: _green 28 | # Headings Punctuation 29 | - scope: punctuation.definition.heading 30 | settings: 31 | foreground: _green 32 | # Headings Text 33 | - scope: entity.name.section.markdown 34 | settings: 35 | foreground: _contrast-gray 36 | # Block Quotes 37 | - scope: markup.quote 38 | settings: 39 | foreground: _orange 40 | # Inline code blocks: `code` 41 | - scope: markup.inline.raw 42 | settings: 43 | foreground: _green 44 | fontStyle: italic 45 | # List punctuation: - 46 | - scope: beginning.punctuation.definition.list 47 | settings: 48 | foreground: _pink 49 | # Fenced code blocks 50 | - scope: markup.fenced_code.block.markdown punctuation.definition.markdown 51 | settings: 52 | foreground: _light-gray 53 | - scope: fenced_code.block.language 54 | settings: 55 | foreground: _contrast-gray 56 | fontStyle: italic 57 | ######################################################## Links 58 | - scope: string.other.link 59 | settings: 60 | foreground: _contrast-gray 61 | fontStyle: normal 62 | - scope: meta.link.inline.markdown 63 | settings: 64 | foreground: _blue 65 | fontStyle: italic 66 | - scope: text.html.markdown punctuation.definition.string 67 | settings: 68 | foreground: _light-orange 69 | -------------------------------------------------------------------------------- /vsc-extension-quickstart.md: -------------------------------------------------------------------------------- 1 | # Welcome to your VS Code Extension 2 | 3 | ## What's in the folder 4 | * This folder contains all of the files necessary for your color theme extension 5 | * `package.json` - this is the manifest file that defines the location of the theme file 6 | and specifies the base theme of the theme 7 | * `themes/Panda-color-theme.json` - the color theme definition file 8 | 9 | ## Get up and running straight away 10 | * press `F5` to open a new window with your extension loaded 11 | * open `File > Preferences > Color Themes` and pick your color theme 12 | * Open a file that has a language associated. The languages' configured grammar will tokenize the text and assign 'scopes' to the tokens. To examine these scopes, invoke the `Inspect TM Scopes` command from the Commmand Palette (`Ctrl+Shift+P` or `Cmd+Shift+R` on Mac) . 13 | 14 | ## Make changes 15 | * you can relaunch the extension from the debug toolbar after making changes to the files listed above 16 | * you can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes 17 | * When editing workbench colors, it's easiest to test the colors in the settings under `workbench.colorCustomizations`. When done, run the `Generate Color Theme From Current Settings` command to generate an updated content for the color theme definition file. 18 | 19 | ## Adopt your theme to Visual Studio Code 20 | * The token colorization is done based on standard TextMate themes. Colors are matched against one or more scopes. 21 | To learn about what scopes are used where, check out the [TextMate documentation](https://manual.macromates.com/en/themes) 22 | and the [Scope Naming](https://www.sublimetext.com/docs/3/scope_naming.html) documentation from Sublime. 23 | * A great place to examine themes is [here](https://tmtheme-editor.herokuapp.com/#!/editor/theme/Monokai). 24 | 25 | ## Install your extension 26 | * To start using your extension with Visual Studio Code copy it into the `/.vscode/extensions` folder and restart Code. 27 | * To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension. 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Panda Logo](https://cdn.rawgit.com/tinkertrain/panda-syntax-vscode/master/assets/cover.jpg) 2 | 3 | A _Superminimal_, _dark_ Syntax Theme. This is the latest version of the **Panda Syntax** theme. It's a _dark_ syntax theme crafted especially for [Visual Studio Code](https://code.visualstudio.com) [New Version], with subtle colors that are meant to be easy on the eyes. 4 | 5 | --- 6 | ![Main ScreenShot](https://cdn.rawgit.com/tinkertrain/panda-syntax-vscode/master/assets/editor.jpg) 7 | > The font in the screenshot is `Operator Mono`. From $199, exclusively at H&Co. http://www.typography.com/blog/introducing-operator 8 | 9 | --- 10 | 11 | ## ⌨️ Installation 12 | Preferences: 13 | 14 | 1. Go to `Extensions` 15 | 2. Search for `Panda` and install it. 16 | 3. Go to `Color Themes` and choose `Panda Syntax` as the color theme or `CMD + Shift + P` and enter Command `> color theme` and choose `Panda Syntax`. 17 | 18 | 19 | ## 唥 Language support 20 | Panda Syntax Theme Supported Packages `language-*` and optimized for many languages: 21 | * _Markup:_ `HTML`, `MarkDown(.md)`, `jsdoc`. 22 | * _CSS:_ `Sass`, `SCSS`, `LESS`. 23 | * _JavaScript:_ `JS`, `ES6`, `JSX`, `CoffeeScript`. 24 | * _Regex_. 25 | 26 | --- 27 | 28 | ## 📞 Recommended 29 | Panda Created for Editors and Terminals. [Panda Project](http://panda.siamak.work). 30 | 31 | [![Panda Ports](https://raw.githubusercontent.com/siamak/atom-panda-syntax/master/screenshots/ports.jpg)](http://panda.siamak.work) 32 | 33 | --- 34 | 35 | ## 🐛 Issues and contributing 36 | If you would like to create a new Issue or PR, please do so in: 37 | * This repo if it's about color changes, first read [Color Semantics](https://github.com/tinkertrain/panda-syntax-vscode/blob/master/Color%20Semantics.md) and Change `themes` files. 38 | 39 | ## 🐼 About Pandas 40 | ![Pandas ScreenShot](https://raw.githubusercontent.com/siamak/atom-panda-syntax/master/screenshots/pandas.png) 41 | 42 | 1. Sleep 12-14 hours per day 43 | 2. Eat 12-14 hours per day 44 | 3. Consume 10 to 18 kilos of raw bamboo per day 45 | 4. Poop 10 to 18 kilos of processed bamboo per day. 46 | 5. Panda sex is awkward. Naps are much more fun. 47 | 48 | > Picture & Contents from: https://dribbble.com/shots/2354579-Panda-Icon-Party. 49 | -------------------------------------------------------------------------------- /themes/colors.yaml: -------------------------------------------------------------------------------- 1 | # ----------------------------------------------------------------------------- 2 | # Gray Scale 3 | # ----------------------------------------------------------------------------- 4 | _very-light-gray: '#E6E6E6' # Primary font color 5 | _very-light-gray-fade: '#FFFFFF' 6 | _lighter-gray: '#CDCDCD' 7 | _lighter-gray-fade: '#CDCDCD30' 8 | _contrast-gray: '#BBBBBB' 9 | _light-gray: '#757575' 10 | _light-midnight: '#676B79' 11 | _steel-gray: '#3E4250' 12 | _gray: '#373B41' 13 | _gray-fade: '#373B4199' 14 | _seal: '#31353a' # Light background 15 | _very-dark-gray: '#2a2c2d' # Dark background 16 | _charcoal: '#222223' # Use for borders between gray backgrounds 17 | 18 | # ----------------------------------------------------------------------------- 19 | # Blue+Purple+Green 20 | # ----------------------------------------------------------------------------- 21 | _blue: '#45A9F9' 22 | _light-blue: '#6FC1FF' 23 | _purple: '#B084EB' 24 | _purple-fade: '#B084EB60' 25 | _light-purple: '#BCAAFE' 26 | _green: '#19f9d8' 27 | _light-green: '#6FE7D2' 28 | _green-fade: '#19f9d899' 29 | # ----------------------------------------------------------------------------- 30 | # Pink+Red+Orange 31 | # ----------------------------------------------------------------------------- 32 | _red: '#FF2C6D' 33 | _light-red: '#FF4B82' 34 | _orange: '#FFB86C' 35 | _light-orange: '#FFCC95' 36 | _light-orange-fade: '#FFCC9560' 37 | _pink: '#FF75B5' 38 | _light-pink: '#FF9AC1' 39 | _light-pink-fade: '#FF9AC170' 40 | # ----------------------------------------------------------------------------- 41 | # Element Colors 42 | # ----------------------------------------------------------------------------- 43 | # Two backgrounds are used to provide contrast between section in editor. 44 | # Foreground color for normal font, use green for contrast fonts 45 | _background-dark: '#242526' # very-dark-gray 46 | _background-light: '#292A2B' # seal 47 | _foreground: '#E6E6E6' # very-light-gray 48 | _diff-green: '#19f9d866' 49 | _diff-red: '#FF4B8266' 50 | _merge-current-header: '#B084EB90' # purple with alpha 51 | _merge-current-content: '#B084EB40' # same purple less alpha 52 | _merge-incoming-header: '#45A9F990' # orange with alpha 53 | _merge-incoming-content: '#FFB86C40' # same orange less alpha 54 | _transparent: '#00000000' 55 | # Git Colors 56 | _git-modified: '#FFCC95' # light-orange 57 | _git-added: '#19f9d8' # green 58 | _git-removed: '#FF4B82' # light-red 59 | _git-ignored: '#757575' # light-grey 60 | # Linter Colors 61 | _error: '#FF4B82' # light-red 62 | _warning: '#FFCC95' # light-orange 63 | _info: '#6FC1FF' # light-blue 64 | 65 | # Transparent Hex Table: https://stackoverflow.com/questions/23201134/transparent-argb-hex-value 66 | -------------------------------------------------------------------------------- /themes/panda-base.yaml: -------------------------------------------------------------------------------- 1 | $schema: vscode://schemas/color-theme 2 | author: Siamak Mokhtari, Extended by Dan Hedgecock 3 | name: Panda Syntax – Beta 4 | colorSpaceName: sRGB 5 | semanticClass: theme.dark.sublime_panda_syntax 6 | tokenColors: 7 | 8 | # ----------------------------------------------------------------------------- 9 | # Comments 10 | # ----------------------------------------------------------------------------- 11 | # Generic matches 12 | - scope: comment 13 | settings: 14 | foreground: _light-midnight 15 | fontStyle: italic 16 | 17 | # ----------------------------------------------------------------------------- 18 | # Keywords 19 | # ----------------------------------------------------------------------------- 20 | # Generic matches 21 | - scope: keyword 22 | settings: 23 | foreground: _pink 24 | # 1. Language features like: import, return, if, else 25 | # 2. `new` keyword 26 | - scope: keyword.control, keyword.operator.new 27 | settings: 28 | foreground: _pink 29 | 30 | # Make operators light gray by default 31 | - scope: keyword.operator 32 | settings: 33 | foreground: _very-light-gray 34 | # Make logical operators light orange, eg ||, === 35 | - scope: keyword.operator.logical, keyword.operator.comparison 36 | settings: 37 | foreground: _light-orange 38 | # Make Rust operators pink: &, ::, =>, etc. 39 | - scope: keyword.operator.misc, keyword.operator.sigil 40 | settings: 41 | foreground: _pink 42 | 43 | - scope: keyword.operator.expression 44 | settings: 45 | foreground: _orange 46 | 47 | # ----------------------------------------------------------------------------- 48 | # Storage 49 | # ----------------------------------------------------------------------------- 50 | # Generic matches 51 | - scope: storage 52 | settings: 53 | foreground: _orange 54 | 55 | # ----------------------------------------------------------------------------- 56 | # Constants 57 | # ----------------------------------------------------------------------------- 58 | # Generic matches 59 | - scope: constant 60 | settings: 61 | foreground: _orange 62 | # Makes true/false booleans, null, undefined blue 63 | # - scope: constant.language 64 | # settings: 65 | # fontStyle: italic 66 | # Regex, string escape `\` 67 | - scope: constant.character.escape 68 | settings: 69 | foreground: _blue 70 | 71 | # ----------------------------------------------------------------------------- 72 | # Variables && Parameters 73 | # ----------------------------------------------------------------------------- 74 | # Generic matches 75 | - scope: variable 76 | settings: 77 | foreground: _very-light-gray 78 | # Function parameters 79 | - scope: variable.parameter 80 | settings: 81 | foreground: _contrast-gray 82 | # fontStyle: italic 83 | 84 | # Destructuring assignment variables 85 | - scope: meta.object-binding-pattern-variable.js variable 86 | settings: 87 | foreground: _light-orange 88 | # Special treatment for CONSTANT variables and this, variable interpolation matches? 89 | - scope: variable.other.constant, variable.language.this, variable.interpolation 90 | settings: 91 | foreground: _light-pink 92 | 93 | # ----------------------------------------------------------------------------- 94 | # Objects 95 | # ----------------------------------------------------------------------------- 96 | # Matches when an object is accessed. 97 | - scope: variable.other.object 98 | settings: 99 | foreground: _light-pink 100 | # The accessed property match 101 | - scope: variable.other.property 102 | settings: 103 | foreground: _very-light-gray 104 | 105 | # ----------------------------------------------------------------------------- 106 | # Invalid 107 | # ----------------------------------------------------------------------------- 108 | - scope: invalid.illegal 109 | settings: 110 | border-bottom: 1px dashed rgba(255, 44, 109, 0.5) 111 | - scope: invalid.deprecated 112 | settings: 113 | background-foreground: rgba(255, 44, 109, 0.62) 114 | 115 | # ----------------------------------------------------------------------------- 116 | # Strings 117 | # ----------------------------------------------------------------------------- 118 | # Generic string match 119 | - scope: string 120 | settings: 121 | foreground: _green 122 | 123 | # ----------------------------------------------------------------------------- 124 | # Punctuation 125 | # ----------------------------------------------------------------------------- 126 | # Template string ${} 127 | - scope: punctuation.definition.template-expression 128 | settings: 129 | foreground: _light-orange 130 | 131 | # ----------------------------------------------------------------------------- 132 | # Support 133 | # ----------------------------------------------------------------------------- 134 | # Generic support match 135 | - scope: support 136 | settings: 137 | foreground: _light-orange 138 | # Matches a Class reference when referenced later 139 | - scope: support.class 140 | settings: 141 | foreground: _light-orange 142 | # Matches: MODULE, MODULE.EXPORTS 143 | - scope: support.type.object.module.js 144 | settings: 145 | foreground: _purple 146 | # Matches: console. 147 | - scope: support.function 148 | settings: 149 | foreground: _light-blue 150 | 151 | # ----------------------------------------------------------------------------- 152 | # Entities 153 | # ----------------------------------------------------------------------------- 154 | # Function names 155 | - scope: entity.name.function 156 | settings: 157 | foreground: _light-blue 158 | # Class extensions: eg extends `Component` 159 | - scope: entity.other.inherited-class 160 | settings: 161 | foreground: _light-pink 162 | # YAML keys 163 | - scope: entity.name.tag.yaml 164 | settings: 165 | foreground: _light-orange 166 | 167 | # ----------------------------------------------------------------------------- 168 | # Meta 169 | # ----------------------------------------------------------------------------- 170 | # JS Class/Method decorators -> @ punctuation is orange 171 | - scope: meta.decorator punctuation.decorator 172 | settings: 173 | foreground: _orange 174 | # JS Class/Method decorators -> blue function name 175 | - scope: meta.decorator variable 176 | settings: 177 | foreground: _light-blue 178 | 179 | # ----------------------------------------------------------------------------- 180 | # Docker 181 | # ----------------------------------------------------------------------------- 182 | # Docker file `FROM` 183 | - scope: keyword.other.special-method 184 | settings: 185 | foreground: _blue 186 | 187 | # ----------------------------------------------------------------------------- 188 | # Styles (CSS/SCSS/LESS) 189 | # ----------------------------------------------------------------------------- 190 | # Expressions like @import 191 | - scope: keyword.control.at-rule 192 | settings: 193 | foreground: _purple 194 | # Style !important declarations 195 | - scope: keyword.other.important 196 | settings: 197 | foreground: _light-red 198 | - scope: variable.interpolation 199 | settings: 200 | foreground: _pink 201 | 202 | # ----------------------------------------------------------------------------- 203 | # Name of type (struct, class, etc.) 204 | # ----------------------------------------------------------------------------- 205 | # Generic name of type match 206 | - scope: entity.name.type 207 | settings: 208 | foreground: _green 209 | fontStyle: italic 210 | -------------------------------------------------------------------------------- /themes/workbench.yaml: -------------------------------------------------------------------------------- 1 | colors: 2 | # ----------------------------------------------------------------------------- 3 | # Base Colors 4 | # ----------------------------------------------------------------------------- 5 | # Defaults for editor elements, will be used if not set by a specific component 6 | # focusBorder. TODO: widget.shadow, selection.background 7 | foreground: _foreground 8 | errorForeground: _light-red 9 | # ----------------------------------------------------------------------------- 10 | # Activity Bar 11 | # ----------------------------------------------------------------------------- 12 | # The far left sidebar (which can be hidden with: Toggle Activity Bar Visibility!) 13 | activityBar.background: _charcoal 14 | activityBar.foreground: _foreground 15 | activityBar.border: _charcoal 16 | activityBarBadge.background: _green 17 | activityBarBadge.foreground: _background-dark 18 | # ----------------------------------------------------------------------------- 19 | # Badges 20 | # ----------------------------------------------------------------------------- 21 | badge.background: _light-blue 22 | badge.foreground: _background-dark 23 | # ----------------------------------------------------------------------------- 24 | # ProgressBar 25 | # ----------------------------------------------------------------------------- 26 | progressBar.background: _purple 27 | # ----------------------------------------------------------------------------- 28 | # Buttons 29 | # ----------------------------------------------------------------------------- 30 | button.background: _blue 31 | button.foreground: _very-light-gray-fade 32 | button.hoverBackground: _light-midnight 33 | # ----------------------------------------------------------------------------- 34 | # Diff View 35 | # ----------------------------------------------------------------------------- 36 | diffEditor.insertedTextBackground: _diff-green 37 | # diffEditor.insertedTextBorder: NONE 38 | diffEditor.removedTextBackground: _diff-red 39 | # diffEditor.removedTextBorder: NONE 40 | # ----------------------------------------------------------------------------- 41 | # Merge Conflicts 42 | # ----------------------------------------------------------------------------- 43 | merge.currentHeaderBackground: _merge-current-header 44 | merge.currentContentBackground: _merge-current-content 45 | merge.incomingHeaderBackground: _merge-incoming-header 46 | merge.incomingContentBackground: _merge-incoming-content 47 | # merge.border: NONE 48 | # ----------------------------------------------------------------------------- 49 | # Editor 50 | # ----------------------------------------------------------------------------- 51 | editor.background: _background-light 52 | editor.foreground: _foreground 53 | editorCursor.foreground: _light-red 54 | editorRuler.foreground: _purple-fade 55 | editorBracketMatch.border: _green 56 | editorCodeLens.foreground: _merge-incoming-content 57 | editorWhitespace.foreground: _steel-gray 58 | # editorBracketMatch.background: NONE 59 | # Selection highlight settings are applied when text is selected, the highlight 60 | # background will automatically highlight all other matches of the selected text 61 | editor.selectionBackground: _merge-incoming-content 62 | editor.inactiveSelectionBackground: _merge-incoming-content 63 | editor.selectionHighlightBackground: _merge-incoming-content 64 | # Word highlight settings are used when the cursor is inside of a symbol and will 65 | # automatically highlight all other occurences of that symbol (with the option for 66 | # different colors for read vs write access of symbol). Note that this overrides 67 | # the selection background after double clicking a symbol to select, but not when 68 | # selecting with keyboard 69 | # TODO: Make these more subtle, they're distracting 70 | editor.wordHighlightBackground: _light-orange-fade # During read access, like console.log 71 | editor.wordHighlightStrongBackground: _light-pink-fade # During write access, like const = 72 | # Find match settings are triggered by current find/replace dialong in top right 73 | editor.findMatchBackground: _merge-current-header 74 | editor.findMatchHighlightBackground: _merge-incoming-content 75 | # editor.findRangeHighlightBackground: ??? What does this do ??? 76 | # Currently active line background 77 | editor.lineHighlightBackground: _seal 78 | # ----------------------------------------------------------------------------- 79 | # Widgets 80 | # ----------------------------------------------------------------------------- 81 | # Widgets are feautures inside the main editor like snippets, autocomplete, in 82 | # file find. 83 | editorWidget.background: _very-dark-gray 84 | editorWidget.border: _gray 85 | # This sets the background for suggestions complete currently selected element 86 | editorSuggestWidget.selectedBackground: _green-fade 87 | editorHoverWidget.background: _seal 88 | # ----------------------------------------------------------------------------- 89 | # Overview Ruler 90 | # ----------------------------------------------------------------------------- 91 | # The overview ruler is the thin bar at the far right of the editor, it has 92 | # decorations for git status and linter warnings 93 | editorOverviewRuler.border: _transparent 94 | # editorOverviewRuler.findMatchForeground: TODO 95 | # editorOverviewRuler.rangeHighlightForeground: TODO 96 | # editorOverviewRuler.selectionHighlightForeground: TODO 97 | # editorOverviewRuler.wordHighlightForeground: TODO 98 | # editorOverviewRuler.wordHighlightStrongForeground: TODO 99 | editorOverviewRuler.modifiedForeground: _git-modified 100 | editorOverviewRuler.addedForeground: _git-added 101 | editorOverviewRuler.deletedForeground: _git-removed 102 | editorOverviewRuler.errorForeground: _error 103 | editorOverviewRuler.warningForeground: _warning 104 | editorOverviewRuler.infoForeground: _info 105 | # ----------------------------------------------------------------------------- 106 | # Extensions 107 | # ----------------------------------------------------------------------------- 108 | extensionButton.prominentForeground: _very-light-gray-fade 109 | extensionButton.prominentBackground: _blue 110 | extensionButton.prominentHoverBackground: _light-midnight 111 | # ----------------------------------------------------------------------------- 112 | # Errors 113 | # ----------------------------------------------------------------------------- 114 | # Themes the squiggly+borders underneath linter errors 115 | editorError.foreground: _error 116 | editorError.border: _background-light 117 | editorWarning.foreground: _warning 118 | editorWarning.border: _background-light 119 | # ----------------------------------------------------------------------------- 120 | # Git Gutters 121 | # ----------------------------------------------------------------------------- 122 | editorGutter.modifiedBackground: _git-modified 123 | editorGutter.addedBackground: _git-added 124 | editorGutter.deletedBackground: _git-removed 125 | # ----------------------------------------------------------------------------- 126 | # Git Decoration 127 | # ----------------------------------------------------------------------------- 128 | gitDecoration.ignoredResourceForeground: _git-ignored 129 | # ----------------------------------------------------------------------------- 130 | # List 131 | # ----------------------------------------------------------------------------- 132 | # List elements are inside the sidebar + command dropdown 133 | # Mouse hover 134 | list.hoverBackground: _background-light 135 | list.hoverForeground: _lighter-gray 136 | 137 | # Keyboard focus 138 | list.focusBackground: _background-light 139 | list.focusForeground: _green 140 | 141 | # Selected item when the list container is in focus 142 | list.activeSelectionBackground: _background-light 143 | list.activeSelectionForeground: _green 144 | # Selected item when the list container is NOT in focus 145 | list.inactiveSelectionBackground: _background-light 146 | list.inactiveSelectionForeground: _green 147 | # The text that matches a search term inside of lists 148 | list.highlightForeground: _light-blue 149 | # ----------------------------------------------------------------------------- 150 | # Sidebar 151 | # ----------------------------------------------------------------------------- 152 | # The side bar includes the file tree, search interface, git status and debug 153 | # interfaces. It is located between the Activity Bar and the Editor. 154 | sideBar.background: _background-dark 155 | sideBar.foreground: _contrast-gray 156 | sideBar.border: _charcoal 157 | # ----------------------------------------------------------------------------- 158 | # Scrollbar 159 | # ----------------------------------------------------------------------------- 160 | # The .shadow shows under headers in the sideBar and editor when scrolled. 161 | # The scrollbarSlider themes BOTH the scrollbar in sideBar/editor AND the minimap 162 | # overlays, so it's important to use transparent colors. 163 | scrollbar.shadow: _charcoal 164 | scrollbarSlider.background: _gray-fade 165 | scrollbarSlider.activeBackground: _light-gray 166 | scrollbarSlider.hoverBackground: _light-gray 167 | # ----------------------------------------------------------------------------- 168 | # Status Bar 169 | # ----------------------------------------------------------------------------- 170 | # Bar at bottom of editor with status updates 171 | statusBar.background: _charcoal 172 | statusBar.foreground: _foreground 173 | statusBar.noFolderBackground: _background-dark 174 | statusBar.noFolderForeground: _foreground 175 | statusBar.debuggingBackground: _purple 176 | statusBar.debuggingForeground: _foreground 177 | # statusBar.border: NONE 178 | # statusBarItem.prominentBackground: NONE 179 | # statusBarItem.prominentHoverBackground: NONE 180 | # ----------------------------------------------------------------------------- 181 | # Title Bar 182 | # ----------------------------------------------------------------------------- 183 | titleBar.activeBackground: _background-dark 184 | titleBar.activeForeground: _foreground 185 | titleBar.inactiveBackground: _background-dark 186 | titleBar.inactiveForeground: _foreground 187 | # ----------------------------------------------------------------------------- 188 | # Tabs 189 | # ----------------------------------------------------------------------------- 190 | tab.activeBackground: _background-light 191 | tab.activeForeground: _green 192 | tab.activeBorder: _green 193 | tab.inactiveBackground: _background-dark 194 | tab.inactiveForeground: _foreground 195 | # tab.unfocusedActiveBorder: NONE 196 | # ----------------------------------------------------------------------------- 197 | # Terminal 198 | # ----------------------------------------------------------------------------- 199 | terminalCursor.background: _foreground 200 | terminalCursor.foreground: _light-red 201 | terminal.ansiBlue: _blue 202 | terminal.ansiBrightBlack: _light-gray 203 | terminal.ansiBrightBlue: _light-blue 204 | terminal.ansiBrightCyan: _light-purple 205 | terminal.ansiBrightGreen: _green 206 | terminal.ansiBrightMagenta: _light-pink 207 | terminal.ansiBrightRed: _red 208 | terminal.ansiBrightWhite: _foreground 209 | terminal.ansiBrightYellow: _light-orange 210 | terminal.ansiCyan: _purple 211 | terminal.ansiGreen: _green 212 | terminal.ansiMagenta: _pink 213 | terminal.ansiRed: _red 214 | terminal.ansiWhite: _lighter-gray 215 | terminal.ansiYellow: _orange 216 | -------------------------------------------------------------------------------- /dist/Panda.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "vscode://schemas/color-theme", 3 | "author": "Siamak Mokhtari, Extended by Dan Hedgecock", 4 | "name": "Panda Syntax – Beta", 5 | "colorSpaceName": "sRGB", 6 | "semanticClass": "theme.dark.sublime_panda_syntax", 7 | "tokenColors": [ 8 | { 9 | "scope": "comment", 10 | "settings": { 11 | "foreground": "#676B79", 12 | "fontStyle": "italic" 13 | } 14 | }, 15 | { 16 | "scope": "keyword", 17 | "settings": { 18 | "foreground": "#FF75B5" 19 | } 20 | }, 21 | { 22 | "scope": "keyword.control, keyword.operator.new", 23 | "settings": { 24 | "foreground": "#FF75B5" 25 | } 26 | }, 27 | { 28 | "scope": "keyword.operator", 29 | "settings": { 30 | "foreground": "#E6E6E6" 31 | } 32 | }, 33 | { 34 | "scope": "keyword.operator.logical, keyword.operator.comparison", 35 | "settings": { 36 | "foreground": "#FFCC95" 37 | } 38 | }, 39 | { 40 | "scope": "keyword.operator.misc, keyword.operator.sigil", 41 | "settings": { 42 | "foreground": "#FF75B5" 43 | } 44 | }, 45 | { 46 | "scope": "keyword.operator.expression", 47 | "settings": { 48 | "foreground": "#FFB86C" 49 | } 50 | }, 51 | { 52 | "scope": "storage", 53 | "settings": { 54 | "foreground": "#FFB86C" 55 | } 56 | }, 57 | { 58 | "scope": "constant", 59 | "settings": { 60 | "foreground": "#FFB86C" 61 | } 62 | }, 63 | { 64 | "scope": "constant.character.escape", 65 | "settings": { 66 | "foreground": "#45A9F9" 67 | } 68 | }, 69 | { 70 | "scope": "variable", 71 | "settings": { 72 | "foreground": "#E6E6E6" 73 | } 74 | }, 75 | { 76 | "scope": "variable.parameter", 77 | "settings": { 78 | "foreground": "#BBBBBB" 79 | } 80 | }, 81 | { 82 | "scope": "meta.object-binding-pattern-variable.js variable", 83 | "settings": { 84 | "foreground": "#FFCC95" 85 | } 86 | }, 87 | { 88 | "scope": "variable.other.constant, variable.language.this, variable.interpolation", 89 | "settings": { 90 | "foreground": "#FF9AC1" 91 | } 92 | }, 93 | { 94 | "scope": "variable.other.object", 95 | "settings": { 96 | "foreground": "#FF9AC1" 97 | } 98 | }, 99 | { 100 | "scope": "variable.other.property", 101 | "settings": { 102 | "foreground": "#E6E6E6" 103 | } 104 | }, 105 | { 106 | "scope": "invalid.illegal", 107 | "settings": { 108 | "border-bottom": "1px dashed rgba(255, 44, 109, 0.5)" 109 | } 110 | }, 111 | { 112 | "scope": "invalid.deprecated", 113 | "settings": { 114 | "background-foreground": "rgba(255, 44, 109, 0.62)" 115 | } 116 | }, 117 | { 118 | "scope": "string", 119 | "settings": { 120 | "foreground": "#19f9d8" 121 | } 122 | }, 123 | { 124 | "scope": "punctuation.definition.template-expression", 125 | "settings": { 126 | "foreground": "#FFCC95" 127 | } 128 | }, 129 | { 130 | "scope": "support", 131 | "settings": { 132 | "foreground": "#FFCC95" 133 | } 134 | }, 135 | { 136 | "scope": "support.class", 137 | "settings": { 138 | "foreground": "#FFCC95" 139 | } 140 | }, 141 | { 142 | "scope": "support.type.object.module.js", 143 | "settings": { 144 | "foreground": "#B084EB" 145 | } 146 | }, 147 | { 148 | "scope": "support.function", 149 | "settings": { 150 | "foreground": "#6FC1FF" 151 | } 152 | }, 153 | { 154 | "scope": "entity.name.function", 155 | "settings": { 156 | "foreground": "#6FC1FF" 157 | } 158 | }, 159 | { 160 | "scope": "entity.other.inherited-class", 161 | "settings": { 162 | "foreground": "#FF9AC1" 163 | } 164 | }, 165 | { 166 | "scope": "entity.name.tag.yaml", 167 | "settings": { 168 | "foreground": "#FFCC95" 169 | } 170 | }, 171 | { 172 | "scope": "meta.decorator punctuation.decorator", 173 | "settings": { 174 | "foreground": "#FFB86C" 175 | } 176 | }, 177 | { 178 | "scope": "meta.decorator variable", 179 | "settings": { 180 | "foreground": "#6FC1FF" 181 | } 182 | }, 183 | { 184 | "scope": "keyword.other.special-method", 185 | "settings": { 186 | "foreground": "#45A9F9" 187 | } 188 | }, 189 | { 190 | "scope": "keyword.control.at-rule", 191 | "settings": { 192 | "foreground": "#B084EB" 193 | } 194 | }, 195 | { 196 | "scope": "keyword.other.important", 197 | "settings": { 198 | "foreground": "#FF4B82" 199 | } 200 | }, 201 | { 202 | "scope": "variable.interpolation", 203 | "settings": { 204 | "foreground": "#FF75B5" 205 | } 206 | }, 207 | { 208 | "scope": "entity.name.type", 209 | "settings": { 210 | "foreground": "#19f9d8", 211 | "fontStyle": "italic" 212 | } 213 | }, 214 | { 215 | "scope": "meta.source.handlebars entity.name.tag", 216 | "settings": { 217 | "foreground": "#6FC1FF" 218 | } 219 | }, 220 | { 221 | "scope": "punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag", 222 | "settings": { 223 | "fontStyle": "italic", 224 | "foreground": "#FFCC95" 225 | } 226 | }, 227 | { 228 | "scope": "entity.name.function.expression", 229 | "settings": { 230 | "foreground": "#FF75B5" 231 | } 232 | }, 233 | { 234 | "scope": "entity.unescaped.expression", 235 | "settings": { 236 | "foreground": "#B084EB" 237 | } 238 | }, 239 | { 240 | "scope": "constant.other.symbol", 241 | "settings": { 242 | "foreground": "#19f9d8" 243 | } 244 | }, 245 | { 246 | "scope": "entity.expression variable.parameter.name", 247 | "settings": { 248 | "foreground": "#FFB86C" 249 | } 250 | }, 251 | { 252 | "scope": "entity.expression variable.parameter.value", 253 | "settings": { 254 | "foreground": "#6FC1FF" 255 | } 256 | }, 257 | { 258 | "scope": "entity.expression support.function.builtin", 259 | "settings": { 260 | "foreground": "#FF9AC1" 261 | } 262 | }, 263 | { 264 | "scope": "entity.name.tag.html", 265 | "settings": { 266 | "foreground": "#FFCC95" 267 | } 268 | }, 269 | { 270 | "scope": "entity.other.attribute-name.handlebars", 271 | "settings": { 272 | "foreground": "#FFCC95" 273 | } 274 | }, 275 | { 276 | "scope": "support.class.component", 277 | "settings": { 278 | "foreground": "#FF75B5", 279 | "fontStyle": "italic" 280 | } 281 | }, 282 | { 283 | "scope": "meta.tag.js entity.name.tag", 284 | "settings": { 285 | "foreground": "#FFCC95" 286 | } 287 | }, 288 | { 289 | "scope": "entity.other.attribute-name", 290 | "settings": { 291 | "foreground": "#FFB86C" 292 | } 293 | }, 294 | { 295 | "scope": "markup.bold", 296 | "settings": { 297 | "foreground": "#FFB86C", 298 | "font-weight": "bold" 299 | } 300 | }, 301 | { 302 | "scope": "punctuation.definition.bold.markdown", 303 | "settings": { 304 | "foreground": "#FFCC95", 305 | "font-weight": "bold" 306 | } 307 | }, 308 | { 309 | "scope": "markup.changed", 310 | "settings": { 311 | "foreground": "#FF75B5" 312 | } 313 | }, 314 | { 315 | "scope": "markup.deleted", 316 | "settings": { 317 | "foreground": "#FF2C6D" 318 | } 319 | }, 320 | { 321 | "scope": "markup.italic", 322 | "settings": { 323 | "foreground": "#FF9AC1", 324 | "fontStyle": "italic" 325 | } 326 | }, 327 | { 328 | "scope": "punctuation.definition.italic.markdown", 329 | "settings": { 330 | "foreground": "#FF75B5", 331 | "fontStyle": "italic" 332 | } 333 | }, 334 | { 335 | "scope": "markup.inserted", 336 | "settings": { 337 | "foreground": "#19f9d8" 338 | } 339 | }, 340 | { 341 | "scope": "punctuation.definition.heading", 342 | "settings": { 343 | "foreground": "#19f9d8" 344 | } 345 | }, 346 | { 347 | "scope": "entity.name.section.markdown", 348 | "settings": { 349 | "foreground": "#BBBBBB" 350 | } 351 | }, 352 | { 353 | "scope": "markup.quote", 354 | "settings": { 355 | "foreground": "#FFB86C" 356 | } 357 | }, 358 | { 359 | "scope": "markup.inline.raw", 360 | "settings": { 361 | "foreground": "#19f9d8", 362 | "fontStyle": "italic" 363 | } 364 | }, 365 | { 366 | "scope": "beginning.punctuation.definition.list", 367 | "settings": { 368 | "foreground": "#FF75B5" 369 | } 370 | }, 371 | { 372 | "scope": "markup.fenced_code.block.markdown punctuation.definition.markdown", 373 | "settings": { 374 | "foreground": "#757575" 375 | } 376 | }, 377 | { 378 | "scope": "fenced_code.block.language", 379 | "settings": { 380 | "foreground": "#BBBBBB", 381 | "fontStyle": "italic" 382 | } 383 | }, 384 | { 385 | "scope": "string.other.link", 386 | "settings": { 387 | "foreground": "#BBBBBB", 388 | "fontStyle": "normal" 389 | } 390 | }, 391 | { 392 | "scope": "meta.link.inline.markdown", 393 | "settings": { 394 | "foreground": "#45A9F9", 395 | "fontStyle": "italic" 396 | } 397 | }, 398 | { 399 | "scope": "text.html.markdown punctuation.definition.string", 400 | "settings": { 401 | "foreground": "#FFCC95" 402 | } 403 | }, 404 | { 405 | "scope": "entity.name.type.class.js", 406 | "settings": { 407 | "foreground": "#6FC1FF" 408 | } 409 | }, 410 | { 411 | "scope": "keyword.control.as.js", 412 | "settings": { 413 | "foreground": "#FF9AC1" 414 | } 415 | }, 416 | { 417 | "scope": "keyword.control.from.js", 418 | "settings": { 419 | "foreground": "#FF9AC1" 420 | } 421 | }, 422 | { 423 | "scope": "keyword.control.export.js", 424 | "settings": { 425 | "foreground": "#B084EB" 426 | } 427 | }, 428 | { 429 | "scope": "variable.language.this.js", 430 | "settings": { 431 | "fontStyle": "italic" 432 | } 433 | }, 434 | { 435 | "scope": "support.class.console.js", 436 | "settings": { 437 | "fontStyle": "italic" 438 | } 439 | }, 440 | { 441 | "scope": "entity.name.tag.js, support.class.component.js", 442 | "settings": { 443 | "foreground": "#FF2C6D" 444 | } 445 | }, 446 | { 447 | "scope": "variable.language.super.js", 448 | "settings": { 449 | "foreground": "#45A9F9" 450 | } 451 | }, 452 | { 453 | "scope": "meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade", 454 | "settings": { 455 | "foreground": "#FF2C6D" 456 | } 457 | }, 458 | { 459 | "scope": "entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.tag.localname.xml", 460 | "settings": { 461 | "foreground": "#FF2C6D" 462 | } 463 | }, 464 | { 465 | "scope": "entity.name.tag.xml, meta.tag.xml", 466 | "settings": { 467 | "foreground": "#FF2C6D" 468 | } 469 | }, 470 | { 471 | "scope": "source.vue, entity.name.tag.pug, meta.tag.other", 472 | "settings": { 473 | "foreground": "#FF2C6D" 474 | } 475 | }, 476 | { 477 | "scope": "text.pug", 478 | "settings": { 479 | "foreground": "#FFFFFF" 480 | } 481 | }, 482 | { 483 | "scope": "entity.name.tag.css", 484 | "settings": { 485 | "foreground": "#FF2C6D" 486 | } 487 | }, 488 | { 489 | "scope": "support.type.property-name.css", 490 | "settings": { 491 | "foreground": "#E6E6E6" 492 | } 493 | }, 494 | { 495 | "scope": "variable.scss", 496 | "settings": { 497 | "foreground": "#FF9AC1" 498 | } 499 | }, 500 | { 501 | "scope": "entity.name.tag.reference.scss", 502 | "settings": { 503 | "foreground": "#FF2C6D" 504 | } 505 | }, 506 | { 507 | "scope": "keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css", 508 | "settings": { 509 | "foreground": "#FFB86C" 510 | } 511 | }, 512 | { 513 | "scope": "string.regexp", 514 | "settings": { 515 | "foreground": "#6FC1FF" 516 | } 517 | }, 518 | { 519 | "scope": "string.regexp keyword, string.regexp keyword.control", 520 | "settings": { 521 | "foreground": "#FF75B5", 522 | "fontStyle": "normal" 523 | } 524 | }, 525 | { 526 | "scope": "string.regexp keyword.operator", 527 | "settings": { 528 | "foreground": "#FF9AC1" 529 | } 530 | }, 531 | { 532 | "scope": "comment.block.documentation", 533 | "settings": { 534 | "fontStyle": "normal" 535 | } 536 | }, 537 | { 538 | "scope": "entity.name.type.instance.jsdoc punctuation.definition", 539 | "settings": { 540 | "foreground": "#FFCC95", 541 | "fontStyle": "italic" 542 | } 543 | }, 544 | { 545 | "scope": "entity.name.type.instance.jsdoc", 546 | "settings": { 547 | "foreground": "#CDCDCD", 548 | "fontStyle": "italic" 549 | } 550 | }, 551 | { 552 | "scope": "comment.block storage", 553 | "settings": { 554 | "foreground": "#FFCC95" 555 | } 556 | }, 557 | { 558 | "scope": "comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string", 559 | "settings": { 560 | "foreground": "#FF9AC1" 561 | } 562 | } 563 | ], 564 | "colors": { 565 | "foreground": "#E6E6E6", 566 | "errorForeground": "#FF4B82", 567 | "activityBar.background": "#222223", 568 | "activityBar.foreground": "#E6E6E6", 569 | "activityBar.border": "#222223", 570 | "activityBarBadge.background": "#19f9d8", 571 | "activityBarBadge.foreground": "#242526", 572 | "badge.background": "#6FC1FF", 573 | "badge.foreground": "#242526", 574 | "progressBar.background": "#B084EB", 575 | "button.background": "#45A9F9", 576 | "button.foreground": "#FFFFFF", 577 | "button.hoverBackground": "#676B79", 578 | "diffEditor.insertedTextBackground": "#19f9d866", 579 | "diffEditor.removedTextBackground": "#FF4B8266", 580 | "merge.currentHeaderBackground": "#B084EB90", 581 | "merge.currentContentBackground": "#B084EB40", 582 | "merge.incomingHeaderBackground": "#45A9F990", 583 | "merge.incomingContentBackground": "#FFB86C40", 584 | "editor.background": "#292A2B", 585 | "editor.foreground": "#E6E6E6", 586 | "editorCursor.foreground": "#FF4B82", 587 | "editorRuler.foreground": "#B084EB60", 588 | "editorBracketMatch.border": "#19f9d8", 589 | "editorCodeLens.foreground": "#FFB86C40", 590 | "editorWhitespace.foreground": "#3E4250", 591 | "editor.selectionBackground": "#FFB86C40", 592 | "editor.inactiveSelectionBackground": "#FFB86C40", 593 | "editor.selectionHighlightBackground": "#FFB86C40", 594 | "editor.wordHighlightBackground": "#FFCC9560", 595 | "editor.wordHighlightStrongBackground": "#FF9AC170", 596 | "editor.findMatchBackground": "#B084EB90", 597 | "editor.findMatchHighlightBackground": "#FFB86C40", 598 | "editor.lineHighlightBackground": "#31353a", 599 | "editorWidget.background": "#2a2c2d", 600 | "editorWidget.border": "#373B41", 601 | "editorSuggestWidget.selectedBackground": "#19f9d899", 602 | "editorHoverWidget.background": "#31353a", 603 | "editorOverviewRuler.border": "#00000000", 604 | "editorOverviewRuler.modifiedForeground": "#FFCC95", 605 | "editorOverviewRuler.addedForeground": "#19f9d8", 606 | "editorOverviewRuler.deletedForeground": "#FF4B82", 607 | "editorOverviewRuler.errorForeground": "#FF4B82", 608 | "editorOverviewRuler.warningForeground": "#FFCC95", 609 | "editorOverviewRuler.infoForeground": "#6FC1FF", 610 | "extensionButton.prominentForeground": "#FFFFFF", 611 | "extensionButton.prominentBackground": "#45A9F9", 612 | "extensionButton.prominentHoverBackground": "#676B79", 613 | "editorError.foreground": "#FF4B82", 614 | "editorError.border": "#292A2B", 615 | "editorWarning.foreground": "#FFCC95", 616 | "editorWarning.border": "#292A2B", 617 | "editorGutter.modifiedBackground": "#FFCC95", 618 | "editorGutter.addedBackground": "#19f9d8", 619 | "editorGutter.deletedBackground": "#FF4B82", 620 | "gitDecoration.ignoredResourceForeground": "#757575", 621 | "list.hoverBackground": "#292A2B", 622 | "list.hoverForeground": "#CDCDCD", 623 | "list.focusBackground": "#292A2B", 624 | "list.focusForeground": "#19f9d8", 625 | "list.activeSelectionBackground": "#292A2B", 626 | "list.activeSelectionForeground": "#19f9d8", 627 | "list.inactiveSelectionBackground": "#292A2B", 628 | "list.inactiveSelectionForeground": "#19f9d8", 629 | "list.highlightForeground": "#6FC1FF", 630 | "sideBar.background": "#242526", 631 | "sideBar.foreground": "#BBBBBB", 632 | "sideBar.border": "#222223", 633 | "scrollbar.shadow": "#222223", 634 | "scrollbarSlider.background": "#373B4199", 635 | "scrollbarSlider.activeBackground": "#757575", 636 | "scrollbarSlider.hoverBackground": "#757575", 637 | "statusBar.background": "#222223", 638 | "statusBar.foreground": "#E6E6E6", 639 | "statusBar.noFolderBackground": "#242526", 640 | "statusBar.noFolderForeground": "#E6E6E6", 641 | "statusBar.debuggingBackground": "#B084EB", 642 | "statusBar.debuggingForeground": "#E6E6E6", 643 | "titleBar.activeBackground": "#242526", 644 | "titleBar.activeForeground": "#E6E6E6", 645 | "titleBar.inactiveBackground": "#242526", 646 | "titleBar.inactiveForeground": "#E6E6E6", 647 | "tab.activeBackground": "#292A2B", 648 | "tab.activeForeground": "#19f9d8", 649 | "tab.activeBorder": "#19f9d8", 650 | "tab.inactiveBackground": "#242526", 651 | "tab.inactiveForeground": "#E6E6E6", 652 | "terminalCursor.background": "#E6E6E6", 653 | "terminalCursor.foreground": "#FF4B82", 654 | "terminal.ansiBlue": "#45A9F9", 655 | "terminal.ansiBrightBlack": "#757575", 656 | "terminal.ansiBrightBlue": "#6FC1FF", 657 | "terminal.ansiBrightCyan": "#BCAAFE", 658 | "terminal.ansiBrightGreen": "#19f9d8", 659 | "terminal.ansiBrightMagenta": "#FF9AC1", 660 | "terminal.ansiBrightRed": "#FF2C6D", 661 | "terminal.ansiBrightWhite": "#E6E6E6", 662 | "terminal.ansiBrightYellow": "#FFCC95", 663 | "terminal.ansiCyan": "#B084EB", 664 | "terminal.ansiGreen": "#19f9d8", 665 | "terminal.ansiMagenta": "#FF75B5", 666 | "terminal.ansiRed": "#FF2C6D", 667 | "terminal.ansiWhite": "#CDCDCD", 668 | "terminal.ansiYellow": "#FFB86C" 669 | } 670 | } --------------------------------------------------------------------------------