Skip to content

Experience the ultimate coding environment with the Transparent Color theme. Designed exclusively for macOS, this theme brings the stunning vibrancy background blur of macOS to Visual Studio Code. Enjoy a sleek and modern coding experience with translucent backgrounds that seamlessly blend with the rest of your macOS interface.

License

Notifications You must be signed in to change notification settings

AlexOwl/vscode-transparent-color-theme

Repository files navigation

Transparent Color Theme

Experience the ultimate coding environment with the Transparent Color theme. Designed exclusively for macOS, this theme brings the stunning vibrancy background blur of macOS to Visual Studio Code. Enjoy a sleek and modern coding experience with translucent backgrounds that seamlessly blend with the rest of your macOS interface.

Screenshots

Screenshot

Installation

  1. Launch Visual Studio Code
  2. Go to the Extensions view by clicking on the square icon on the left side toolbar or by pressing Ctrl+Shift+X
  3. Search for "Transparent Color Theme" and click on the "Install" button
  4. Once the theme is installed, click on the "Reload" button to activate it

Blur effect

To achieve the transparent effect with Visual Studio Code, you can use the Apc Customize UI++ extension. It allows you to configure the transparency settings by adding the following settings to your VS Code settings.json:

"apc.electron": {
    "opacity": 0.95,
    "transparent": true,
    "backgroundColor": "#00000000",
    "vibrancy": "ultra-dark"
},

Additional

Cursor Blinking Effect

"apc.stylesheet": {
        ".monaco-editor .cursor": "background: #ffffffaa !important; box-shadow: 0 0 70px 5px #ffffff, #ffffff 0px 0px 34px 1px; color: #161616 !important",
},
"editor.cursorBlinking": "phase",
"editor.cursorSmoothCaretAnimation": "on",

Font with ligatures

You can download FiraCode Font on this link

"editor.fontFamily": "'FiraCode Nerd Font Mono', 'FiraCode Nerd Font', FiraCode, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,

UI Animations

There is great extension VSCode Animations. You can use it with Apc Customize UI++, but check VSCode Animations custom injection plugin readme section

"apc.imports": [
    "file:///~/.vscode/extensions/brandonkirbyson.vscode-animations-1.0.14/dist/updateHandler.js"
],

Example config:

"animations.Enabled": true,
"animations.CursorAnimation": true,
"animations.Command-Palette": "None",
"animations.CursorAnimationOptions": {
    "TrailLength": 10
},
"animations.Tabs": "Slide",
"animations.Active": "Indent",

Theme Details

Contributing

If you have any suggestions, bug reports, or feature requests, please open an issue.

License

This theme is licensed under the MIT License.

About

Experience the ultimate coding environment with the Transparent Color theme. Designed exclusively for macOS, this theme brings the stunning vibrancy background blur of macOS to Visual Studio Code. Enjoy a sleek and modern coding experience with translucent backgrounds that seamlessly blend with the rest of your macOS interface.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published