robb0wen/synthwave-vscode

Synthwave inspired colour theme for VS Code 🌅🕶

synthwave-vscode's Issues

Update README: synthwave84.css doesn't need to be copied to another location if it's already present in the extensions folder

The README.md says:

Locate synthwave84.css either in this extension's VS code install directory, or directly from the github repo. Alternatively, if you want the browser chrome updates without the text glow you can use synthwave84-noglow.css.

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. (...)

I feel this doesn't make it clear enough that the user does not need to copy the synthwave84.css file to another location if it is already in the Code's extensions directory. I.e. I can refer it as file:///C:/Users/Marc/.vscode/extensions/robbowen.synthwave-vscode-0.0.6/synthwave84.css and everything works correctly.

Can we update the README file to make that more clear?

Animated glow

If VS Code supports CSS animations, it would be totally radical to have the glow effect animating in and out.

scroll bar invisible

I can't see the scroll bar scrolling while scrolling the mouse wheel.So please give a color contrast to the scroll bar against the background so that we can tell it and then left click it to control it move tinily.Thank you!

vs code version 1.33.1 inoperative

i setting in my vscode about plug-in components setting.json and restart my vscode
my theme are still default theme

macOs

Support 'Operator Mono' font

Operator Mono is a beautiful coding font that I've been using for a while, but themes need to provide support for it to get it to display correctly.

I don't know what it takes to get it done but might try getting this done, for fun. 🙂

If anyone knows how to do it and want to have a swing at it, I'd be super happy! 🙌

Glow theme

Could you add the glowing theme as a new one? This way no tweaks would be needed. (Those are not working for me anyway.)

Context/import Menu selection color not visible

Great theme! I noticed the selected item highlighting is too dark to see. In the screenshot below, the mouse is hovering over an item but the highlighting is very faint.

Similarly, text selection on pop up menus have the same faint highlighting. E.g. some of the text in the pop up below is selected.

Perhaps we could use the highlight color similar to issue #1 ?

Thanks!
Eric

Ruler separators are almost not visible

not working in macos

Hey, I tried my best to install "Synthwave84" theme into my VSC. I did install "custom css" plugin too, set the path, changed policy. I'm sure I've done whatever mentioned in documentation but still didn't succeed. Any suggestion !

Do you know how to package this as an extension?

Hey Robb,

Rad work!

I've also been playing around with using injected CSS and Javascript (and also a bunch of regex based highlighting stuff). And I've been thinking that I'd eventually like to package up my custom crap as an actual extension. I see that you have got stuff wrapped up as a theme. I still need to learn how to do that! How did you do that? (I used Hopscotch theme extension as my starting point and then the rest of my customizations are in my settings.json (my injected stuff can also be found here. I went ahead and added your stuff and I'm going to start integrating and tweaking it later. You've done a lot more extensive stuff than I on the injection. I just used the injection stuff to switch fonts in my comments and some other bits and pieces (though I also built stuff up to use a gulp scss build process which I think might be useful as I get more and more complex with my fiddling))

And also do you have any idea where one would start if one wanted to take some of the cool hacky bits that you or I have been doing with the injections and integrate them into an actual extension package in a more complete sort of way?

I've also been adding a bunch of custom syntax highlighting using a regex based highlighting plugin and I wonder if there's some way I could integrate that too?

Also here's a picture of how my hacked theme looks in case you were curious:

Better contrast for variables/objects.

---

A lot of themes differentiate variable name colors from object paths. Others also use a different color of text for the last property in an object. It would be a great improvement to add additional contrast.

Examples of other themes that have contrast in variable names and objects..

Shades of Purple theme..

Monokai Dark Vibrant theme..

Is this theme support python?

It seems not supporting Python. I have installed this theme and correctly configured it via settings.json. But my Python codes are still keeping its original style.

how to install in android studio?

No effect in vscode Version: 1.33.1 OS: Linux x64 4.15.0-48-generic

More contrast for text selection

Hi! I love your theme! It's sooo awesome.
The only thing I don't find optimal is how subtle selected text is highlighted.
Maybe it appears to me like that because of my screens but I thought wanted to give that feedback anyways.

Feature: Synthwave-Background but problem with terminal-tab

I edited the css file and with a few lines of code i ended up with this (background is a animated gif):

I now wonder if it's possible to make the terminal transparent so that the background is still seen through the terminal.
I tried to modify it myself but it seems that since it's a canvas-element, this is not too easy as within the editor itself.

