├── .gitignore ├── .vscode └── launch.json ├── .vscodeignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── README_LEGACY.md ├── banner.png ├── icon.png ├── package-lock.json ├── package.json ├── src ├── css │ └── editor_chrome.css ├── extension.js └── js │ └── theme_template.js ├── synthwave84-noglow.css ├── synthwave84.css ├── theme.jpg └── themes └── synthwave-color-theme.json /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | .gitignore 4 | vsc-extension-quickstart.md 5 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to SynthWave '84 2 | So, you'd like to contribute to Synthwave '84? Awesome! 3 | 4 | However, before you make your changes, please get in touch to make the project owner aware of what you're proposing. The best way to do this is to raise an issue clearly detailing the change(s) you wish to make. 5 | 6 | When suggesting any changes, please be aware of the code of conduct for this project: 7 | 8 | ## Code of conduct 9 | 10 | ### Our Pledge 11 | 12 | In the interest of fostering an open and welcoming environment, we as 13 | contributors and maintainers pledge to making participation in our project and 14 | our community a harassment-free experience for everyone, regardless of age, body 15 | size, disability, ethnicity, sex characteristics, gender identity and expression, 16 | level of experience, education, socio-economic status, nationality, personal 17 | appearance, race, religion, or sexual identity and orientation. 18 | 19 | ### Our Standards 20 | 21 | Examples of behavior that contributes to creating a positive environment 22 | include: 23 | 24 | * Using welcoming and inclusive language 25 | * Being respectful of differing viewpoints and experiences 26 | * Gracefully accepting constructive criticism 27 | * Focusing on what is best for the community 28 | * Showing empathy towards other community members 29 | 30 | Examples of unacceptable behavior by participants include: 31 | 32 | * The use of sexualized language or imagery and unwelcome sexual attention or 33 | advances 34 | * Trolling, insulting/derogatory comments, and personal or political attacks 35 | * Public or private harassment 36 | * Publishing others' private information, such as a physical or electronic 37 | address, without explicit permission 38 | * Other conduct which could reasonably be considered inappropriate in a 39 | professional setting 40 | 41 | ### Our Responsibilities 42 | 43 | Project maintainers are responsible for clarifying the standards of acceptable 44 | behavior and are expected to take appropriate and fair corrective action in 45 | response to any instances of unacceptable behavior. 46 | 47 | Project maintainers have the right and responsibility to remove, edit, or 48 | reject comments, commits, code, wiki edits, issues, and other contributions 49 | that are not aligned to this Code of Conduct, or to ban temporarily or 50 | permanently any contributor for other behaviors that they deem inappropriate, 51 | threatening, offensive, or harmful. 52 | 53 | ### Scope 54 | 55 | This Code of Conduct applies within all project spaces, and it also applies when 56 | an individual is representing the project or its community in public spaces. 57 | Examples of representing a project or community include using an official 58 | project e-mail address, posting via an official social media account, or acting 59 | as an appointed representative at an online or offline event. Representation of 60 | a project may be further defined and clarified by project maintainers. 61 | 62 | ### Enforcement 63 | 64 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 65 | reported by contacting the project team at hello@robbowen.digital. All 66 | complaints will be reviewed and investigated and will result in a response that 67 | is deemed necessary and appropriate to the circumstances. The project team is 68 | obligated to maintain confidentiality with regard to the reporter of an incident. 69 | Further details of specific enforcement policies may be posted separately. 70 | 71 | Project maintainers who do not follow or enforce the Code of Conduct in good 72 | faith may face temporary or permanent repercussions as determined by other 73 | members of the project's leadership. 74 | 75 | ### Attribution 76 | 77 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 78 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 79 | 80 | [homepage]: https://www.contributor-covenant.org 81 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Robb Owen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SynthWave '84 - VS Code theme 2 | ![Synthwave '84 logo over a cityscape](./banner.png) 3 | 4 | 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? 5 | 6 | No, I don't remember it either, but with this experimental theme we can go there. 7 | 8 | __As of v0.1.0, no external extensions are needed to activate the glow effect!__ 9 | 10 | ![Neon glowing text](./theme.jpg) 11 | 12 | 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). 13 | 14 | ## But...why? 15 | 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. 16 | 17 | 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 :) 18 | 19 | ## Installation 20 | To begin with, [install the base theme from the VS Marketplace](https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode). This is the way Synthwave '84 is intended to be used day-to-day. If you want to enable the gratuitous 80s glow, it needs a little extra work to get it going. 21 | 22 | ### Disclaimer 23 | VS code doesn't natively support text effects and as a result, the glow is experimental. It's likely to be buggy and, whilst it looks rad, it isn't intended for extended use. To enable the glow, the extension has to modify the internal files of VS Code, so use with caution. Should something go wrong, you can disable the glow by following the instructions below. If for any reason you can't open VS Code, you can fix the issue with a fresh install of VS Code. 24 | 25 | If you do decide use the glow effect, you do so at your own risk. Bring your Sunglasses. Here be (laser)dragons. 26 | 27 | ### To enable the glow 28 | As of v0.1.0, external extensions are no longer needed to active the glow. 29 | 30 | Firstly, if you are a Windows user, you may need to run VS Code with administrator privileges. For Linux and Mac users, Code must not be installed in a read-only location and you must have write permissions. 31 | 32 | If you have been using Synthwave prior to v0.1.0, you will likely have used the Custom CSS and JS extension to enable the glow. Before enabling Neon Dreams, you will need to disable the prior method. You can do this by pressing `Ctrl + Shift + P` or `Shift + ⌘ + P` and choose "__Disable Custom CSS and JS__" 33 | 34 | To activate the glow, Set your active colour theme to Synthwave '84 - as of v0.1.0 the glow is only active when the base theme is selected. Open your command palette with `Ctrl + Shift + P` or `Shift + ⌘ + P` and choose "__Enable Neon Dreams__". It will prompt you to restart, and when you do the lights should be on :) 35 | 36 | Note: In the name of simplifying the install process and mitigating update-related issues, the new version of Synthwave '84 doesn't use a custom CSS file anymore. _If you have been using a custom-modified version of the theme, then you can still continue to use that with the previous Custom CSS and JS method_. 37 | 38 | #### To customise the glow brightness 39 | In your `settings.json` add the key: 40 | ``` 41 | "synthwave84.brightness": 0.45 42 | ``` 43 | The value should be a _float value_ from 0 to 1, where 0.0 is fully transparent. The default brightness is 0.45. To avoid eye strain, avoid using higher brightness values for extended periods of time. 44 | 45 | To see the changes, you need to rerun the activation function. Open your command palette with `Ctrl + Shift + P` or `Shift + ⌘ + P` and choose "__Enable Neon Dreams__". 46 | 47 | Note: Changing the brightness currently only affects the opacity of the glow, the text will remain white (that may change in future updates). If you want to disable the glow effect but retain the chrome updates, see below. 48 | 49 | #### To enable editor chrome updates, but disable glow 50 | In your `settings.json` add the key: 51 | ``` 52 | "synthwave84.disableGlow": true 53 | ``` 54 | To see the changes, you need to rerun the activation function. Open your command palette with `Ctrl + Shift + P` or `Shift + ⌘ + P` and choose "__Enable Neon Dreams__". 55 | 56 | ### To remove corruption warning and [unsupported] from title-bar 57 | Because enabling the glow modifies core files, VS code will interpret this as the core being 'corrupted' and you may see an error message on restarting your editor. You can safely dismiss this message, or remove it entirely with the [Fix VSCode Checksums](https://marketplace.visualstudio.com/items?itemName=lehni.vscode-fix-checksums 'Fix VSCode Checksums') extension. 58 | 59 | Upon installation of 'Fix VSCode Checksums', open the command palette and execute `Fix Checksums: Apply`. You will need to completely restart VSCode after execution, reopening without fully exiting might not be enough. 60 | 61 | ## Updates 62 | Every time you update VS code, you will need to repeat this step to re-enable the glow. 63 | 64 | ## Disabling the glow and uninstallation 65 | The glow effect started as a joke and was never intended for long-term coding sessions. If you want to turn it off, you can disable it at any time by opening your command palette with `Ctrl + Shift + P` or `Shift + ⌘ + P` and choose "__Disable Neon Dreams__". 66 | 67 | ### Font 68 | 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. 69 | 70 | ## Compatibility 71 | This theme is still **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. 72 | 73 | ## Contributing 74 | I'm really happy to consider any contributions to this theme. Before you make any changes, [please read the contribution guide](https://github.com/robb0wen/synthwave-vscode/blob/master/CONTRIBUTING.md). 75 | 76 | ## Thanks 77 | Lastly, I couldn't have made this if it weren't for the fantastic 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 🙏 78 | 79 | 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 👍 80 | 81 | If this theme is too much, then I recommend [Horizon](https://github.com/jolaleye/horizon-theme-vscode), or [City Lights](http://citylights.xyz/) for a similar, yet more understated, retro vibe. They're both beautiful. 82 | 83 | Banner cityscape image from [Unsplash](https://unsplash.com/photos/DxHR8K5Egjk) 84 | -------------------------------------------------------------------------------- /README_LEGACY.md: -------------------------------------------------------------------------------- 1 | # SynthWave '84 - VS Code theme 2 | ![Synthwave '84 logo over a cityscape](./banner.png) 3 | 4 | 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? 5 | 6 | No, I don't remember it either, but with this experimental theme we can go there. 7 | 8 | ![Neon glowing text](./theme.jpg) 9 | 10 | 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). 11 | 12 | ## But...why? 13 | 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. 14 | 15 | 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 :) 16 | 17 | ## Installation 18 | To begin with, [install the base theme from the VS Marketplace](https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode). This is the way Synthwave '84 is intended to be used day-to-day. If you want to enable the gratuitous 80s glow, it needs a little extra work to get it going. 19 | 20 | VS code doesn't natively support text effects and as a result, the glow is experimental. It's likely to be buggy and, whilst it looks rad, it isn't intended for extended use. 21 | 22 | If you do decide use the glow effect, you do so at your own risk. Bring your Sunglasses. Here be (laser)dragons. 23 | 24 | ### To enable the glow 25 | Install this [excellent plugin that allows you to load custom CSS and JS](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) from the VS Marketplace. **Please carefully read the ReadMe regarding permission for that extension before continuing with this installation.** 26 | 27 | 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). Alternatively, if you want the browser chrome updates without the text glow you can use [`synthwave84-noglow.css`](https://github.com/robb0wen/synthwave-vscode/blob/master/synthwave84-noglow.css). 28 | 29 | Copy your chosen CSS file 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: 30 | 31 | ``` 32 | { 33 | "vscode_custom_css.imports": [ 34 | "file:///Users/{your username}/synthwave84.css" 35 | ] 36 | } 37 | ``` 38 | 39 | Windows might resemble: 40 | 41 | ``` 42 | { 43 | "vscode_custom_css.imports": [ 44 | "file:///C:/Users/{your username}/synthwave84.css" 45 | ] 46 | } 47 | ``` 48 | 49 | **Important**: Make sure you include the file protocol in the path i.e. `file://` 50 | 51 | Open your command palette 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 :) 52 | 53 | At this point, VS Code may pop up a message to say that it is corrupted, this is caused by the [custom CSS & JS extension](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) and not this theme. As their installation instructions say, you can click "Don't show again" to dismiss the popup. 54 | 55 | ## Updates 56 | 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. 57 | 58 | This is less than ideal, but until VS code add the option to use custom CSS natively, it's unfortunately the only option. 59 | 60 | ## Disabling the glow and uninstallation 61 | The glow effect started as a joke and was never intended for long-term coding sessions. If you want to turn it off, you can disable it at any time by opening your command palette with `Ctrl + Shift + P` or `Shift + ⌘ + P` and choose "Disable custom CSS". 62 | 63 | If you decide to change to a different theme altogether, you will also need to disable the custom css in this way. You may also wish to remove the file path from your `settings.json`. 64 | 65 | ### Font 66 | 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. 67 | 68 | ## Compatibility 69 | 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. 70 | 71 | ## Contributing 72 | I'm really happy to consider any contributions to this theme. Before you make any changes, [please read the contribution guide](https://github.com/robb0wen/synthwave-vscode/blob/master/CONTRIBUTING.md). 73 | 74 | ## Thanks 75 | Lastly, I couldn't have made this if it weren't for the fantastic 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 🙏 76 | 77 | 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 👍 78 | 79 | If this theme is too much, then I recommend [Horizon](https://github.com/jolaleye/horizon-theme-vscode), or [City Lights](http://citylights.xyz/) for a similar, yet more understated, retro vibe. They're both beautiful. 80 | 81 | Banner cityscape image from [Unsplash](https://unsplash.com/photos/DxHR8K5Egjk) 82 | -------------------------------------------------------------------------------- /banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robb0wen/synthwave-vscode/9476578c2291d9f2ec3c22c76647d553156c755e/banner.png -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robb0wen/synthwave-vscode/9476578c2291d9f2ec3c22c76647d553156c755e/icon.png -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "synthwave-vscode", 3 | "version": "0.1.19", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "synthwave-vscode", 9 | "version": "0.1.19", 10 | "engines": { 11 | "vscode": "^1.33.0" 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /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.1.19", 6 | "author": "Robb Owen", 7 | "publisher": "RobbOwen", 8 | "icon": "icon.png", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/robb0wen/synthwave-vscode" 12 | }, 13 | "engines": { 14 | "vscode": "^1.33.0" 15 | }, 16 | "extensionKind": [ 17 | "ui" 18 | ], 19 | "keywords": [ 20 | "retro", 21 | "80s" 22 | ], 23 | "categories": [ 24 | "Themes" 25 | ], 26 | "activationEvents": [ 27 | "onCommand:synthwave84.enableNeon", 28 | "onCommand:synthwave84.disableNeon" 29 | ], 30 | "main": "./src/extension.js", 31 | "contributes": { 32 | "themes": [ 33 | { 34 | "label": "SynthWave '84", 35 | "uiTheme": "vs-dark", 36 | "path": "./themes/synthwave-color-theme.json" 37 | } 38 | ], 39 | "commands": [ 40 | { 41 | "command": "synthwave84.enableNeon", 42 | "title": "Synthwave '84: Enable Neon Dreams" 43 | }, 44 | { 45 | "command": "synthwave84.disableNeon", 46 | "title": "Synthwave '84: Disable Neon Dreams" 47 | } 48 | ], 49 | "configuration": { 50 | "title": "Synthwave '84", 51 | "properties": { 52 | "synthwave84.brightness": { 53 | "type": "number", 54 | "default": 0.45, 55 | "description": "Set the brightness value for the glow effect. 0.0 is fully transparent and 1.0 is fully bright" 56 | }, 57 | "synthwave84.disableGlow": { 58 | "type": "boolean", 59 | "default": false, 60 | "description": "Disable the glow effect, but show Synthwave '84 editor chrome updates" 61 | } 62 | } 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/css/editor_chrome.css: -------------------------------------------------------------------------------- 1 | .monaco-editor .margin, .monaco-editor .inputarea.ime-input { 2 | background: transparent; 3 | } 4 | 5 | /* Add the subtle gradient to the editor background */ 6 | .monaco-editor { 7 | background-color: transparent !important; 8 | background-image: linear-gradient(to bottom, #2a2139 75%, #34294f); 9 | background-size: auto 100vh; 10 | background-position: top; 11 | background-repeat: no-repeat; 12 | } 13 | 14 | /* Sweet sunset dots */ 15 | .monaco-workbench .activitybar>.content .monaco-action-bar .badge .badge-content { 16 | background: linear-gradient(to bottom, #fff951 25%, #fc28a8); 17 | } 18 | 19 | /* Active tab neon */ 20 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active { 21 | box-shadow: inset 0 -5px 25px #fc28a825; 22 | position: sticky; 23 | } 24 | 25 | /* Active tab stripe */ 26 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active::after { 27 | content: ''; 28 | position: absolute; 29 | bottom: -1px; 30 | left: 0; 31 | right: 0; 32 | height: 4px; 33 | background: linear-gradient(to right, #fc28a8, #03edf9) !important; 34 | opacity: 1; 35 | z-index: 6; 36 | } 37 | 38 | .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit::after { 39 | content: ''; 40 | position: absolute; 41 | bottom: -1px; 42 | left: 0; 43 | right: 0; 44 | height: 0px; 45 | transition: opacity 1s; 46 | opacity: 0; 47 | z-index: 6; 48 | } 49 | 50 | /* Active sidebar item */ 51 | .monaco-workbench .activitybar>.content .monaco-action-bar .action-item.checked { 52 | box-shadow: inset 0 -5px 25px #fc28a825; 53 | position: relative; 54 | } 55 | 56 | .monaco-workbench .activitybar>.content .monaco-action-bar .action-item.checked::after { 57 | content: ''; 58 | position: absolute; 59 | bottom: 0px; 60 | top: 0px; 61 | left: 0px; 62 | width: 4px; 63 | height: 100%; 64 | background: linear-gradient(to bottom, #fc28a8, #03edf9) !important; 65 | opacity: 1; 66 | } 67 | 68 | .monaco-workbench .active-item-indicator { 69 | display: none; 70 | } 71 | 72 | .monaco-workbench .activitybar>.content .monaco-action-bar .action-item::after { 73 | content: ''; 74 | position: absolute; 75 | bottom: 0px; 76 | top: 0px; 77 | left: 0px; 78 | width: 0px; 79 | transition: opacity 1s; 80 | opacity: 0; 81 | } 82 | 83 | /* update lightbulb to be neon */ 84 | .codicon-lightbulb-autofix:before, 85 | .codicon-light-bulb:before, .codicon-lightbulb:before { 86 | content: ''; 87 | } 88 | 89 | .codicon-lightbulb-autofix:before 90 | .codicon-light-bulb:before, .codicon-lightbulb:before, 91 | .lightbulb-glyph { 92 | 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; 93 | filter: drop-shadow(0 0 5px #03edf9); 94 | } 95 | 96 | .codicon-lightbulb-autofix:before, 97 | .codicon-light-bulb:before, .codicon-lightbulb:before { 98 | content: '' !important; 99 | 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; 100 | filter: drop-shadow(0 0 5px #03edf9); 101 | width: 1em; 102 | height: 1em; 103 | display: inline-block 104 | } 105 | -------------------------------------------------------------------------------- /src/extension.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const vscode = require('vscode'); 4 | 5 | /** 6 | * @param {vscode.ExtensionContext} context 7 | */ 8 | function activate(context) { 9 | this.extensionName = 'RobbOwen.synthwave-vscode'; 10 | this.cntx = context; 11 | 12 | const config = vscode.workspace.getConfiguration("synthwave84"); 13 | 14 | let disableGlow = config && config.disableGlow ? !!config.disableGlow : false; 15 | 16 | let brightness = parseFloat(config.brightness) > 1 ? 1 : parseFloat(config.brightness); 17 | brightness = brightness < 0 ? 0 : brightness; 18 | brightness = isNaN(brightness) ? 0.45 : brightness; 19 | 20 | const parsedBrightness = Math.floor(brightness * 255).toString(16).toUpperCase(); 21 | let neonBrightness = parsedBrightness; 22 | 23 | let disposable = vscode.commands.registerCommand('synthwave84.enableNeon', function () { 24 | 25 | const appDir = path.dirname(vscode.env.appRoot); 26 | const base = path.join(appDir,'app','out','vs','code'); 27 | const electronBase = isVSCodeBelowVersion("1.70.0") ? "electron-browser" : "electron-sandbox"; 28 | const workBenchFilename = vscode.version == "1.94.0" ? "workbench.esm.html" : "workbench.html"; 29 | 30 | const htmlFile = path.join(base, electronBase, "workbench", workBenchFilename); 31 | const templateFile = path.join(base, electronBase, "workbench", "neondreams.js"); 32 | 33 | try { 34 | 35 | // const version = context.globalState.get(`${context.extensionName}.version`); 36 | 37 | // generate production theme JS 38 | const chromeStyles = fs.readFileSync(__dirname +'/css/editor_chrome.css', 'utf-8'); 39 | const jsTemplate = fs.readFileSync(__dirname +'/js/theme_template.js', 'utf-8'); 40 | const themeWithGlow = jsTemplate.replace(/\[DISABLE_GLOW\]/g, disableGlow); 41 | const themeWithChrome = themeWithGlow.replace(/\[CHROME_STYLES\]/g, chromeStyles); 42 | const finalTheme = themeWithChrome.replace(/\[NEON_BRIGHTNESS\]/g, neonBrightness); 43 | fs.writeFileSync(templateFile, finalTheme, "utf-8"); 44 | 45 | // modify workbench html 46 | const html = fs.readFileSync(htmlFile, "utf-8"); 47 | 48 | // check if the tag is already there 49 | const isEnabled = html.includes("neondreams.js"); 50 | 51 | if (!isEnabled) { 52 | // delete synthwave script tag if there 53 | let output = html.replace(/^.*(\n`); 56 | output += ''; 57 | 58 | fs.writeFileSync(htmlFile, output, "utf-8"); 59 | 60 | vscode.window 61 | .showInformationMessage("Neon Dreams enabled. VS code must reload for this change to take effect. Code may display a warning that it is corrupted, this is normal. You can dismiss this message by choosing 'Don't show this again' on the notification.", { title: "Restart editor to complete" }) 62 | .then(function(msg) { 63 | vscode.commands.executeCommand("workbench.action.reloadWindow"); 64 | }); 65 | 66 | } else { 67 | vscode.window 68 | .showInformationMessage('Neon dreams is already enabled. Reload to refresh JS settings.', { title: "Restart editor to refresh settings" }) 69 | .then(function(msg) { 70 | vscode.commands.executeCommand("workbench.action.reloadWindow"); 71 | }); 72 | } 73 | } catch (e) { 74 | if (/ENOENT|EACCES|EPERM/.test(e.code)) { 75 | vscode.window.showInformationMessage("Neon Dreams was unable to modify the core VS code files needed to launch the extension. You may need to run VS code with admin privileges in order to enable Neon Dreams."); 76 | return; 77 | } else { 78 | vscode.window.showErrorMessage('Something went wrong when starting neon dreams'); 79 | return; 80 | } 81 | } 82 | }); 83 | 84 | let disable = vscode.commands.registerCommand('synthwave84.disableNeon', uninstall); 85 | 86 | context.subscriptions.push(disposable); 87 | context.subscriptions.push(disable); 88 | } 89 | exports.activate = activate; 90 | 91 | // this method is called when your extension is deactivated 92 | function deactivate() { 93 | // ... 94 | } 95 | 96 | function uninstall() { 97 | const appDir = path.dirname(vscode.env.appRoot); 98 | const base = path.join(appDir, 'app', 'out', 'vs', 'code'); 99 | const electronBase = isVSCodeBelowVersion("1.70.0") ? "electron-browser" : "electron-sandbox"; 100 | const workBenchFilename = vscode.version == "1.94.0" ? "workbench.esm.html" : "workbench.html"; 101 | 102 | const htmlFile = path.join(base, electronBase, "workbench", workBenchFilename); 103 | 104 | // modify workbench html 105 | const html = fs.readFileSync(htmlFile, "utf-8"); 106 | 107 | // check if the tag is already there 108 | const isEnabled = html.includes("neondreams.js"); 109 | 110 | if (isEnabled) { 111 | // delete synthwave script tag if there 112 | let output = html.replace(/^.*(