Fix GitHub Dark Theme grey overlay issue

README.md

Fix GitHub Dark Theme grey overlay issue

This fixes GitHub issue with its dark theme, that adds a grey overlay (a.k.a. dark_dimmed mode) when navigating to Actions.

Recommend running this automatically using a browser extension, e.g. Chrome's User JavaScript and CSS

fix-github-dark-theme.js

const getNodeInfo = (e) => ({
	e: `${e.localName}${e.id ? `#${e.id}` : ''}${e.classList.length > 0 ? `.${Array.from(e.classList).join('.')}` : ''}`,
	darkTheme: e.dataset.darkTheme,
	lightTheme: e.dataset.lightTheme,
});

const fixGHDarkTheme = () => {
	const observeThemeChanges = (observer) => {
		console.group('Monitoring for theme changes');
		document
			.querySelectorAll('[data-dark-theme], [data-light-theme]')
			.forEach((e) => {
				console.log('Observing', getNodeInfo(e));
				observer.observe(e, {
					attributeFilter: ['data-dark-theme', 'data-light-theme'],
				});
			});
		console.groupEnd();
	};

	const handleThemeChange = (changes, observer) => {
		observer.disconnect();

		console.group('Fix GitHub Dark Theme');
		console.log('Changes detected', changes);
		
		switchToDarkTheme(observer);
	};

	const switchToDarkTheme = (observer) => {
		console.log(
			'Before:',
			Array.from(
				document.querySelectorAll('[data-dark-theme], [data-light-theme]')
			).flatMap((e) => getNodeInfo(e))
		);

		document
			.querySelectorAll(
				'[data-dark-theme="dark_dimmed"], [data-light-theme="dark_dimmed"]'
			)
			.forEach((e) => {
				if (e.dataset.darkTheme === 'dark_dimmed') e.dataset.darkTheme = 'dark';
				if (e.dataset.lightTheme === 'dark_dimmed')
					e.dataset.lightTheme = 'dark';
			});

		console.log(
			'After:',
			Array.from(
				document.querySelectorAll('[data-dark-theme], [data-light-theme]')
			).flatMap((e) => getNodeInfo(e))
		);

		observeThemeChanges(observer);
		console.groupEnd();
	};

	const observer = new MutationObserver(handleThemeChange);
	console.group('Fix GitHub Dark Theme');
	switchToDarkTheme(observer);
};

document.addEventListener('DOMContentLoaded', fixGHDarkTheme);