Edit: All i did was do change line 40-45 in the css file:

.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;*/
  background-image: url("https://thumbs.gfycat.com/BraveOptimalBaleenwhale-small.gif");
  background-size: auto 100vh;
  background-position: top;
  background-repeat: no-repeat;
}

.monaco-editor::before {
	display: block;
	width: 100vw;
	height: 100vh;
	background-image: linear-gradient(to bottom, #2a2139 75%, #34294f);
	content: "";
	position: absolute;
	z-index: 0;
	top: 0px;
	left: 0px;
	opacity: 0.9;
}

Add support for power mode

I managed to manually add the power mode with the theme.

It looks like this:

https://streamable.com/9lyy9

It would be cool to install it as a dependency of the theme or if it not possible, Maybe adding some bonus to the README with the correct additional instructions to set it up. (Custom settings.json for highlight color, etc)

I could send PR, but I would like to know if the dependency path is viable or we should stick only with the README update, or maybe nothing at all

@robb0wen

Colors washed out on mac

I installed this on my Ubuntu computer and the colors look amazing.

I installed this on my Mac and the colors aren't as vibrant as Linux and do not look like the screenshot on the main page. It still looks great, but the colors
are more white and the glow is also less.

Screenshot attached for comparison.

Mac

Original

I am also using Fira Code 100 (weight) with ligatures.

Visual artifacts when Glow is enabled

Hi,

I have some visual artifacts on my Virtual Machine:

Does it occur due to I use it on Virtual Machine? I have no another visual artifacts on it. Colors are set as "Highest Quality (32 bit)" in settings of RDP.

Unable to install

Unable to install because, the extension 'robbowen.synthwave-vscode' compatible with current version '1.32.3' of VS Code is not found.

Light version

It could be a nice addition to this great theme, to work in daylight.

Please consider auto import css path to user setting

It stops working for me today and just figured out I need to update the css path in the setting to 0.0.7.
Also please consider add an inject js to set the glow size in the css. The default looks bad on my HP monitor. I need to reduce the glow size.

[Question] any plan on releasing for VS2017?

i don't know much about theme creation so i don't know if it's possible without too much hassle,

Not working on VSCode 1.30.2 (Linux)

So, I've been trying to configure the theme on the settings.json file but it doesn't seem to be recognizing the custom theme, these are my current settings:

{
    "vscode_custom_css.imports": ["file:///home/kyo/Downloads/synthwave-vscode-0.0.6/synthwave84.css"],
    "vscode_custom_css.policy": true,
    "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressResultsExplorerNotice": false,
    "suppressShowKeyBindingsNotice": true
},
"gitlens.historyExplorer.enabled": true,
"workbench.iconTheme": "material-icon-theme",
"window.zoomLevel": -1,
}

I've tried removing the gitlens configuration and that doesn't seem to be interfering with the general settings.
I've done all the steps involving the custom CSS and JS extension, including the part which I had to give permission to the application for it to modify itself.
I can't seem to find any solutions. Any suggestions on what I should do? Am I doing something wrong or is the app just incompatible with this version of vscode?

Highlight is a little too dim

When clicking on an object in VS, the object is highlighted everywhere it's used. The highlight is a little too dim to easily pick-up. It could be my monitor, but I imagine most dev monitors aren't retina displays. Screen attached (I clicked on payload elsewhere).

Beautiful theme! As a child of the 80's, I feel like throwing on a jean jacket and cranking up the Van Halen! \m/

Edit: looks like there's a PR for this already here #26.

selection color is hard to see

Glow wont disable after uninstall

After disabling the custom CSS/JS and then removing the theme, I still has that custom glow on all of my themes now. How can I remove this?

Even more glow?

I love this extension and I love the glow. I want even more! :D

Is there a simple change to synthwave84.css that will let me turn up the glow a few notches?

Not compatible with vs 1.20.0

When trying to install it in my vstudio code I've got the error that it is not compatible with the latest version 1.20.0.

Glow not working on Ubunutu 19.04 VSCODE V1.33.1

I've added the right css file with correct path to the settings, and enabled the custom css, but still there is no glow :(

Make it work with vue files (vetur extension)

This is great! but it does not seem to work with vue files. Any way to enable that?
https://marketplace.visualstudio.com/items?itemName=octref.vetur

How i force the use for another language

I'm wanna use this theme with rust lang, and i want to know if it's possible to do any method.

html text is black (on dark blue background)

