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
Last active
June 28, 2024 11:40
-
-
Save jancimajek/c95e1561ab5053b6290210c0235f78f9 to your computer and use it in GitHub Desktop.
Fix GitHub Dark Theme grey overlay issue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment