VSCode custom background (in random order)

README.md

VSCode Custom Background Scripts

Usage

1. Install Custom CSS and JS Loader. (or other extensions that can import your own styles and scripts)
2. Import the scripts.

{
	"vscode_custom_css.imports": [
		"file://C:/_files/files/ide_bgs/vscode-bg.css",
		"file://C:/_files/files/ide_bgs/vscode-bg.js",
	],
}

3. Configure the script.

// Edit these options.
const INTERVAL = 3600000;
const LIGHT_OPACITY = 0.85;
const DARK_OPACITY = 0.9;
const BG_URLS = [
  // file:// urls should be in form of vscode-file://vscode-app/path/to/your/file.png
  'vscode-file://vscode-app/d%3A/_files/files/ide_bgs/1.png',
  'vscode-file://vscode-app/d%3A/_files/files/ide_bgs/2.png',
];

Images from an random image API are also accepted.

vscode-bg.css

#monaco-parts-splash+div[role='application'] {
	opacity: var(--custom-bg-opacity);
	transition: opacity 2s ease-out;
}

.custom-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 2s ease-out;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.custom-bg-a {
	background-image: var(--custom-bg-a);
	opacity: 1;
}

.custom-bg-b {
	background-image: var(--custom-bg-b);
	opacity: 0;
}

vscode-bg.js

(function CustomBg() {
	console.info('[Custom background] Custom background script loaded.');

	const INTERVAL = 900000;
	const LIGHT_OPACITY = 0.88;
	const DARK_OPACITY = 0.92;
	const BG_URLS = [
		'vscode-file://vscode-app/c%3A/_files/files/ide_bgs/1.png',
		'vscode-file://vscode-app/c%3A/_files/files/ide_bgs/2.png',
		'vscode-file://vscode-app/c%3A/_files/files/ide_bgs/3.png',
		'vscode-file://vscode-app/c%3A/_files/files/ide_bgs/4.png',
		'vscode-file://vscode-app/c%3A/_files/files/ide_bgs/5.png',
		'vscode-file://vscode-app/c%3A/_files/files/ide_bgs/6.png',
	];

	async function getNextBgUrl() {
		const index = Math.floor(Math.random() * BG_URLS.length);

		return fetch(BG_URLS[index])
			.then((resp) => resp.blob())
			.then((blob) => URL.createObjectURL(blob))
			.catch((err) => console.error('[Custom background] Error loading image:', err));
	}

	const rootElement = document.documentElement;
	const bodyElement = document.body;

	// Append background images.
	const customBgElementA = document.createElement('div');
	customBgElementA.classList.add('custom-bg');
	customBgElementA.classList.add('custom-bg-a');
	bodyElement.insertBefore(customBgElementA, bodyElement.firstChild);

	const customBgElementB = document.createElement('div');
	customBgElementB.classList.add('custom-bg');
	customBgElementB.classList.add('custom-bg-b');
	bodyElement.insertBefore(customBgElementB, bodyElement.firstChild);

	let nextBg = 'b';
	let prevBgUrls = ['', ''];
	async function swapBgUrl() {
		// Swap image.
		nextBg = nextBg === 'a' ? 'b' : 'a';

		// Revoke previous background image.
		URL.revokeObjectURL(prevBgUrls[0]);

		// Set new background image.
		const nextBgUrl = await getNextBgUrl();
		rootElement.style.setProperty('--custom-bg-' + nextBg, `url('${nextBgUrl}')`);

		prevBgUrls[0] = prevBgUrls[1];
		prevBgUrls[1] = nextBgUrl;
	}

	function swapOpacity() {
		// Swap opacity
		if (nextBg === 'a') {
			customBgElementA.style.setProperty('opacity', '1');
			customBgElementB.style.setProperty('opacity', '0');
		} else {
			customBgElementA.style.setProperty('opacity', '0');
			customBgElementB.style.setProperty('opacity', '1');
		}
	}

	// Set background images.
	swapBgUrl().then(() => swapBgUrl());

	setInterval(() => {
		swapOpacity();
		setTimeout(swapBgUrl, 2100);
	}, INTERVAL);

	// Set background opacity according to color scheme.
	setTimeout(() => {
		const isDark = !document
			.getElementById('monaco-parts-splash')
			.classList.contains('vs-dark');
		if (isDark) bodyElement.style.setProperty('--custom-bg-opacity', DARK_OPACITY.toString());
		else bodyElement.style.setProperty('--custom-bg-opacity', LIGHT_OPACITY.toString());
	});
})();