Nice theme,

did I miss something during the installation? the html text is unreadable, because black on dark background:

also, I have this problem at larger scale with TS files but I guess it's not supported ?

Let's make a plugin to Hyper.js too!

What do you think? I'm love with this theme, we could develop one for hyper.js too.

Do you know?

https://hyper.is/

What icon theme are you using?

QQ: what icon theme are you using in your screenshots?

Thanks!

Question: any plans on creating this for Webstorm?

Change modified file sidebar color to not connote errors

In other themes like Monokai, modified and untracked files without critical errors appear in recognizable-but-neutral colors like green and beige:

then this changes to brighter, error-associated colors like red or orange if there are syntax errors in the file:

In Synthwave (which is fantastic, by the way; thanks for releasing it!) the default color for Modified files is one that, to me, signals the presence of an error:

While this changes to a stronger red when an error is present () it has tripped me up a few times already to look at a modified file and think it contains errors when there are none.

I'd like to suggest that a different color be used to signal modified-but-not-errored files in the sidebar, to avoid this cognitive dissonance.

Thanks!

HTML: matching tag is almost invisible

When coding in HTML, it's really hard to see the matching tag of an element, because the background color for the matching tag is almost the same of the background.

Make line numbers brighter

Great theme! 👍
Could we make line numbers a bit easier to distinguish in the theme?
Currently they look like this:

Theme for other softwares ?

Hey there, I don't use VSCode but I already love this theme, do you plan to export it to other software for dev, like PHPStorm or SublimeText for example ?

Congrats again,
Epistol

glow too faint

My editor didn't match the extreme neon awesomeness of the screenshot in readme until I reverted css to commit 71da96f.

Don't question your art, it's beautiful!

only glow part of it

- question about the glow and theme - Hi!

Hello, I am really liking the glow aspect of the theme and was wondering if it's possible to use the same glow theme on my theme somehow. Would you be able to give me some pointers on how to incorporate it on another theme? I've tried to change the custom CSS file but am not sure on how to fo the appropriate values. Heres the theme I'm trying to change it on :) = xotopio.xotopio-dark

No glow effect on macOS

I have macOS Mojave, VS Code 1.33.1. I did everything described here , I have colors of this theme but I haven't any glow effect.

UPD Oh it glowing but not so much. My bad.

Merge actions aren't visible

The text with merge actions isn't visible:

On hover:

I tried to find the right properties to make a change but wasn't able to find them after a quick search.

With another theme it looks like:

Idea: Powershell Automated Install

Hi, I wasn't sure the best place to share this, but I wrote something in Powershell that does most of the hard work for people for the glow part.

https://gist.github.com/iamkilo/afbbadc92b504deba093ba96174452cd

Just have to reload or enable the plugin when it's done. Does not require admin rights.

Error with the theme

Am getting this error when I installed the theme

"Your VSCodium installation appears to be corrupt."

After activating the CSS through the Custom CSS and JS Loader pluggin and running "Enable Custom CSS and JS", booting VSCodium gives me this error. I don't know if this occurs on VSCode or if it's a bug within VSCode/VSCodium itself.

Running "Disable Custom CSS and JS" fixes the problem.

Glow not working on macOS - VSCode Version 1.33.1 (1.33.1)

I've installed the plugin, I've installed the js/css plugin, I've enabled custom css/js, I've added the css file, I've updated settings.json, I've given 'everyone' read/write of the css file. I am using the dotnet core c# plugin/editor and not seeing any glow on .cs or .json files.

{ "git.enableSmartCommit": true, "git.autofetch": true, "git.confirmSync": false, "window.zoomLevel": 0, "workbench.iconTheme": "city-lights-icons-vsc-light", "editor.fontFamily": "Inconsolata, Menlo, Monaco, 'Courier New', monospace", "editor.fontSize": 15, "terminal.integrated.fontSize": 15, "workbench.colorTheme": "SynthWave '84", "vscode_custom_css.imports": [ "file:///Users/markmcgookin/Source/synthwave84.css" ] }

Consider higher-visibility active tab styles

The styles for a selected editor tab and an unselected editor tab are very close, and the one-pixel border on the bottom of the active tab and slightly lighter font color are too subtle (for me, at least) to quickly identify the active tab. I'm not sure what would be best here, but a change of background color (either to emphasize the active tab, or de-emphasize the inactive ones), a thicker bottom border, or even brighter text might each independently make it easier for the active tab to catch the eye.