Custom CSS & JavaScript

Vibrancy Continued allows you to import custom CSS and JavaScript files to create your own themes or modify existing ones. This powerful feature lets you completely customize the appearance of VS Code.

The Imports Setting

The vscode_vibrancy.imports setting accepts an array of file paths to CSS and JavaScript files.

{
  "vscode_vibrancy.imports": [
    "/path/to/custom.css",
    "/path/to/script.js"
  ]
}

Key Points

Files are imported in the order they appear in the array
Files ending in .css are loaded as stylesheets
Files ending in .js are loaded as scripts
Paths must be absolute (not relative)
On Windows, use forward slashes (/) instead of backslashes
Changes require running “Reload Vibrancy” (F1) and restarting VS Code

Path Examples

macOS
Windows
Linux

{
  "vscode_vibrancy.imports": [
    "/Users/YourUsername/Documents/vscode-custom.css",
    "/Users/YourUsername/.vscode/tweaks.css"
  ]
}

{
  "vscode_vibrancy.imports": [
    "C:/Users/YourUsername/Documents/vscode-custom.css",
    "C:/Users/YourUsername/.vscode/tweaks.css"
  ]
}

Use forward slashes (/) on Windows, not backslashes (\).

{
  "vscode_vibrancy.imports": [
    "/home/username/.config/Code/custom.css",
    "/home/username/vscode-theme.css"
  ]
}

Creating a Custom CSS Theme

Step 1: Create Your CSS File

Create a new CSS file in a location of your choice:

/* custom-vibrancy.css */

/* Make the sidebar more transparent */
.monaco-workbench .part.sidebar {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Style the activity bar */
.monaco-workbench .activitybar {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

/* Customize the editor background */
.monaco-editor,
.monaco-editor .margin {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Style the title bar */
.monaco-workbench .part.titlebar {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

Step 2: Configure Imports

Add the file path to your settings:

{
  "vscode_vibrancy.imports": [
    "/Users/YourUsername/custom-vibrancy.css"
  ],
  "vscode_vibrancy.theme": "Custom theme (use imports)"
}

Set the theme to "Custom theme (use imports)" to use only your custom files without any default Vibrancy theme.

Step 3: Apply Changes

Save your settings
Press F1 and run “Reload Vibrancy”
Restart VS Code when prompted

Example Custom Themes

Minimal Transparency Theme

/* minimal-transparent.css */

/* Only make the sidebar and activity bar transparent */
.monaco-workbench .part.sidebar,
.monaco-workbench .activitybar {
  background-color: rgba(30, 30, 30, 0.5) !important;
}

/* Keep everything else opaque */
.monaco-editor {
  background-color: #1e1e1e !important;
}

High Contrast Transparent Theme

/* high-contrast-transparent.css */

/* Maximum transparency with high contrast text */
.monaco-workbench .part {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Ensure text is readable */
.monaco-workbench {
  color: #ffffff !important;
}

/* Add slight border for definition */
.monaco-workbench .split-view-view {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

Gradient Background Theme

/* gradient-background.css */

/* Apply gradient to the workbench */
.monaco-workbench {
  background: linear-gradient(
    135deg,
    rgba(30, 60, 90, 0.3) 0%,
    rgba(60, 30, 90, 0.3) 100%
  ) !important;
}

/* Transparent panels to show gradient */
.monaco-workbench .part {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

Custom Color Accents

/* color-accents.css */

/* Custom accent color for activity bar */
.monaco-workbench .activitybar .action-item.checked {
  background-color: rgba(100, 200, 255, 0.3) !important;
}

/* Custom selection highlight */
.monaco-list .monaco-list-row.selected {
  background-color: rgba(100, 200, 255, 0.2) !important;
}

/* Custom focus border */
.monaco-workbench .part:focus {
  outline: 2px solid rgba(100, 200, 255, 0.5) !important;
}

Using JavaScript

You can also inject custom JavaScript to add dynamic behavior:

// custom-behavior.js

// Log when VS Code finishes loading
console.log('Custom Vibrancy script loaded!');

// Add a custom class to the workbench
setTimeout(() => {
  const workbench = document.querySelector('.monaco-workbench');
  if (workbench) {
    workbench.classList.add('custom-vibrancy');
  }
}, 100);

// Dynamic opacity based on time of day
const updateOpacity = () => {
  const hour = new Date().getHours();
  const isDaytime = hour >= 6 && hour < 18;
  const opacity = isDaytime ? 0.3 : 0.5;
  
  document.documentElement.style.setProperty(
    '--vibrancy-opacity',
    opacity
  );
};

updateOpacity();

Add to settings:

{
  "vscode_vibrancy.imports": [
    "/path/to/custom.css",
    "/path/to/custom-behavior.js"
  ]
}

Modifying Existing Themes

You can use imports to tweak existing Vibrancy themes:

{
  "vscode_vibrancy.theme": "Default Dark",
  "vscode_vibrancy.imports": [
    "/path/to/tweaks.css"
  ]
}

/* tweaks.css - Modifications to Default Dark theme */

/* Make the editor slightly more opaque */
.monaco-editor {
  background-color: rgba(30, 30, 30, 0.6) !important;
}

/* Add border to sidebar */
.monaco-workbench .part.sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

Inspecting VS Code Elements

To find CSS selectors for customization:

Open VS Code Developer Tools:
- Press Cmd/Ctrl + Shift + P
- Run “Developer: Toggle Developer Tools”
Use the element inspector (click the arrow icon)
Click on the UI element you want to customize
Note the CSS classes and structure in the Elements panel
Use those selectors in your custom CSS

VS Code uses the Monaco editor’s CSS classes extensively. Look for classes starting with .monaco- for editor-related elements.

Common CSS Selectors

Here are some useful CSS selectors for customizing VS Code:

/* Activity Bar (left sidebar with icons) */
.monaco-workbench .activitybar { }

/* Sidebar (file explorer, search, etc.) */
.monaco-workbench .part.sidebar { }

/* Editor area */
.monaco-editor { }
.monaco-editor .margin { /* Line numbers */ }
.monaco-editor .view-lines { /* Code lines */ }

/* Title Bar */
.monaco-workbench .part.titlebar { }

/* Status Bar (bottom bar) */
.monaco-workbench .part.statusbar { }

/* Panel (terminal, output, etc.) */
.monaco-workbench .part.panel { }

/* Tabs */
.monaco-workbench .tabs-container { }
.tab { /* Individual tab */ }

/* Command Palette */
.quick-input-widget { }

/* Notifications */
.notifications-toasts { }

/* Menu Bar */
.menubar { }

Example: Complete Custom Theme

Here’s a complete example of a custom theme: custom-purple-theme.css:

/* Purple Glass Theme */

:root {
  --purple-primary: rgba(138, 43, 226, 0.3);
  --purple-secondary: rgba(75, 0, 130, 0.2);
  --purple-accent: rgba(186, 85, 211, 0.4);
}

/* Activity Bar */
.monaco-workbench .activitybar {
  background-color: var(--purple-primary) !important;
}

.monaco-workbench .activitybar .action-item.checked {
  background-color: var(--purple-accent) !important;
}

/* Sidebar */
.monaco-workbench .part.sidebar {
  background-color: var(--purple-secondary) !important;
}

/* Editor */
.monaco-editor,
.monaco-editor .margin {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Title Bar */
.monaco-workbench .part.titlebar {
  background-color: var(--purple-primary) !important;
}

/* Status Bar */
.monaco-workbench .part.statusbar {
  background-color: var(--purple-primary) !important;
  border-top: 1px solid var(--purple-accent) !important;
}

/* Panel */
.monaco-workbench .part.panel {
  background-color: var(--purple-secondary) !important;
}

/* Tabs */
.monaco-workbench .tabs-container {
  background-color: var(--purple-secondary) !important;
}

.tab.active {
  background-color: var(--purple-accent) !important;
}

/* Selections */
.monaco-list .monaco-list-row.selected,
.monaco-list .monaco-list-row.focused {
  background-color: var(--purple-accent) !important;
}

settings.json:

{
  "vscode_vibrancy.theme": "Custom theme (use imports)",
  "vscode_vibrancy.imports": [
    "/Users/YourUsername/custom-purple-theme.css"
  ],
  "vscode_vibrancy.type": "fullscreen-ui",
  "vscode_vibrancy.opacity": 0,
  "workbench.colorTheme": "Dark+ (default dark)"
}

Referencing Existing Themes

You can study the built-in Vibrancy themes for inspiration:

Find your VS Code installation directory
Navigate to the extension directory:
- macOS: ~/.vscode/extensions/illixion.vscode-vibrancy-continued-*/themes/
- Windows: %USERPROFILE%\.vscode\extensions\illixion.vscode-vibrancy-continued-*\themes\
Open any .css file to see how themes are structured

Or view them on GitHub: Vibrancy Themes Directory

Troubleshooting

Custom CSS not loading

Possible causes:

File path is incorrect
File doesn’t exist at specified location
Wrong path separator on Windows (use / not \)
Vibrancy hasn’t been reloaded

Solutions:

Verify the file exists at the exact path specified
Check for typos in the path
Run “Reload Vibrancy” (F1)
Restart VS Code
Check the Console in Developer Tools for error messages

Custom styles not applying

Possible causes:

CSS specificity too low
VS Code’s styles are overriding yours
Styles cached from previous reload

Solutions:

Add !important to your CSS rules
Increase selector specificity
Clear VS Code cache and reload
Check Developer Tools to see if styles are being applied

Import error notification

If you see: “Couldn’t open custom import file”Solutions:

Verify file path is absolute (not relative)
Check file permissions (must be readable)
Remove placeholder /path/to/file from imports array
Ensure file extension is .css or .js

JavaScript not executing

Possible causes:

File path is incorrect
JavaScript errors in your code
Content Security Policy blocking execution

Solutions:

Check Developer Tools Console for errors
Verify file path and extension (.js)
Test with simple script first (e.g., console.log('test'))
Wrap code in try-catch blocks

Best Practices

Organization

Keep all custom theme files in one directory
Use descriptive filenames (e.g., vibrancy-purple-accent.css)
Comment your CSS for future reference
Version control your custom themes with git

Performance

Minimize the number of imported files
Avoid heavy JavaScript operations
Use CSS variables for easier maintenance
Test performance with Developer Tools

Maintenance

Keep backups of working themes
Document color values and design decisions
Test themes after VS Code updates
Share your themes with the community

If you create a great custom theme:

Share the CSS file on GitHub
Create a pull request to add it to the official themes directory
Share in the Vibrancy Discussions
Write a blog post or tutorial

See the Contributing Guide for details on submitting themes.

Getting Started

Platform Guides

Configuration

Troubleshooting

The Imports Setting

Key Points

Path Examples

Creating a Custom CSS Theme

Step 1: Create Your CSS File

Step 2: Configure Imports

Step 3: Apply Changes

Example Custom Themes

Minimal Transparency Theme

High Contrast Transparent Theme

Gradient Background Theme

Custom Color Accents

Using JavaScript

Modifying Existing Themes

Inspecting VS Code Elements

Common CSS Selectors

Example: Complete Custom Theme

Referencing Existing Themes

Troubleshooting

Best Practices

Organization

Performance

Maintenance

Further Reading

Build docs developers (and LLMs) love

Getting Started

Platform Guides

Configuration

Troubleshooting

​The Imports Setting

​Key Points

​Path Examples

​Creating a Custom CSS Theme

​Step 1: Create Your CSS File

​Step 2: Configure Imports

​Step 3: Apply Changes

​Example Custom Themes

​Minimal Transparency Theme

​High Contrast Transparent Theme

​Gradient Background Theme

​Custom Color Accents

​Using JavaScript

​Modifying Existing Themes

​Inspecting VS Code Elements

​Common CSS Selectors

​Example: Complete Custom Theme

​Referencing Existing Themes

​Troubleshooting

​Best Practices

​Organization

​Performance

​Maintenance

​Sharing Your Theme

​Further Reading

Build docs developers (and LLMs) love

The Imports Setting

Key Points

Path Examples

Creating a Custom CSS Theme

Step 1: Create Your CSS File

Step 2: Configure Imports

Step 3: Apply Changes

Example Custom Themes

Minimal Transparency Theme

High Contrast Transparent Theme

Gradient Background Theme

Custom Color Accents

Using JavaScript

Modifying Existing Themes

Inspecting VS Code Elements

Common CSS Selectors

Example: Complete Custom Theme

Referencing Existing Themes

Troubleshooting

Best Practices

Organization

Performance

Maintenance

Sharing Your Theme

Further Reading