├── .gitignore ├── .vscode └── launch.json ├── .vscodeignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── assets ├── Logo.psd └── windows.psd ├── images ├── html.png ├── icon.png ├── js.png ├── json.png ├── jsx.png ├── scss.png └── windows.png ├── package.json ├── themes └── popping-and-locking-color-theme.json └── vsc-extension-quickstart.md /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .gitignore 3 | vsc-extension-quickstart.md 4 | assets -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 1.0.0 2 | 3 | - First publish. 4 | 5 | ## 1.1.2 6 | 7 | - Logo and minor fixes. 8 | 9 | ## 1.1.3 10 | 11 | - PeekView color change. 12 | 13 | ## 1.2.0 14 | 15 | - Sidebar, buttons, badges, focus and dropdown updated. 16 | 17 | ## 1.3.0 18 | 19 | - New screenshots, 20 | - Red cursor, 21 | - Notification, 22 | - JSX fix. 23 | 24 | ## 1.4.0 25 | 26 | - Fontstyle for strings changed to normal. 27 | 28 | ## 2.0.0 29 | 30 | Major change. Let me know if you liked old version better ;) 31 | 32 | - Search and selection highlight updated. More visable. 33 | - CSS colors changed. Better readability. 34 | - HTML (JSX) colors changed. Better readability. 35 | - Sidebar (explorer) highlighting changed. Open files more visable. 36 | - Git decoration in sidebar match rest of the theme. 37 | 38 | ## 2.0.1 39 | 40 | - CSS color fixed brackets fixed. 41 | 42 | ## 2.0.2 43 | 44 | - New screenshots. 45 | 46 | ## 2.0.3 47 | 48 | - New Logo, Windows screenshot. VSCode extension related changes. 49 | 50 | ## 2.0.4 51 | 52 | - Docs updated. 53 | 54 | ## 2.0.5 55 | 56 | - Add License. 57 | 58 | ## 2.0.6 59 | 60 | - Bracket Pair Colorizer 2 added to Readme 61 | 62 | ## 2.0.8 63 | 64 | - Add bracket colors. 65 | 66 | ## 2.0.10 67 | 68 | - Differentiate better between selected texts. 69 | - Improve README. Thx, @jsejcksn 70 | 71 | ## 2.0.11 72 | 73 | -Tweak selected test background 74 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # README 2 | 3 | ## About 4 | 5 | This theme is designed to have vivid colors to capture your attention, yet be 6 | easy on the eyes. It is originally based on the color themes VS Dark+, Gruvbox 7 | Dark, and One Dark, but has changed a lot since. It is designed for web 8 | languages (HTML, CSS, JS, and more). 9 | 10 | ## Tips for modifying the theme. 11 | 12 | - `tmTheme` is not being used since I think the default VS Dark+ works better 13 | for syntax highlighting and (seems to) require fewer configurations 14 | - In the `json` file, `scope` can be an `array` or a `string` of CSS classes 15 | - VS Code's dev tools (`Help > Toggle Developer Tools`) are very helpful for 16 | discovering the scopes 17 | - https://code.visualstudio.com/api/references/theme-color 18 | - https://www.sublimetext.com/docs/scope_naming.html 19 | 20 | ## Screenshots 21 | 22 | ### JS 23 | 24 | ![js](images/js.png) 25 | 26 | ### JSX 27 | 28 | ![jsx](images/jsx.png) 29 | 30 | ### HTML 31 | 32 | ![html](images/html.png) 33 | 34 | ### SCSS 35 | 36 | ![scss](images/scss.png) 37 | 38 | ### JSON 39 | 40 | ![json](images/json.png) 41 | 42 | ### JS on Windows 43 | 44 | ![windows](images/windows.png) 45 | 46 | ## Related customization 47 | 48 | ### Popping and Locking for Hyper 49 | 50 | https://www.npmjs.com/package/hyper-popping-and-locking 51 | 52 | ## If you have any questions or comments. 53 | 54 | Please contact me. https://github.com/hedinne/popping-and-locking-vscode 55 | 56 | ## Orignally based on 57 | 58 | - https://github.com/morhetz/gruvbox 59 | - https://github.com/jdinhlife/vscode-theme-gruvbox 60 | -------------------------------------------------------------------------------- /assets/Logo.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hedinne/popping-and-locking-vscode/18c7632206c0ee944b4a6d33847d84ab37c0c779/assets/Logo.psd -------------------------------------------------------------------------------- /assets/windows.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hedinne/popping-and-locking-vscode/18c7632206c0ee944b4a6d33847d84ab37c0c779/assets/windows.psd -------------------------------------------------------------------------------- /images/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hedinne/popping-and-locking-vscode/18c7632206c0ee944b4a6d33847d84ab37c0c779/images/html.png -------------------------------------------------------------------------------- /images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hedinne/popping-and-locking-vscode/18c7632206c0ee944b4a6d33847d84ab37c0c779/images/icon.png -------------------------------------------------------------------------------- /images/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hedinne/popping-and-locking-vscode/18c7632206c0ee944b4a6d33847d84ab37c0c779/images/js.png -------------------------------------------------------------------------------- /images/json.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hedinne/popping-and-locking-vscode/18c7632206c0ee944b4a6d33847d84ab37c0c779/images/json.png -------------------------------------------------------------------------------- /images/jsx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hedinne/popping-and-locking-vscode/18c7632206c0ee944b4a6d33847d84ab37c0c779/images/jsx.png -------------------------------------------------------------------------------- /images/scss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hedinne/popping-and-locking-vscode/18c7632206c0ee944b4a6d33847d84ab37c0c779/images/scss.png -------------------------------------------------------------------------------- /images/windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hedinne/popping-and-locking-vscode/18c7632206c0ee944b4a6d33847d84ab37c0c779/images/windows.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "popping-and-locking-vscode", 3 | "displayName": "Popping and Locking Theme", 4 | "description": "Vivid and well balanced theme for VS Code.", 5 | "version": "2.0.11", 6 | "publisher": "hedinne", 7 | "author": "Hedinn Eiriksson", 8 | "license": "mit", 9 | "engines": { 10 | "vscode": "^1.12.0" 11 | }, 12 | "categories": [ 13 | "Themes" 14 | ], 15 | "galleryBanner": { 16 | "color": "#21222d", 17 | "theme": "dark" 18 | }, 19 | "icon": "images/icon.png", 20 | "tags": [ 21 | "js", 22 | "jsx", 23 | "osx", 24 | "git", 25 | "css", 26 | "dark", 27 | "blue", 28 | "icon", 29 | "scss", 30 | "html", 31 | "clean", 32 | "green", 33 | "macOS", 34 | "vivid", 35 | "theme", 36 | "yellow", 37 | "windows", 38 | "orginal", 39 | "balanced", 40 | "saturated", 41 | "beautiful", 42 | "dark theme", 43 | "color-theme", 44 | "web development" 45 | ], 46 | "screenshots": [ 47 | { 48 | "path": "images/js.png" 49 | }, 50 | { 51 | "path": "images/jsx.png" 52 | }, 53 | { 54 | "path": "images/scss.png" 55 | }, 56 | { 57 | "path": "images/html.png" 58 | }, 59 | { 60 | "path": "images/json.png" 61 | } 62 | ], 63 | "homepage": "https://github.com/hedinne/popping-and-locking-vscode/blob/master/README.md", 64 | "repository": { 65 | "type": "git", 66 | "url": "https://github.com/hedinne/popping-and-locking-vscode.git" 67 | }, 68 | "contributes": { 69 | "themes": [ 70 | { 71 | "label": "Popping and Locking", 72 | "uiTheme": "vs-dark", 73 | "path": "./themes/popping-and-locking-color-theme.json" 74 | } 75 | ] 76 | }, 77 | "__metadata": { 78 | "id": "1edaf626-3d50-4223-abdb-0a09c33bb1e9", 79 | "publisherDisplayName": "hedinne", 80 | "publisherId": "65a088bc-3a5e-485e-83a2-87837645d68b" 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /themes/popping-and-locking-color-theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Popping and Locking", 3 | "type": "dark", 4 | "colors": { 5 | "activityBar.background": "#1C1D26", 6 | "activityBar.foreground": "#f2e5bc", 7 | "activityBarBadge.background": "#d79921", 8 | "activityBarBadge.foreground": "#f9f5d7", 9 | 10 | "sideBar.background": "#1C1D26", 11 | "sideBar.foreground": "#fbf1c7", 12 | "sideBarSectionHeader.background": "#21222d", 13 | "list.activeSelectionBackground": "#313242", 14 | "list.inactiveSelectionBackground": "#313242", 15 | "list.hoverBackground": "#313242", 16 | "list.focusBackground": "#313242", 17 | 18 | "titleBar.activeBackground": "#1C1D26", 19 | "titleBar.activeForeground": "#f2e5bc", 20 | 21 | "tab.inactiveBackground": "#1C1D26", 22 | "tab.activeBackground": "#21222d", 23 | "editorGroupHeader.tabsBackground": "#1C1D26", 24 | 25 | "focusBorder": "#3e588c", 26 | "foreground": "#f2e5bc", 27 | 28 | "badge.background": "#458588", 29 | 30 | "statusBar.background": "#1C1D26", 31 | "statusBar.noFolderBackground": "#1C1D26", 32 | "statusBar.foreground": "#f2e5bc", 33 | 34 | "tab.activeForeground": "#f2e5bc", 35 | 36 | "input.background": "#181921", 37 | "input.border": "#272836", 38 | 39 | "editor.foreground": "#f2e5bc", 40 | "editor.background": "#21222d", 41 | "editor.lineHighlightBackground": "#272836", 42 | "editorWidget.background": "#272836", 43 | 44 | "editor.selectionBackground": "#60daff47", 45 | "editor.inactiveSelectionBackground": "#ffffff22", 46 | "editor.selectionHighlightBackground": "#FFFFBE55", 47 | 48 | "editor.wordHighlightStrongBackground": "#090e3577", 49 | "editor.wordHighlightBackground": "#00000033", 50 | 51 | "editorCursor.foreground": "#f42c3e", 52 | 53 | "editor.findMatchBackground": "#ffffff22", 54 | "editor.findMatchHighlightBackground": "#FFFFBE55", 55 | "editor.findRangeHighlightBackground": "#ffffff22", 56 | 57 | "peekViewEditor.background": "#21222d", 58 | "peekViewResult.background": "#21222d", 59 | "peekViewResult.selectionBackground": "#3e588c", 60 | "peekView.border": "#3e588c", 61 | 62 | "button.background": "#d79921", 63 | "button.foreground": "#f9f5d7", 64 | 65 | "dropdown.background": "#1C1D26", 66 | 67 | "extensionButton.prominentBackground": "#599442", 68 | 69 | "gitDecoration.modifiedResourceForeground": "#fabd2f", 70 | "gitDecoration.untrackedResourceForeground": "#7ec16e", 71 | "gitDecoration.ignoredResourceForeground": "#3e588c", 72 | "gitDecoration.conflictingResourceForeground": "#f42c3e", 73 | 74 | "terminal.ansiBlack": "#1d2021", 75 | "terminal.ansiBrightBlack": "#928374", 76 | "terminal.ansiRed": "#cc241d", 77 | "terminal.ansiBrightRed": "#f42c3e", 78 | "terminal.ansiGreen": "#98971a", 79 | "terminal.ansiBrightGreen": "#b8bb26", 80 | "terminal.ansiYellow": "#d79921", 81 | "terminal.ansiBrightYellow": "#fabd2f", 82 | "terminal.ansiBlue": "#458588", 83 | "terminal.ansiBrightBlue": "#99c6ca", 84 | "terminal.ansiMagenta": "#b16286", 85 | "terminal.ansiBrightMagenta": "#d3869b", 86 | "terminal.ansiCyan": "#689d6a", 87 | "terminal.ansiBrightCyan": "#7ec16e", 88 | "terminal.ansiWhite": "#a89984", 89 | "terminal.ansiBrightWhite": "#ebdbb2", 90 | "terminal.foreground": "#ebdbb2", 91 | "terminal.background": "#181921", 92 | 93 | "editorBracketHighlight.foreground1": "#cc241d", 94 | "editorBracketHighlight.foreground2": "#b16286", 95 | "editorBracketHighlight.foreground3": "#458588", 96 | "editorBracketHighlight.foreground4": "#689d6a", 97 | "editorBracketHighlight.foreground5": "#98971a", 98 | "editorBracketHighlight.foreground6": "#d79921", 99 | "editorBracketHighlight.unexpectedBracket.foreground": "#ffffff" 100 | }, 101 | "tokenColors": [ 102 | { 103 | "scope": "emphasis", 104 | "settings": { 105 | "fontStyle": "italic" 106 | } 107 | }, 108 | { 109 | "scope": "strong", 110 | "settings": { 111 | "fontStyle": "bold" 112 | } 113 | }, 114 | { 115 | "scope": "header", 116 | "settings": { 117 | "foreground": "#458588" 118 | } 119 | }, 120 | { 121 | "name": "Comments", 122 | "scope": ["comment", "punctuation.definition.comment"], 123 | "settings": { 124 | "foreground": "#506899", 125 | "fontStyle": "italic" 126 | } 127 | }, 128 | { 129 | "scope": ["constant", "variable.arguments"], 130 | "settings": { 131 | "foreground": "#d3869b" 132 | } 133 | }, 134 | { 135 | "scope": "constant.rgb-value", 136 | "settings": { 137 | "foreground": "#ebdbb2" 138 | } 139 | }, 140 | { 141 | "scope": "entity.name.selector", 142 | "settings": { 143 | "foreground": "#7ec16e" 144 | } 145 | }, 146 | { 147 | "scope": "entity.other.attribute-name", 148 | "settings": { 149 | "foreground": "#7ec16e" 150 | } 151 | }, 152 | { 153 | "scope": "entity.other.attribute-name.css", 154 | "settings": { 155 | "foreground": "#fe8019" 156 | } 157 | }, 158 | { 159 | "scope": "invalid", 160 | "settings": { 161 | "foreground": "#cc241d" 162 | } 163 | }, 164 | { 165 | "scope": "markup.underline", 166 | "settings": { 167 | "fontStyle": "underline" 168 | } 169 | }, 170 | { 171 | "scope": "markup.bold", 172 | "settings": { 173 | "fontStyle": "bold", 174 | "foreground": "#fe8019" 175 | } 176 | }, 177 | { 178 | "scope": "markup.heading", 179 | "settings": { 180 | "fontStyle": "bold", 181 | "foreground": "#fe8019" 182 | } 183 | }, 184 | { 185 | "scope": "markup.italic", 186 | "settings": { 187 | "fontStyle": "italic" 188 | } 189 | }, 190 | { 191 | "scope": "markup.inserted", 192 | "settings": { 193 | "foreground": "#b8bb26" 194 | } 195 | }, 196 | { 197 | "scope": "markup.deleted", 198 | "settings": { 199 | "foreground": "#d65d0e" 200 | } 201 | }, 202 | { 203 | "scope": "markup.changed", 204 | "settings": { 205 | "foreground": "#fe8019" 206 | } 207 | }, 208 | { 209 | "scope": "markup.punctuation.quote.beginning", 210 | "settings": { 211 | "foreground": "#98971a" 212 | } 213 | }, 214 | { 215 | "scope": "markup.punctuation.list.beginning", 216 | "settings": { 217 | "foreground": "#99c6ca" 218 | } 219 | }, 220 | { 221 | "scope": "markup.inline.raw", 222 | "settings": { 223 | "foreground": "#d65d0e" 224 | } 225 | }, 226 | { 227 | "scope": "meta.selector", 228 | "settings": { 229 | "foreground": "#7ec16e" 230 | } 231 | }, 232 | { 233 | "name": "brackets of XML tags", 234 | "scope": [], 235 | "settings": { 236 | "foreground": "#d79921" 237 | } 238 | }, 239 | { 240 | "scope": "meta.preprocessor", 241 | "settings": { 242 | "foreground": "#fe8019" 243 | } 244 | }, 245 | { 246 | "scope": "meta.preprocessor.string", 247 | "settings": { 248 | "foreground": "#b8bb26" 249 | } 250 | }, 251 | { 252 | "scope": "meta.preprocessor.numeric", 253 | "settings": { 254 | "foreground": "#b8bb26" 255 | } 256 | }, 257 | { 258 | "scope": "meta.structure.dictionary.key.python", 259 | "settings": { 260 | "foreground": "#689d6a" 261 | } 262 | }, 263 | { 264 | "scope": "meta.header.diff", 265 | "settings": { 266 | "foreground": "#fe8019" 267 | } 268 | }, 269 | { 270 | "scope": "storage", 271 | "settings": { 272 | "foreground": "#f42c3e" 273 | } 274 | }, 275 | { 276 | "scope": "storage.modifier", 277 | "settings": { 278 | "foreground": "#fe8019" 279 | } 280 | }, 281 | { 282 | "scope": "string", 283 | "settings": { 284 | "foreground": "#b8bb26" 285 | } 286 | }, 287 | { 288 | "scope": "string.tag", 289 | "settings": { 290 | "foreground": "#b8bb26" 291 | } 292 | }, 293 | { 294 | "scope": "string.value", 295 | "settings": { 296 | "foreground": "#b8bb26" 297 | } 298 | }, 299 | { 300 | "scope": "string.regexp", 301 | "settings": { 302 | "foreground": "#fe8019" 303 | } 304 | }, 305 | { 306 | "scope": "string.escape", 307 | "settings": { 308 | "foreground": "#f42c3e" 309 | } 310 | }, 311 | { 312 | "scope": "string.quasi", 313 | "settings": { 314 | "foreground": "#7ec16e" 315 | } 316 | }, 317 | { 318 | "scope": "string.entity", 319 | "settings": { 320 | "foreground": "#b8bb26" 321 | } 322 | }, 323 | { 324 | "scope": "object", 325 | "settings": { 326 | "foreground": "#ebdbb2" 327 | } 328 | }, 329 | { 330 | "scope": "module.node", 331 | "settings": { 332 | "foreground": "#99c6ca" 333 | } 334 | }, 335 | { 336 | "scope": "support.type.property-name", 337 | "settings": { 338 | "foreground": "#fabd2f" 339 | } 340 | }, 341 | { 342 | "scope": "keyword", 343 | "settings": { 344 | "foreground": "#f42c3e" 345 | } 346 | }, 347 | { 348 | "scope": "keyword.control", 349 | "settings": { 350 | "foreground": "#f42c3e" 351 | } 352 | }, 353 | { 354 | "scope": "keyword.control.module", 355 | "settings": { 356 | "foreground": "#7ec16e" 357 | } 358 | }, 359 | { 360 | "scope": "keyword.control.less", 361 | "settings": { 362 | "foreground": "#d79921" 363 | } 364 | }, 365 | { 366 | "scope": "keyword.operator", 367 | "settings": { 368 | "foreground": "#7ec16e" 369 | } 370 | }, 371 | { 372 | "scope": "keyword.operator.new", 373 | "settings": { 374 | "foreground": "#fe8019" 375 | } 376 | }, 377 | { 378 | "scope": "keyword.other.unit", 379 | "settings": { 380 | "foreground": "#b8bb26" 381 | } 382 | }, 383 | { 384 | "scope": "metatag.php", 385 | "settings": { 386 | "foreground": "#fe8019" 387 | } 388 | }, 389 | { 390 | "scope": "support.function.git-rebase", 391 | "settings": { 392 | "foreground": "#689d6a" 393 | } 394 | }, 395 | { 396 | "scope": "constant.sha.git-rebase", 397 | "settings": { 398 | "foreground": "#b8bb26" 399 | } 400 | }, 401 | { 402 | "name": "coloring of the Java import and package identifiers", 403 | "scope": [ 404 | "storage.modifier.import.java", 405 | "storage.modifier.package.java" 406 | ], 407 | "settings": { 408 | "foreground": "#ebdbb2" 409 | } 410 | }, 411 | { 412 | "name": "Types declaration and references", 413 | "scope": [ 414 | "meta.type.name", 415 | "meta.return.type", 416 | "meta.return-type", 417 | "meta.cast", 418 | "meta.type.annotation", 419 | "support.type", 420 | "storage.type.cs", 421 | "storage.type.java", 422 | "variable.class" 423 | ], 424 | "settings": { 425 | "foreground": "#fabd2f" 426 | } 427 | }, 428 | { 429 | "scope": "variable.this", 430 | "settings": { 431 | "foreground": "#d3869b" 432 | } 433 | }, 434 | { 435 | "scope": [ 436 | "entity.name", 437 | "entity.static", 438 | "entity.name.class.static.function", 439 | "entity.name.function", 440 | "entity.name.class", 441 | "entity.name.type" 442 | ], 443 | "settings": { 444 | "foreground": "#fabd2f" 445 | } 446 | }, 447 | { 448 | "name": "Function declarations", 449 | "scope": [ 450 | "storage.type.function", 451 | "entity.function", 452 | "entity.name.function.static" 453 | ], 454 | "settings": { 455 | "foreground": "#7ec16e" 456 | } 457 | }, 458 | { 459 | "name": "Variable names that are specified by the language", 460 | "scope": ["variable.language"], 461 | "settings": { 462 | "foreground": "#d3869b", 463 | "fontStyle": "italic" 464 | } 465 | }, 466 | { 467 | "scope": "entity.name.function.function-call", 468 | "settings": { 469 | "foreground": "#7ec16e" 470 | } 471 | }, 472 | { 473 | "scope": [ 474 | "entity.name.method", 475 | "entity.name.method.function-call", 476 | "entity.name.static.function-call" 477 | ], 478 | "settings": { 479 | "foreground": "#689d6a" 480 | } 481 | }, 482 | { 483 | "scope": "brace", 484 | "settings": { 485 | "foreground": "#d5c4a1" 486 | } 487 | }, 488 | { 489 | "name": "Variable and parameter name", 490 | "scope": [ 491 | "meta.parameter.type.variable", 492 | "variable.parameter", 493 | "variable", 494 | "variable.name", 495 | "variable.other" 496 | ], 497 | "settings": { 498 | "foreground": "#99c6ca" 499 | } 500 | }, 501 | { 502 | "name": "CSS property value", 503 | "scope": [ 504 | "support.property-value", 505 | "constant.rgb-value", 506 | "support.property-value.scss", 507 | "constant.rgb-value.scss" 508 | ], 509 | "settings": { 510 | "foreground": "#d65d0e" 511 | } 512 | }, 513 | { 514 | "scope": "prototype", 515 | "settings": { 516 | "foreground": "#d3869b" 517 | } 518 | }, 519 | { 520 | "scope": "storage.type.class", 521 | "settings": { 522 | "foreground": "#f42c3e" 523 | } 524 | }, 525 | { 526 | "name": "CSS propperty", 527 | "scope": "support.type.property-name.css", 528 | "settings": { 529 | "foreground": "#fabd2f" 530 | } 531 | }, 532 | { 533 | "name": "CSS propperty value", 534 | "scope": ["meta.property-group", "support.constant.property-value.css"], 535 | "settings": { 536 | "foreground": "#b8bb26" 537 | } 538 | }, 539 | { 540 | "name": "HTML and JSX Tags", 541 | "scope": ["entity.name.tag", "punctuation.tag"], 542 | "settings": { 543 | "foreground": "#fabd2f" 544 | } 545 | }, 546 | { 547 | "scope": ["punctuation"], 548 | "settings": { 549 | "foreground": "#ebdbb2" 550 | } 551 | }, 552 | { 553 | "scope": "punctuation.quasi", 554 | "settings": { 555 | "foreground": "#f42c3e" 556 | } 557 | } 558 | ] 559 | } 560 | -------------------------------------------------------------------------------- /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/eb0f84c11e4f4d79862b9fb5fea6a116.tmTheme` - 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 | 13 | ## Make changes 14 | * you can relaunch the extension from the debug toolbar after making changes to the files listed above 15 | * you can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes 16 | 17 | ## Adopt your theme to Visual Studio Code 18 | * VS Code themes are standard TextMate themes. It's recommended to stick to the TextMate conventions and avoid language 19 | specific rules in your theme as grammars can also be replaced by extensions. 20 | To learn about what scopes are used where, check out the [TextMate documentation](https://manual.macromates.com/en/themes) 21 | and this useful [blog post](http://www.apeth.com/nonblog/stories/textmatebundle.html). A great place to examine themes is [here](https://tmtheme-editor.herokuapp.com/#!/editor/theme/Monokai). 22 | * Besides coloring syntax tokens, VS Code uses the following editor color settings from the textmate file: 23 | 24 | * `caret`: Color of the carret. 25 | * `lineHighlight`: Background color of line highlight. 26 | * `selection`: Background color of selections. 27 | * `rangeHighlight`: Background color of range highlighted, used by Quick Open and Find features. 28 | * `selectionHighlight`: Background color of regions highlighted while selecting. 29 | * `inactiveSelection`: Background color of selections when not in focus. 30 | * `wordHighlight`: Background color of a symbol during read-access, like reading a variable. 31 | * `wordHighlightStrong`: Background color of a symbol during write-access, like writing to a variable. 32 | * `findMatchHighlight`: Background color of regions matching the search. 33 | * `currentFindMatchHighlight`: Background color of the current region matching the search. 34 | * `findRangeHighlight`: Background color of regions selected for search. 35 | * `activeLinkForeground`: Color of active links. 36 | * `hoverHighlight`: Background color when hovered. 37 | * `referenceHighlight`: Background color of a reference when finding all references. 38 | * `invisible`: Color of the whitespace symbols. 39 | * `guide`: Color of the indentation guides which indicate nesting levels. 40 | 41 | ## Install your extension 42 | * To start using your extension with Visual Studio Code copy it into the /.vscode/extensions folder and restart Code. 43 | * To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension. --------------------------------------------------------------------------------