GitHub - crlang44/AuroraBg · GitHub
/" data-turbo-transient="true" />
Skip to content
Search or jump to...
Search code, repositories, users, issues, pull requests...
-->
Search
Clear
Search syntax tips
Provide feedback
--><br>We read every piece of feedback, and take your input very seriously.
Include my email address so I can be contacted
Cancel
Submit feedback
Saved searches
Use saved searches to filter your results more quickly
-->
Name
Query
To see all available qualifiers, see our documentation.
Cancel
Create saved search
Sign in
/;ref_cta:Sign up;ref_loc:header logged out"}"<br>Sign up
Appearance settings
Resetting focus
You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
{{ message }}
crlang44
AuroraBg
Public
Notifications<br>You must be signed in to change notification settings
Fork
Star
main
BranchesTags
Go to file
CodeOpen more actions menu
Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit
History<br>5 Commits<br>5 Commits
.gitignore
.gitignore
README.md
README.md
aurora-vscode.js
aurora-vscode.js
demo.gif
demo.gif
demo.png
demo.png
View all files
Repository files navigation
Aurora — live animated background for VS Code & Antigravity
A slow, iridescent aurora shader that renders behind your code editor . It's a single<br>self-contained file (aurora-vscode.js) — WebGL shader + the styling needed to make the<br>editor surfaces see-through, all in one.
Disclaimers: Yes this was built by AI, and no it will not make you more productive (but I think its cool nonetheless)
What you get
A calm, always-moving aurora behind your editor, sidebar, and panels.
Theme-aware: sticky scroll keeps your color theme's own colors , so pinned lines stay readable.
A small CONFIG block at the top of the file to tune brightness, dimming, speed, minimap, and sticky-scroll opacity.
Requirements
VS Code or Antigravity (any recent version).
The Custom CSS and JS Loader extension:
be5invis.vscode-custom-css (for Visual Studio Marketplace / VS Code)
s-h-a-d-o-w.vscode-custom-css (for Open-VSX / Antigravity)
⚠️ This works by injecting a script into the editor's UI. It's a popular but unofficial<br>approach — read Things to know before you start.
Install
1. Install the loader extension
Open the Extensions panel and search for "Custom CSS and JS Loader" → Install .
Visual Studio Marketplace: publisher be5invis (be5invis.vscode-custom-css)
Open-VSX: publisher s-h-a-d-o-w (s-h-a-d-o-w.vscode-custom-css)
2. Save the Aurora file somewhere permanent
Put aurora-vscode.js in a stable folder — e.g. ~/aurora/aurora-vscode.js.<br>If you later move or delete it, the background disappears.
3. Point your editor at it
Open your settings JSON: Command Palette (Cmd/Ctrl+Shift+P) → "Preferences: Open User Settings (JSON)" — and add:
"vscode_custom_css.imports": [<br>"file:///Users/YOURNAME/aurora/aurora-vscode.js"
Path format by OS:
macOS / Linux: file:///absolute/path/aurora-vscode.js
Windows: file:///C:/Users/YOURNAME/aurora/aurora-vscode.js
4. Enable it
Command Palette → "Enable Custom CSS and JS" → click Restart when prompted.
That's it — the aurora should now be drifting behind your code.
Tuning
Open aurora-vscode.js and edit the CONFIG block at the top:
const CONFIG = {<br>opacity: 0.60, // how visible the aurora is behind your code (0 – 1)<br>dim: 0.45, // extra dark scrim for text readability (0 – 1)<br>speed: 1.00, // motion speed multiplier (0.2 – 3)<br>minimap: 0.45, // minimap translucency so aurora shows through (0 = invisible, 1 = solid)<br>sticky: 0.92, // sticky-scroll backing opacity (uses your THEME's color)<br>};
After any change, run Command Palette → "Reload Custom CSS and JS" .
Tips
Hard to read your code? Raise dim or lower opacity.
Want the minimap fully solid again? Set minimap: 1 (or disable it in settings with "editor.minimap.enabled": false).
Want sticky scroll fully opaque? Set sticky: 1.
A dark color theme looks best, since some theme surfaces stay tinted (the preview shows the Tokyo Night Storm theme).
Things to know
This extension patches the editor's own UI files, which has a few side effects:
"Your installation appears corrupt" warning — expected; it just means a UI file was modified.<br>Click the gear icon → "Don't Show Again" .
Re-enable after every update — app updates overwrite the patch. Just run<br>"Enable Custom CSS and JS" again.
Permissions (macOS) — if enabling fails, the app can't write to its own folder. Grant access with:<br># VS Code<br>sudo chown -R $(whoami) "/Applications/Visual Studio Code.app/Contents/Resources/app"<br># Antigravity (adjust the app name/path to match your install)<br>sudo chown -R $(whoami) "/Applications/Antigravity.app/Contents/Resources/app"
Uninstall
Command Palette → "Disable Custom CSS and JS" .
Remove the...