Git Product home page Git Product logo

synthwave-vscode's Introduction

SynthWave '84 - VS Code theme

Synthwave '84 logo over a cityscape

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?

No, I don't remember it either, but with this experimental theme we can go there.

As of v0.1.0, no external extensions are needed to activate the glow effect!

Neon glowing text

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 (check out his work, it's awesome).

But...why?

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.

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 :)

Installation

To begin with, install the base theme from the VS Marketplace. 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.

Disclaimer

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.

If you do decide use the glow effect, you do so at your own risk. Bring your Sunglasses. Here be (laser)dragons.

To enable the glow

As of v0.1.0, external extensions are no longer needed to active the glow.

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.

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"

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 :)

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.

To customise the glow brightness

In your settings.json add the key:

"synthwave84.brightness": 0.45

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.

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".

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.

To enable editor chrome updates, but disable glow

In your settings.json add the key:

"synthwave84.disableGlow": true

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".

To remove corruption warning and [unsupported] from title-bar

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 extension.

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.

Updates

Every time you update VS code, you will need to repeat this step to re-enable the glow.

Disabling the glow and uninstallation

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".

Font

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, which I recommend if you're a fan of ligatures.

Compatibility

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.

Contributing

I'm really happy to consider any contributions to this theme. Before you make any changes, please read the contribution guide.

Thanks

Lastly, I couldn't have made this if it weren't for the fantastic work of Sarah Drasner. Her tutorial on theming for CSS tricks was a huge help in developing this ๐Ÿ™

Similarly, I'd like to thanks Wes Bos for his cool Cobalt2 theme. His readme helped me figure out how to package this hot mess for public use ๐Ÿ‘

If this theme is too much, then I recommend Horizon, or City Lights for a similar, yet more understated, retro vibe. They're both beautiful.

Banner cityscape image from Unsplash

synthwave-vscode's People

Contributors

0xflotus avatar aariacarterweir avatar benbrunyee avatar brainix avatar declanramsay avatar dgoemans avatar gregdolley avatar hehoku avatar kant avatar keelzebub avatar luisrudge avatar moxwel avatar pixelshot avatar robb0wen avatar rootenginear avatar se-neaxplore avatar skourismanolis avatar timdeschryver avatar uxdxdev avatar wolfhoundjesse avatar zzombiee2361 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

synthwave-vscode's Issues

- 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

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 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?

Highlight is a little too dim

image

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.

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

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:

image

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

Animated glow

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

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.

Make line numbers brighter

Great theme! ๐Ÿ‘
Could we make line numbers a bit easier to distinguish in the theme?
Currently they look like this:
image

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.
image

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.
image

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

Thanks!
Eric

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?

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?

Merge actions aren't visible

The text with merge actions isn't visible:

image

On hover:
image

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:

image

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!

Consider higher-visibility active tab styles

image

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.

Visual artifacts when Glow is enabled

Hi,

I have some visual artifacts on my Virtual Machine:
Annotation 2019-05-05 005033

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.

Better contrast for variables/objects.

Screen Shot 2019-05-01 at 9 38 30 AM

---

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..
Screen Shot 2019-05-01 at 9 40 37 AM

Monokai Dark Vibrant theme..
Screen Shot 2019-05-01 at 9 41 29 AM

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

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" ] }

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! ๐Ÿ™Œ

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.

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.

synthwave-html

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!

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):
image

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.

image

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;
}

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 !

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
theme

Original
theme

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

Light version

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

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:

image

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.

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?

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.

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.

"Your VSCodium installation appears to be corrupt."

image

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.

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:
image

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

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:
image
While this changes to a stronger red when an error is present (image) 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!

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.