├── theme.png ├── .vscodeignore ├── .vscode └── launch.json ├── package.json ├── README.md ├── synthwave84.css └── themes └── synthwave-color-theme.json /theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sijinglei/synthwave-vscode/master/theme.png -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | .gitignore 4 | vsc-extension-quickstart.md 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "runtimeExecutable": "${execPath}", 13 | "args": [ 14 | "--extensionDevelopmentPath=${workspaceFolder}" 15 | ] 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "synthwave-vscode", 3 | "displayName": "SynthWave '84", 4 | "description": "A Synthwave-inspired colour theme to satisfy your neon dreams", 5 | "version": "0.0.1", 6 | "author": "Robb Owen", 7 | "publisher": "RobbOwen", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/robb0wen/synthwave-vscode" 11 | }, 12 | "engines": { 13 | "vscode": "^1.33.0" 14 | }, 15 | "keywords": [ 16 | "retro", 17 | "80s" 18 | ], 19 | "categories": [ 20 | "Themes" 21 | ], 22 | "contributes": { 23 | "themes": [ 24 | { 25 | "label": "SynthWave '84", 26 | "uiTheme": "vs-dark", 27 | "path": "./themes/synthwave-color-theme.json" 28 | } 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SynthWave '84 - VS Code theme 2 | Do you remember that endless summer back in '84? Cruising down the ocean-highway with the top down, the wind in our hair and heads buzzing with neon dreams? 3 | 4 | No, I don't remember it either, but with this experimental theme we can go there. 5 | 6 | ![Neon glowing text](./theme.png) 7 | 8 | This colour scheme is influenced by the music and the cover artwork of modern Synthwave bands like FM-84, Timecop 1983 and The Midnight. By association, that means I've also taken heavy influence from the excellent [retro-tinged artwork of James White](https://signalnoise.com/) (check out his work, it's awesome). 9 | 10 | ## But...why? 11 | I was a kid in the 80s but for most of my teenage life I strongly disliked nearly everything about the 80s aesthetic of my childhood. It was like, _so lame_. With the hindsight of recent years though, I've realised that it was actually pretty sweet and I wanted to celebrate it a little. 12 | 13 | Much the same way, in the modern web-development world of shaders, React and WebGL, I feel like it's easy to forget that the basics are actually pretty damn good. To that end, this theme goes back to basics - No Shader magic. No cloud-streamed WebGL render-farms. Just plain CSS :) 14 | 15 | ## Installation 16 | You can enable the base theme as you would any other theme, but the gratuitous 80s glow is still experimental and needs a little extra work to get it going: 17 | 18 | ### To enable the glow 19 | 20 | Download this [excellent plugin that allows you to load custom CSS and JS](https://github.com/be5invis/vscode-custom-css). 21 | 22 | Locate [`synthwave84.css`](https://github.com/robb0wen/synthwave-vscode/blob/master/synthwave84.css) either in this extension's VS code install directory, or [directly from the github repo](https://github.com/robb0wen/synthwave-vscode/blob/master/synthwave84.css) 23 | 24 | Copy `synthwave84.css` to a location on your machine, such as your user folder. Copy the file path and add it to your VS code `settings.json`. On Mac it might look something like the snippet below: 25 | 26 | ``` 27 | { 28 | "vscode_custom_css.imports": [ 29 | "file:///Users/{your username}/synthwave84.css" 30 | ] 31 | } 32 | ``` 33 | 34 | Windows might resemble: 35 | 36 | ``` 37 | { 38 | "vscode_custom_css.imports": [ 39 | "file://C:/Users/{your username}/synthwave84.css" 40 | ] 41 | } 42 | ``` 43 | 44 | **Important**: Make sure you include the file protocol in the path i.e. `file://` 45 | 46 | Open your command pallete with `Ctrl + Shift + P` or `Shift + ⌘ + P` and choose "Enable custom CSS and JS". It will prompt you to restart, and when you do the lights should be on :) 47 | 48 | **NOTE: Every time you update VS code, you will need to repeat this step to re-enable custom CSS and JS. Similarly, when the theme updates, you will need to copy the updated css to your chosen location** 49 | 50 | ### Font 51 | I haven't included a font in this release as I know that it's a very personal preference. The font I use (that is seen in the image above) is [Fira Code](https://github.com/tonsky/FiraCode), which I recommend if you're a fan of ligatures. 52 | 53 | 54 | ## Uninstallation 55 | I fully acknowledge that this probably isn't great for long term coding sessions. Sure, it's a novelty for a while but neon isn't so easy on the eyes. If you decide to change to a different theme, you will first need to disable the custom css. 56 | 57 | Open your command pallete with `Ctrl + Shift + P` or `⇧⌘P` and choose "Disable custom CSS". 58 | 59 | You may also wish to remove the file path from your `settings.json`. 60 | 61 | ## Compatibility 62 | This theme is **very much a work in progress**. I primarily develop in HTML & CSS, JS, React and Elixir so, whilst those language sets should look pretty good, there will likely be issues for other languages. I'll work on adding more support as I go. If you find anything glaringly wrong, raise an issue and I'll try to fix it as soon as I can. 63 | 64 | 65 | ## Thanks 66 | Lastly, I couldn't have made this if it weren't for the fantistic work of [Sarah Drasner](https://twitter.com/sarah_edo). Her [tutorial on theming for CSS tricks](https://css-tricks.com/creating-a-vs-code-theme/) was a huge help in developing this 🙏 67 | 68 | Similarly, I'd like to thanks [Wes Bos](https://twitter.com/wesbos) for his [cool Cobalt2 theme](https://github.com/wesbos/cobalt2-vscode). His readme helped me figure out how to package this hot mess for public use 👍 69 | 70 | If this theme is too much for you, and I don't blame you, then I recommend [Horizon](https://github.com/jolaleye/horizon-theme-vscode) for a similar, yet more understated, retro vibe. It's beautiful. 71 | -------------------------------------------------------------------------------- /synthwave84.css: -------------------------------------------------------------------------------- 1 | 2 | .mtk3 { 3 | color: #f92aad; 4 | text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff6; 5 | } 6 | 7 | .mtk4 { 8 | color: #6d77b3; 9 | } 10 | 11 | .mtk5 { 12 | color: #f97e72; 13 | } 14 | 15 | .mtk6 { 16 | color: #fdfdfd; 17 | text-shadow: 0 0 2px #001716, 0 0 3px #03edf9, 0 0 5px #03edf9, 0 0 10px #03edf9; 18 | } 19 | 20 | .mtk7 { 21 | color: #fff5f6; 22 | text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c, 0 0 5px #fc1f2c, 0 0 25px #fc1f2c; 23 | } 24 | 25 | .mtk8 { 26 | color: #72f1b8; 27 | text-shadow: 0 0 2px #100c0f, 0 0 10px #257c55, 0 0 35px #212724; 28 | } 29 | 30 | .mtk9 { 31 | color: #fffcf7; 32 | text-shadow: 0 0 2px #393a33, 0 0 35px #ffffff44, 0 0 10px #f39f05, 0 0 2px #f39f05; 33 | } 34 | 35 | .monaco-editor .margin, .monaco-editor-background, .monaco-editor .inputarea.ime-input { 36 | background: transparent; 37 | } 38 | 39 | /* Add the subtle gradient to the editor background */ 40 | .monaco-editor { 41 | background-color: transparent !important; 42 | background-image: linear-gradient(to bottom, #2a2139 75%, #34294f); 43 | background-size: auto 100vh; 44 | background-position: top; 45 | background-repeat: no-repeat; 46 | } 47 | 48 | /* Sweet sunset dots */ 49 | .monaco-workbench .activitybar>.content .monaco-action-bar .badge .badge-content { 50 | background: linear-gradient(to bottom, #fff951 25%, #fc28a8); 51 | } 52 | 53 | /* Active tab neon */ 54 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active { 55 | box-shadow: inset 0 -5px 25px #fc28a825; 56 | position: relative; 57 | } 58 | 59 | /* Active tab stripe */ 60 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active::after { 61 | content: ''; 62 | position: absolute; 63 | bottom: -1px; 64 | left: 0; 65 | right: 0; 66 | height: 4px; 67 | background: linear-gradient(to right, #fc28a8, #03edf9) !important; 68 | } 69 | 70 | /* update lightbuld to be neon */ 71 | .lightbulb-glyph { 72 | background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='%23ffffff' x='5.68' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(-1.94 1.63) rotate(-12.09)'/%3E%3Cpath fill='%2303edf9' d='M7.08,13.5a1.46,1.46,0,0,1-1.43-1.16L4.77,8.26A1.47,1.47,0,0,1,5.9,6.53l.17,0A1.46,1.46,0,0,1,7.81,7.61l.87,4.09a1.46,1.46,0,0,1-1.12,1.73l-.18,0Zm-.7-6h-.1l-.17,0a.45.45,0,0,0-.29.21.45.45,0,0,0-.07.34l.88,4.09a.46.46,0,0,0,.54.35l.18,0a.46.46,0,0,0,.29-.2.48.48,0,0,0,.07-.35L6.83,7.82A.46.46,0,0,0,6.38,7.46Z'/%3E%3Crect fill='%23ffffff' x='8.22' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(16.25 21.68) rotate(-167.91)'/%3E%3Cpath fill='%2303edf9' d='M8.93,13.5a1.63,1.63,0,0,1-.31,0l-.18,0A1.46,1.46,0,0,1,7.32,11.7l.87-4.09A1.47,1.47,0,0,1,9.93,6.49l.18,0a1.45,1.45,0,0,1,.92.63,1.47,1.47,0,0,1,.2,1.1l-.88,4.08a1.45,1.45,0,0,1-.63.93A1.48,1.48,0,0,1,8.93,13.5Zm.69-6a.45.45,0,0,0-.25.07.5.5,0,0,0-.2.29L8.3,11.9a.43.43,0,0,0,.06.35.46.46,0,0,0,.29.2l.18,0a.47.47,0,0,0,.55-.35l.87-4.09a.45.45,0,0,0-.06-.34A.47.47,0,0,0,9.9,7.5l-.18,0Z'/%3E%3Cpath fill='%23ffffff' d='M11.77,9l-3.53.67a1,1,0,0,1-1.15-.88h0A1.09,1.09,0,0,1,7.9,7.48l3.53-.67a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,11.77,9Z'/%3E%3Cpath fill='%2303edf9' d='M8.07,10.18A1.54,1.54,0,0,1,6.6,8.83a1.74,1.74,0,0,1,.25-1.22,1.46,1.46,0,0,1,1-.66l3.52-.67A1.51,1.51,0,0,1,13.07,7.6a1.61,1.61,0,0,1-1.22,1.88l-3.52.67A1.15,1.15,0,0,1,8.07,10.18ZM11.6,7.34h-.09L8,8a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44l3.52-.67a.54.54,0,0,0,.41-.62A.53.53,0,0,0,11.6,7.34Z'/%3E%3Cpath fill='%23ffffff' d='M11.74,6.74,4.67,8.08A1,1,0,0,1,3.52,7.2h0A1.08,1.08,0,0,1,4.33,6l7.06-1.34a1,1,0,0,1,1.16.88h0A1.08,1.08,0,0,1,11.74,6.74Z'/%3E%3Cpath fill='%2303edf9' d='M4.5,8.64a1.44,1.44,0,0,1-.86-.29A1.64,1.64,0,0,1,3,7.29a1.72,1.72,0,0,1,.25-1.21,1.48,1.48,0,0,1,1-.67l7.07-1.34a1.39,1.39,0,0,1,1.11.27A1.65,1.65,0,0,1,13,5.4a1.72,1.72,0,0,1-.25,1.21,1.48,1.48,0,0,1-1,.67L4.76,8.62Zm7.07-3.5h-.09L4.42,6.49a.45.45,0,0,0-.32.22.56.56,0,0,0-.09.4.61.61,0,0,0,.21.35.47.47,0,0,0,.36.09L11.65,6.2A.47.47,0,0,0,12,6a.51.51,0,0,0,.08-.4.55.55,0,0,0-.2-.35A.47.47,0,0,0,11.57,5.14Z'/%3E%3Cpath fill='%23ffffff' d='M11.7,4.52,4.64,5.86A1,1,0,0,1,3.49,5h0A1.09,1.09,0,0,1,4.3,3.72l7.06-1.34a1,1,0,0,1,1.15.88h0A1.09,1.09,0,0,1,11.7,4.52Z'/%3E%3Cpath fill='%2303edf9' d='M4.46,6.42a1.36,1.36,0,0,1-.85-.3,1.58,1.58,0,0,1-.61-1A1.61,1.61,0,0,1,4.21,3.19l7.07-1.34a1.35,1.35,0,0,1,1.11.27,1.58,1.58,0,0,1,.61,1,1.74,1.74,0,0,1-.25,1.22,1.44,1.44,0,0,1-1,.66L4.72,6.39A1.09,1.09,0,0,1,4.46,6.42Zm7.07-3.51h-.08L4.38,4.26a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44L11.62,4a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,11.53,2.91Z'/%3E%3Cpath fill='%23ffffff' d='M8.34,2.89,4.57,3.6a1,1,0,0,1-1.15-.88h0a1.08,1.08,0,0,1,.81-1.25L8,.75a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,8.34,2.89Z'/%3E%3Cpath fill='%2303edf9' d='M4.4,4.16a1.44,1.44,0,0,1-.86-.29,1.69,1.69,0,0,1-.61-1.05A1.74,1.74,0,0,1,3.18,1.6a1.51,1.51,0,0,1,1-.67L7.91.22A1.38,1.38,0,0,1,9,.49a1.58,1.58,0,0,1,.61,1.05,1.74,1.74,0,0,1-.25,1.22,1.47,1.47,0,0,1-1,.66l-3.77.72A1.18,1.18,0,0,1,4.4,4.16ZM8.17,1.28H8.09L4.32,2A.45.45,0,0,0,4,2.23a.51.51,0,0,0-.08.4.55.55,0,0,0,.2.35.49.49,0,0,0,.37.09l3.77-.72a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,8.17,1.28Z'/%3E%3Cpolygon fill='%231e1e1e' points='5.5 11.1 5.5 11.1 5.5 14.4 7.1 16 9.1 16 10.6 14.4 10.6 11.1 5.5 11.1'/%3E%3Cpath fill='%23c5c5c5' d='M6.5,12h3v1h-3Zm1,3H8.6l.9-1h-3Z'/%3E%3C/svg%3E") 50% no-repeat !important; 73 | filter: drop-shadow(0 0 5px #03edf9); 74 | } -------------------------------------------------------------------------------- /themes/synthwave-color-theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SynthWave 84", 3 | "type": "dark", 4 | "colors": { 5 | "focusBorder": "#1f212b", 6 | "foreground": "#ffffff", 7 | "widget.shadow": "#2a2139", 8 | "selection.background": "#34294f59", 9 | "errorForeground": "#fa2e47", 10 | "textLink.activeForeground": "#ff7edb", 11 | "textLink.foreground": "#f97e72", 12 | "button.background": "#2a2139", 13 | "dropdown.background": "#232530", 14 | "dropdown.listBackground": "#2a2139", 15 | "input.background": "#2a2139", 16 | "inputOption.activeBorder": "#ff7edb99", 17 | "inputValidation.errorBackground": "#fa2e4780", 18 | "inputValidation.errorBorder": "#fa2e4700", 19 | "scrollbar.shadow": "#2a2139", 20 | "scrollbarSlider.activeBackground": "#34294f88", 21 | "scrollbarSlider.background": "#34294f1a", 22 | "scrollbarSlider.hoverBackground": "#34294f59", 23 | "badge.foreground": "#ffffff", 24 | "badge.background": "#2a2139", 25 | "progressBar.background": "#f97e72", 26 | "list.activeSelectionBackground": "#2a213980", 27 | "list.activeSelectionForeground": "#ffffff", 28 | "list.dropBackground": "#34294f66", 29 | "list.focusBackground": "#2a213999", 30 | "list.focusForeground": "#ffffff", 31 | "list.highlightForeground": "#f97e72", 32 | "list.hoverBackground": "#2a213999", 33 | "list.hoverForeground": "#ffffff", 34 | "list.inactiveSelectionBackground": "#34294f66", 35 | "list.inactiveSelectionForeground": "#ffffff", 36 | "list.inactiveFocusBackground": "#2a213999", 37 | "list.errorForeground": "#fa2e47E6", 38 | "list.warningForeground": "#72f1b8bb", 39 | "activityBar.background": "#171520", 40 | "activityBar.dropBackground": "#34294f66", 41 | "activityBar.foreground": "#ffffffCC", 42 | "activityBarBadge.background": "#f97e72", 43 | "activityBarBadge.foreground": "#2a2139", 44 | "sideBar.background": "#241b2f", 45 | "sideBar.foreground": "#ffffff99", 46 | "sideBar.dropBackground": "#34294f4c", 47 | "sideBarSectionHeader.background": "#241b2f", 48 | "sideBarSectionHeader.foreground": "#ffffffca", 49 | "editorGroup.border": "#495495", 50 | "editorGroup.dropBackground": "#34294f4a", 51 | "editorGroupHeader.tabsBackground": "#241b2f", 52 | "tab.border": "#241b2f00", 53 | "tab.activeBorder": "#880088", 54 | "tab.inactiveBackground": "#262335", 55 | "editor.background": "#262335", 56 | "editorLineNumber.foreground": "#ffffff10", 57 | "editorLineNumber.activeForeground": "#ffffff73", 58 | "editorCursor.background": "#241b2f", 59 | "editorCursor.foreground": "#f97e72", 60 | "editor.selectionBackground": "#34294fb3", 61 | "editor.selectionHighlightBackground": "#34294f59", 62 | "editor.wordHighlightBackground": "#34294f88", 63 | "editor.wordHighlightStrongBackground": "#34294f88", 64 | "editor.findMatchBackground": "#34294f59", 65 | "editor.findMatchHighlightBackground": "#34294f33", 66 | "editor.findRangeHighlightBackground": "#34294f1a", 67 | "editor.hoverHighlightBackground": "#34294f4d", 68 | "editor.lineHighlightBackground": "#34294f66", 69 | "editor.rangeHighlightBackground": "#49549539", 70 | "editorIndentGuide.background": "#49549539", 71 | "editorIndentGuide.activeBackground": "#2a2139", 72 | "editorRuler.foreground": "#34294f33", 73 | "editorCodeLens.foreground": "#34294f59", 74 | "editorBracketMatch.background": "#34294f66", 75 | "editorBracketMatch.border": "#495495", 76 | "editorOverviewRuler.border": "#34294fb3", 77 | "editorOverviewRuler.findMatchForeground": "#34294f", 78 | "editorOverviewRuler.modifiedForeground": "#49549599", 79 | "editorOverviewRuler.addedForeground": "#09f7a099", 80 | "editorOverviewRuler.deletedForeground": "#fa2e4799", 81 | "editorOverviewRuler.errorForeground": "#fa2e47dd", 82 | "editorOverviewRuler.warningForeground": "#72f1b8cc", 83 | "editorError.foreground": "#fa2e47", 84 | "editorWarning.foreground": "#72f1b8cc", 85 | "editorGutter.modifiedBackground": "#495495af", 86 | "editorGutter.addedBackground": "#206d4bd6", 87 | "editorGutter.deletedBackground": "#fa2e46a4", 88 | "diffEditor.insertedTextBackground": "#0beb9916", 89 | "diffEditor.removedTextBackground": "#fa2e4716", 90 | "editorWidget.background": "#232530", 91 | "editorWidget.border": "#232530", 92 | "editorSuggestWidget.highlightForeground": "#f97e72", 93 | "peekView.border": "#495495", 94 | "peekViewEditor.background": "#232530", 95 | "peekViewEditor.matchHighlightBackground": "#34294f59", 96 | "peekViewResult.background": "#232530", 97 | "peekViewResult.matchHighlightBackground": "#34294f59", 98 | "peekViewResult.selectionBackground": "#2a213980", 99 | "peekViewTitle.background": "#232530", 100 | "panelTitle.activeBorder": "#f97e72", 101 | "statusBar.background": "#241b2f", 102 | "statusBar.foreground": "#ffffff80", 103 | "statusBar.debuggingBackground": "#f97e72", 104 | "statusBar.debuggingForeground": "#08080f", 105 | "statusBar.noFolderBackground": "#241b2f", 106 | "statusBarItem.hoverBackground": "#2a2139", 107 | "statusBarItem.prominentBackground": "#2a2139", 108 | "statusBarItem.prominentHoverBackground": "#34294f", 109 | "titleBar.activeBackground": "#241b2f", 110 | "titleBar.inactiveBackground": "#241b2f", 111 | "extensionButton.prominentBackground": "#f97e72", 112 | "extensionButton.prominentHoverBackground": "#ff7edb", 113 | "pickerGroup.foreground": "#f97e72ea", 114 | "terminal.foreground": "#ffffff", 115 | "terminal.ansiBlue": "#03edf9", 116 | "terminal.ansiBrightBlue": "#03edf9", 117 | "terminal.ansiBrightCyan": "#03edf9", 118 | "terminal.ansiBrightGreen": "#72f1b8", 119 | "terminal.ansiBrightMagenta": "#ff7edb", 120 | "terminal.ansiBrightRed": "#fa2e47", 121 | "terminal.ansiBrightYellow": "#ffcc00", 122 | "terminal.ansiCyan": "#03edf9", 123 | "terminal.ansiGreen": "#72f1b8", 124 | "terminal.ansiMagenta": "#ff7edb", 125 | "terminal.ansiRed": "#fa2e47", 126 | "terminal.ansiYellow": "#f97e72", 127 | "terminal.selectionBackground": "#34294f4d", 128 | "terminalCursor.background": "#ffffff", 129 | "terminalCursor.foreground": "#03edf9", 130 | "debugToolBar.background": "#241b2f", 131 | "walkThrough.embeddedEditorBackground": "#232530", 132 | "gitDecoration.modifiedResourceForeground": "#f97e72", 133 | "gitDecoration.deletedResourceForeground": "#fa2e47", 134 | "gitDecoration.addedResourceForeground": "#72f1b8cc", 135 | "gitDecoration.untrackedResourceForeground": "#72f1b8", 136 | "gitDecoration.ignoredResourceForeground": "#ffffff59", 137 | "breadcrumbPicker.background": "#232530" 138 | }, 139 | "tokenColors": [ 140 | { 141 | "name": "Comment", 142 | "scope": "comment", 143 | "settings": { 144 | "foreground": "#495495", 145 | "fontStyle": "italic" 146 | } 147 | }, 148 | { 149 | "name": "String", 150 | "scope": [ 151 | "string.quoted", 152 | "string.template", 153 | "punctuation.definition.string" 154 | ], 155 | "settings": { 156 | "foreground": "#ff8b39" 157 | } 158 | }, 159 | { 160 | "name": "Punctuation within templates", 161 | "scope": "string.template meta.embedded.line", 162 | "settings": { 163 | "foreground": "#b6b1b1" 164 | } 165 | }, 166 | { 167 | "name": "Variable", 168 | "scope": [ 169 | "variable", 170 | "entity.name.variable" 171 | ], 172 | "settings": { 173 | "foreground": "#ff7edb" 174 | } 175 | }, 176 | { 177 | "name": "Language variable", 178 | "scope": "variable.language", 179 | "settings": { 180 | "foreground": "#fa2e47", 181 | "fontStyle": "bold" 182 | } 183 | }, 184 | { 185 | "name": "Parameter", 186 | "scope": "variable.parameter", 187 | "settings": { 188 | "fontStyle": "italic" 189 | } 190 | }, 191 | { 192 | "name": "Storage (declaration or modifier keyword)", 193 | "scope": [ 194 | "storage.type", 195 | "storage.modifier" 196 | ], 197 | "settings": { 198 | "foreground": "#ffcc00" 199 | } 200 | }, 201 | { 202 | "name": "Constant", 203 | "scope": "constant", 204 | "settings": { 205 | "foreground": "#f97e72" 206 | } 207 | }, 208 | { 209 | "name": "Regex", 210 | "scope": "string.regexp", 211 | "settings": { 212 | "foreground": "#f97e72" 213 | } 214 | }, 215 | { 216 | "name": "Number", 217 | "scope": "constant.numeric", 218 | "settings": { 219 | "foreground": "#f97e72" 220 | } 221 | }, 222 | { 223 | "name": "Language constant (boolean, null)", 224 | "scope": "constant.language", 225 | "settings": { 226 | "foreground": "#f97e72" 227 | } 228 | }, 229 | { 230 | "name": "Character escape", 231 | "scope": "constant.character.escape", 232 | "settings": { 233 | "foreground": "#36f9f6" 234 | } 235 | }, 236 | { 237 | "name": "Entity", 238 | "scope": "entity.name", 239 | "settings": { 240 | "foreground": "#fa2e47" 241 | } 242 | }, 243 | { 244 | "name": "HTML or XML tag", 245 | "scope": "entity.name.tag", 246 | "settings": { 247 | "foreground": "#72f1b8" 248 | } 249 | }, 250 | { 251 | "name": "HTML or XML tag brackets", 252 | "scope": [ 253 | "punctuation.definition.tag" 254 | ], 255 | "settings": { 256 | "foreground": "#36f9f6" 257 | } 258 | }, 259 | { 260 | "name": "Tag attribute", 261 | "scope": "entity.other.attribute-name", 262 | "settings": { 263 | "foreground": "#ffcc00" 264 | } 265 | }, 266 | { 267 | "name": "Tag attribute HTML", 268 | "scope": "entity.other.attribute-name.html", 269 | "settings": { 270 | "foreground": "#ffcc00", 271 | "fontStyle": "italic" 272 | } 273 | }, 274 | { 275 | "name": "Class", 276 | "scope": [ 277 | "entity.name.type", 278 | "meta.attribute.class.html" 279 | ], 280 | "settings": { 281 | "foreground": "#fa2e47" 282 | } 283 | }, 284 | { 285 | "name": "Inherited class", 286 | "scope": "entity.other.inherited-class", 287 | "settings": { 288 | "foreground": "#D50" 289 | } 290 | }, 291 | { 292 | "name": "Function", 293 | "scope": [ 294 | "entity.name.function", 295 | "variable.function" 296 | ], 297 | "settings": { 298 | "foreground": "#36f9f6" 299 | } 300 | }, 301 | { 302 | "name": "JS Export", 303 | "scope": [ 304 | "keyword.control.export.js", 305 | "keyword.control.import.js" 306 | ], 307 | "settings": { 308 | "foreground": "#72f1b8" 309 | } 310 | }, 311 | { 312 | "name": "Keyword", 313 | "scope": "keyword", 314 | "settings": { 315 | "foreground": "#ffcc00" 316 | } 317 | }, 318 | { 319 | "name": "Control keyword", 320 | "scope": "keyword.control", 321 | "settings": { 322 | "foreground": "#ffcc00" 323 | } 324 | }, 325 | { 326 | "name": "Operator", 327 | "scope": "keyword.operator", 328 | "settings": { 329 | "foreground": "#ffcc00" 330 | } 331 | }, 332 | { 333 | "name": "Special operator", 334 | "scope": [ 335 | "keyword.operator.new", 336 | "keyword.operator.expression", 337 | "keyword.operator.logical" 338 | ], 339 | "settings": { 340 | "foreground": "#ffcc00" 341 | } 342 | }, 343 | { 344 | "name": "Unit", 345 | "scope": "keyword.other.unit", 346 | "settings": { 347 | "foreground": "#f97e72" 348 | } 349 | }, 350 | { 351 | "name": "Support", 352 | "scope": "support", 353 | "settings": { 354 | "foreground": "#fa2e47" 355 | } 356 | }, 357 | { 358 | "name": "Support function", 359 | "scope": "support.function", 360 | "settings": { 361 | "foreground": "#36f9f6" 362 | } 363 | }, 364 | { 365 | "name": "Support variable", 366 | "scope": "support.variable", 367 | "settings": { 368 | "foreground": "#ff7edb" 369 | } 370 | }, 371 | { 372 | "name": "Object literal key / property", 373 | "scope": [ 374 | "meta.object-literal.key", 375 | "support.type.property-name" 376 | ], 377 | "settings": { 378 | "foreground": "#ff7edb" 379 | } 380 | }, 381 | { 382 | "name": "Key-value separator", 383 | "scope": "punctuation.separator.key-value", 384 | "settings": { 385 | "foreground": "#b6b1b1" 386 | } 387 | }, 388 | { 389 | "name": "Embedded puncuation", 390 | "scope": "punctuation.section.embedded", 391 | "settings": { 392 | "foreground": "#ffcc00" 393 | } 394 | }, 395 | { 396 | "name": "Template expression", 397 | "scope": [ 398 | "punctuation.definition.template-expression.begin", 399 | "punctuation.definition.template-expression.end" 400 | ], 401 | "settings": { 402 | "foreground": "#72f1b8" 403 | } 404 | }, 405 | { 406 | "name": "CSS property", 407 | "scope": [ 408 | "support.type.property-name.css", 409 | "support.type.property-name.json" 410 | ], 411 | "settings": { 412 | "foreground": "#72f1b8" 413 | } 414 | }, 415 | { 416 | "name": "JS Switch control", 417 | "scope": "switch-block.expr.js", 418 | "settings": { 419 | "foreground": "#72f1b8" 420 | } 421 | }, 422 | { 423 | "name": "Color", 424 | "scope": "constant.other.color", 425 | "settings": { 426 | "foreground": "#f97e72" 427 | } 428 | }, 429 | { 430 | "name": "Font names", 431 | "scope": "support.constant.font-name", 432 | "settings": { 433 | "foreground": "#f97e72" 434 | } 435 | }, 436 | { 437 | "name": "CSS #id", 438 | "scope": "entity.other.attribute-name.id", 439 | "settings": { 440 | "foreground": "#36f9f6" 441 | } 442 | }, 443 | { 444 | "name": "Pseudo CSS", 445 | "scope": [ 446 | "entity.other.attribute-name.pseudo-element", 447 | "entity.other.attribute-name.pseudo-class" 448 | ], 449 | "settings": { 450 | "foreground": "#D50" 451 | } 452 | }, 453 | { 454 | "name": "CSS support functions (rgb)", 455 | "scope": "support.function.misc.css", 456 | "settings": { 457 | "foreground": "#fa2e47" 458 | } 459 | }, 460 | { 461 | "name": "Markup heading", 462 | "scope": [ 463 | "markup.heading", 464 | "entity.name.section" 465 | ], 466 | "settings": { 467 | "foreground": "#ff7edb" 468 | } 469 | }, 470 | { 471 | "name": "Markup text", 472 | "scope": [ 473 | "text.html", 474 | "keyword.operator.assignment" 475 | ], 476 | "settings": { 477 | "foreground": "#ffffff" 478 | } 479 | }, 480 | { 481 | "name": "Markup quote", 482 | "scope": "markup.quote", 483 | "settings": { 484 | "foreground": "#b6b1b1cc", 485 | "fontStyle": "italic" 486 | } 487 | }, 488 | { 489 | "name": "Markup list", 490 | "scope": "beginning.punctuation.definition.list", 491 | "settings": { 492 | "foreground": "#ff7edb" 493 | } 494 | }, 495 | { 496 | "name": "Markup link", 497 | "scope": "markup.underline.link", 498 | "settings": { 499 | "foreground": "#D50" 500 | } 501 | }, 502 | { 503 | "name": "Markup link description", 504 | "scope": "string.other.link.description", 505 | "settings": { 506 | "foreground": "#f97e72" 507 | } 508 | }, 509 | { 510 | "name": "Python function call", 511 | "scope": "meta.function-call.generic.python", 512 | "settings": { 513 | "foreground": "#36f9f6" 514 | } 515 | }, 516 | { 517 | "name": "C# storage type", 518 | "scope": "storage.type.cs", 519 | "settings": { 520 | "foreground": "#fa2e47" 521 | } 522 | }, 523 | { 524 | "name": "C# local variable", 525 | "scope": "entity.name.variable.local.cs", 526 | "settings": { 527 | "foreground": "#ff7edb" 528 | } 529 | }, 530 | { 531 | "name": "C# properties and fields", 532 | "scope": [ 533 | "entity.name.variable.field.cs", 534 | "entity.name.variable.property.cs" 535 | ], 536 | "settings": { 537 | "foreground": "#ff7edb" 538 | } 539 | }, 540 | { 541 | "name": "C++ operators", 542 | "scope": "source.cpp keyword.operator", 543 | "settings": { 544 | "foreground": "#ffcc00" 545 | } 546 | }, 547 | { 548 | "name": "Elixir Classes", 549 | "scope": [ 550 | "source.elixir support.type.elixir", 551 | "source.elixir meta.module.elixir entity.name.class.elixir" 552 | ], 553 | "settings": { 554 | "foreground": "#36f9f6" 555 | } 556 | }, 557 | { 558 | "name": "Elixir Functions", 559 | "scope": "source.elixir entity.name.function", 560 | "settings": { 561 | "foreground": "#72f1b8" 562 | } 563 | }, 564 | { 565 | "name": "Elixir Constants", 566 | "scope": [ 567 | "source.elixir constant.other.symbol.elixir", 568 | "source.elixir constant.other.keywords.elixir" 569 | ], 570 | "settings": { 571 | "foreground": "#36f9f6" 572 | } 573 | }, 574 | { 575 | "name": "Elixir String Punctuation", 576 | "scope": "source.elixir punctuation.definition.string", 577 | "settings": { 578 | "foreground": "#72f1b8" 579 | } 580 | }, 581 | { 582 | "name": "Elixir", 583 | "scope": [ 584 | "source.elixir variable.other.readwrite.module.elixir", 585 | "source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir" 586 | ], 587 | "settings": { 588 | "foreground": "#72f1b8" 589 | } 590 | }, 591 | { 592 | "name": "Elixir Binary Punctuation", 593 | "scope": "source.elixir .punctuation.binary.elixir", 594 | "settings": { 595 | "foreground": "#ff7edb", 596 | "fontStyle": "italic" 597 | } 598 | } 599 | ] 600 | } --------------------------------------------------------------------------------