Skip to content

Instantly share code, notes, and snippets.

@techygrrrl
Last active December 4, 2022 04:48
Show Gist options
  • Save techygrrrl/aa770cb85ff858ee7f675ffdf3bd06aa to your computer and use it in GitHub Desktop.
Save techygrrrl/aa770cb85ff858ee7f675ffdf3bd06aa to your computer and use it in GitHub Desktop.
Support light chat in theatre mode on Twitch when your theme is set to light. This requires you to press Alt+T and doesn't work when clicking the toggle. Read more about it in the blog post: https://blog.techygrrrl.stream/light-mode-twitch-chat-theatre-mode
// ==UserScript==
// @name Twitch Theatre Mode Light Chat
// @namespace https://techygrrrl.stream
// @version 0.1
// @description Use the preferred dark/light mode theme in theatre mode. Only works when pressing Alt+T.
// @author techygrrrl
// @match https://*.twitch.com/*
// @match https://*.twitch.tv/*
// @icon https://i.imgur.com/n2pSbiM.png
// @grant none
// ==/UserScript==
(function () {
let found = false;
let timesChecked = 0
const MAX_TIMES_CHECKED = 200
let desiredTheme = null
let oppositeTheme = null
// Check and click in milliseconds
const CHECK_INTERVAL = 200;
let interval;
setTimeout(() => {
interval = setInterval(() => {
perform();
}, CHECK_INTERVAL);
}, 5000)
function perform() {
if (timesChecked > MAX_TIMES_CHECKED) {
console.log('๐ŸŒˆ Retries exhausted. Stopped.')
clearInterval(interval)
return
}
timesChecked++
if (found) return;
let htmlElement = document.querySelector('html.tw-root--theme-light')
if (htmlElement) {
desiredTheme = 'light'
oppositeTheme = 'dark'
} else {
htmlElement = document.querySelector('html.tw-root--theme-dark')
if (htmlElement) {
desiredTheme = 'dark'
oppositeTheme = 'light'
} else {
return
}
}
if (!htmlElement) {
console.log('๐ŸŒˆ No class name, returning')
return
}
console.log('๐ŸŒˆ Desired theme', desiredTheme)
document.addEventListener('keydown', (evt) => {
if (desiredTheme === 'dark') return
if (evt.code === 'KeyT' && evt.altKey) {
setTimeout(() => {
console.log(`๐ŸŒˆ Switched theme from ${oppositeTheme} to desired theme ${desiredTheme}`)
document.documentElement.className = document.documentElement.className.replaceAll(oppositeTheme, desiredTheme)
}, 500)
}
})
console.log('๐ŸŒˆ Should have successfully attached listener for Theatre Mode toggle with Alt+T')
found = true;
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment