thecodemonkey / synthwave-x-fluoromachine-epic-animations

This theme brings crazy 80's animations into your VS code 🚀🎉

Synthwave x Fluoromachine & epic animations

This theme brings crazy 80's animations into your VS code 🚀🎉

This is a fork of synthwave-x-fluoromachine, wich is also fork of @robbowen's Synthwave '84 theme, merged with @fullerenedream's Fluoromachine theme for VSCode.

legendary TRON underground

epic neon glowing tooltips and folding effects

Why?

The job of a software developer is hard and often too serious. You always have to be productive and effective. But sometimes you need to take the time to just be a nerd 🤓 or to just have fun again. This theme is exactly for such times! Such nerdy times need to be celebrated accordingly 🎉🦄

Installation

Unfortunately, the current installation is a bit complicated. A hassle-free installation is already in development. Until then, the following steps must be performed to install the theme:

1. Install this theme
2. Install Custom CSS and JS Loader vscode extension
3. Link the CSS file from this extension in your .vscode/settings.json:

On Mac it might look something like the snippet below:

{
  "vscode_custom_css.imports": [
    "file:///Users/{your username}/.vscode/extensions/thecodemonkey.synthwave-x-fluoromachine-epic-animations-1.4.13/synthwave-x-fluoromachine.css",
    "file:///Users/{your username}/.vscode/extensions/thecodemonkey.synthwave-x-fluoromachine-epic-animations-1.4.13/epic-80s-transitions.css"
    ]
}

Windows might resemble:

{
  "vscode_custom_css.imports": [
    "file:///C:/Users/{your username}/.vscode/extensions/thecodemonkey.synthwave-x-fluoromachine-epic-animations-1.4.13/synthwave-x-fluoromachine.css",
    "file:///C:/Users/{your username}/.vscode/extensions/thecodemonkey.synthwave-x-fluoromachine-epic-animations-1.4.13/epic-80s-transitions.css"
    ]
}

4. epic-80s-transitions.css is optional and brings crazy 80's animations into your VS code!
5. From the command panel, select Reload Custom CSS and JS. You'll need to run this command every time vscode updates.

Font

The font being used in the screenshot above is Operator Mono with Ligatures.

Contibution

All contributions are welcome, including issues, new docs as well as updates and tweaks, blog posts, workshops, and more.

Contact

Write me on twitter.

License

i ❤️ MIT

synthwave-x-fluoromachine-epic-animations's Issues

VSCode home icon doesn't load

What is the goal?

Fix the home icon

How should it be implemented?

I'm not sure, since I don't have a single clue about VSCode themes, however the issue is this

This is the icon that I get, vs the one on the Extension page

I peeped at the files and compared them to the fork of this theme that is the same but with contrast, they have two different png files, icon and logo, but I'm unsure if that has to do anything with it. Followed the installation instructions aswell.

Test the theme and write a feedback as a comment!

What is the goal?

The theme should be improved based on the real feedback.

How should it be implemented?

Install the theme and test it extensively. Write down everything you notice, what you like and also what you don't like so much. Write your feedback here as a comment.

Scrolling grid plane flickers near horizon

The horizontal lines near the horizon flicker in and out until their width is a bit larger than a pixel (as can be seen in the clip attached). It really ruins an otherwise perfect effect.

plane_scrolling.mp4

I imagine that somehow capping the width of a line to at least 1 pixel after the perspective transform would solve the flickering issue, but I have no idea how that could be done in CSS.

Custom CSS not completely loading

The colors are getting loaded, but the rest like the background or the glowing is not getting loaded.

Checked if I had syntax errors from copying wrong, but that's not the case.
I also reinstalled the theme, but that didn't change a thing.

Disabling zoom effect

how to disable zoom effect when i go on editing code ? it makes impossible to move cursor where i want or multi select. i didnt see in css files . thx/

All terminal text is purple, error or success, it's all purple

What is the goal?

Be able to differentiate errors and success messages in the terminal again.

How should it be implemented?

Maybe neon blue for success, and neon pink/purple for errors?

file tab gets changed to that of similar to file explorer

please help me fix it. neither extension was able to run animations plus it changed the file tab at top like basic file explorer . i cant change it back to previous themes or any .deleting the extension also doesnt change anything .please help : (

create settings page to configure the behavior of theme

What is the goal?

It should be possible to make the settings via a settings page (VS Code UI). For example, it should be possible to turn animations on and off via the Settings Page.

How should it be implemented?

possible solution:

https://code.visualstudio.com/docs/getstarted/settings

https://code.visualstudio.com/api/references/contribution-points#contributes.configuration

automate the installation of Custom CSS and JS Loader

What is the goal?

The installation of Custom CSS and JS Loader should be as automatic as possible so that the user gets a simple installation process.

How should it be implemented?

this could be the possible solution:

https://code.visualstudio.com/api/references/extension-manifest#extension-packs

write all necessary settings automatically to settings.json

What is the goal?

write settings automatically to the global settings.json to simplify the installation.

How should it be implemented?

could be the solution:

https://stackoverflow.com/questions/44151691/vscode-is-there-an-api-for-accessing-config-values-from-a-vscode-extension

alternativa para activar los estilos y animaciones sin custom css and js reload

En mi trabajo las computadoras no tienen internet, por lo que he intentado instalar la extension custom css reload por vsix, pero no funciona. Hay alguna otra alternativa para cargar los estilos sin usar esa extension?

write friendly contribution guide

What is the goal?

writing a friendly contribution guide.

a CI/CD pipeline should be created to have an automatic deployment

What is the goal?

1. The version number(Minor) must be increased.

2. Read me file and package.json must be updated with the new version number.

3. The extension must be packaged.

4. The extension must be published to the marketplace automatically.

5. The master brunch must be tagged with a release tag and the release notes must be added.

How should it be implemented?

1. The pipeline must be created in GH Actions.

2. Nodejs Setup Action is necessary

3. VSCE cli should be installed via npm

   npm install -g vsce

4. Package the extension

   npm run package

5. Publish the extension

   npm run publish

6. Save PAT token in GH secrets and provide to publish command.