Problem
Currently, Twitch has both dark and light modes for the UI, but when you go into Theatre Mode, your preference for light mode is ignored and you're forced to use dark mode.
Many users find it easier to read in light mode, but the option to view chat in light mode while in theatre mode is not currently available natively.
Solution
Given that this has been an open issue on Twitch's UserVoice since 2017, and given that, unfortunately, Twitch hasn't addressed this accessibility concern yet, I decided to write a script to solve this problem. I was browsing through the Accessibility topic in Twitch's UserVoice and found this issue and thought "this is relatively easy to fix" and decided to write a fix.
I wrote a user script, which can be installed via any user script manager that listens for presses of Alt + T and assigns your preferred theme.
Here's a preview of it working in action.
In order to toggle it, you must press Alt+T outside of the chat input box. It doesn't currently work when clicking the icon in the video frame.
How does it work?
It works by toggling the global theme on the html element.
Normally, with light mode enabled, the classes on the html element are tw-root--hover js-focus-visible tw-root--theme-light, the important one being tw-root--theme-light.
For some reason, when you toggle into theatre mode, this class changes to tw-root--theme-dark even if your desired theme is light. This is probably because Twitch makes the assumption that you will want it to be dark for theatre mode.
My script changes it to tw-root--theme-light if the page loaded with the light theme as the preference.
Limitations
Currently, there are a couple of limitations.
- You must use Alt+T to trigger Theatre Mode -> It does not work when clicking the toggle in the video frame. If I have more time, I can try to troubleshoot the implementation issues I had with this, but at this time, it only works with Alt+T.
- You must refresh the tab after changing your global theme -> If you change your theme using the user menu toggle on Twitch, you will need to refresh the tab. This is because the desired theme is registered with the user script on page load. So, if you want light mode chat in Theatre Mode and you're currently in dark mode, you'll need to toggle to light mode and then refresh the tab, then go into theatre mode by pressing Alt+T
- You may experience contrast issues with light-coloured usernames -> Twitch adjusts username colours for contrast issues against the background. For example, my username is a bright pink, but is darkened when in light mode. With my user script in theatre mode, this doesn't happen, which means that some users may find the contrast insufficient for my username while in theatre mode with light chat using this fix. If you want light mode chat in Theatre Mode and you're ok with losing the chat colours, then you can install this user script also.
If you're comfortable with these limitations, you might find this helpful.
Tested in a Chromium browser on both Windows and macOS with external and built-in keyboards.
Install the code
If you have a user script manager installed, you can install the script into it by clicking on the "Raw" button on the Github gist.
After you press the "Raw" button, your user script manager should open on the installation screen. In the below screenshot it says "Confirm re-installation" but if you've never installed it, it should show "Install" or similar. I'm using ViolentMonkey but you can use any user script manager you like (there are lots to choose from).
Visit the below embed to View and install the user script.
