Customize Theme Colors

[xCyborg]

Hi, I would like to customize the colors of the theme (like the text purple and other things, is there a way to do that?

[danoe]

Yes, i use several modified colors in mine. Just add this block to your preferences settings.json file.

    "workbench.colorCustomizations": {
        "[SynthWave '84]": {
            "scrollbarSlider.background": "#541388",
            "scrollbarSlider.hoverBackground": "#650D89",
            "scrollbarSlider.activeBackground": "#541388",
            "editor.lineHighlightBackground": "#4d3d7666",
            "list.activeSelectionBackground": "#4d3d7666",
            "list.hoverBackground":  "#4d3d7666",
            "list.focusBackground": "#4d3d7666",
        },
    },

I'm not sure which is the parameter you want though, you should be able to find the correct parameter here: https://code.visualstudio.com/api/references/theme-color#base-colors or https://code.visualstudio.com/api/references/theme-color#text-colors

[ArudoPE]

Hi, I also did a lot of little changes, the only color I can't properly change is the editor background:

"workbench.colorCustomizations": {
        "[SynthWave '84]":
        {   "sideBar.background": "#000",
            "sideBar.border": "#6b6b6b",
            "sideBarSectionHeader.background": "#000",
            "sideBarSectionHeader.border": "#616161",
            "menubar.selectionBackground": "#767575",
            "menu.background": "#000",
            "titleBar.activeBackground": "#000",
            "statusBar.background": "#000",
            "activityBar.background": "#333333",
            "activityBar.activeBackground": "#1d1d1d",
            "editorPane.background": "#852b2b",
            "tab.activeBackground": "#000",
            "tab.activeBorder": "#616161",
            "tab.inactiveModifiedBorder": "#616161",
            "tab.inactiveBackground": "#1a1919",
            "editor.background": "#000",
            "scrollbarSlider.background": "#949494",
            "scrollbarSlider.activeBackground": "#6d6d6d",
            "scrollbarSlider.hoverBackground": "#8a8989",
            "list.activeSelectionBackground": "#000",
            "list.hoverBackground": "#000",
            "list.focusBackground": "#000",
        }
    },

[Casio-3]

Hi. This is also a problem that has bothered me for a long time. Now I'm thinking I've found a possible solution for it. Just look for where the extension locates in, For my condition, I go to: C:\Users\[USERNAME]\.vscode\extensions\robbowen.synthwave-vscode-0.1.8\themes Then I find a file named "synthwave-color-theme.json", that's where we can customize our own theme. You can easily open it with your VScode and modify colors under suggestions.

[BerkanSezer]

I have same issue. I changed all settings but never changes the editor.background field. I modified the ~/.vscode/extensions/robbowen.synthwave-vscode-0.1.8/themes/synthwave-color-theme.json file but nothing changes. I delete all css but editor.backgorund does not changes again

[sortedcord]

is there any way to change the colours of this gradient?

[haakonstorm]

[haakonstorm]

~/.vscode-insiders/extensions/robbowen.synthwave-vscode-0.1.8/themes/synthwave-color-theme.json contains delicious variables to neonmodify.

[ArudoPE]

After January update I can't enable Neon Dreams again... is a shame, because is my favorite Theme.

[haakonstorm]

@ArudoPE Try a vanilla install. E.g. on macOS, create a new user and log in with that user; then reinstall Code without turning any settings/prefs syncronization on. If you can enable Neon Dreams and it works here, you know there is something amiss related to your main users VSCode install and not with Neon Dreams. Then you can start debugging, I suggest perhaps start by deleting all VSCode caches (google how) and turning off (or on/off/on) any "hacky" extensions you might have running, like patchers, CSS, theme editors.. delete and reinstall VSCode altogether.

[haakonstorm]

For others having trouble with the background color [only]: had this occur twice; no matter where background color changed/overridden, would stay plurple. Manually removing [~/]Library caches, search&replace all references to the background color via stream editor sed on every file in ~/.vscode-insiders, changing themes back and forth .... What ended working though, was giving up, drinking a few beer, then hammer a long island iced tea alcoholic beverage drink. When I came back, the Neon deities and VS Code [Insiders] rewarded my choice of alcoholic beverage. With a new VS Code version. I download/install/restart, and my #020304 background was reinstated. It is not far fetched to conclude both correlation and causation considering the colors in a long island iced tea.

[Casio-3]

Finally i found the editor background color is rendered by the ~/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/workbench/neondream.js then go to the code block shown as follows:

/* Add the subtle gradient to the editor background */
.monaco-editor {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #2a2139 75%, #34294f);
    background-size: auto 100vh;
    background-position: top;
    background-repeat: no-repeat;
  }

After commenting out this part of code, i got a satisfying color.

[haakonstorm]

I think what you are looking at is part of the resulting runtime. On macOS, the similar part would be found inside the actual .app bundle itself. Propably what happens when you "enable neon glow" is the various resources in the extension is assembled and more or less stuffed inside the binaries (executable) itself. Upon update of VSCode, your changes will be gone, though. With VSCode Insiders that means < 24 hours. You'll find these same resources inside ~/.vscode-insiders/extensions/.../synthwave or similar on Windows. Changes to resources here and followed by enable neon glow will reassemble resources and stuff them back in and activated upon VSCode restart. Sure would be cool if OP found some time to update this project with just a small number of changes to make customization a little easier. There is also ongoing work with VSCode regarding colors/styling, e.g. what happens to your text/style when selected. For example when you select a word, you cannot simultaneously change both foreground and background of the selected text.

[Rogan88]

is there any way to change the colours of this gradient?

@sortedcord - I was able to change this by defining some custom CSS

[kanta-mir]

~/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/workbench/neondream.js

for me this was the location D:\Users[use-name]\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\code\electron-browser\workbench may be helps someone

[emericoude]

Pretty late here, but mine was located at C:\Users[user-name].vscode\extensions\robbowen.synthwave-vscode-0.1.11\synthwave84.css

commented out line 39 to 47

[8ogdanovv]

in Linux (Ubuntu) file neondreams.js is placed on path: /usr/share/code/resources/app/out/vs/code/electron-sandbox/workbench/neondreams.js

block of styling code titled with comments subtle background includes gradient to bar containing line numbers

by default it is gradient - I replaced colors with #000000 both: /* Add the subtle gradient to the editor background */ ... background-image: linear-gradient(to bottom, #000000 75%, #000000); ...

of course it requires all permissions got to be assigned to your user to edit any files connected with code: sudo chown -R $(whoami) /usr/bin/code /usr/share/code/

SUBTLE BACKGROUND IS ADDED BY neondreams.js ALWAYS you could edit it for Windows VSCode and for Linux Code as well

I love this theme and black BG also - so you could pick my edited theme .json from this repo free: https://github.com/vadym4che/synthwave-black-neon