Automatically sync twitch theme with system preference, without clicking any UI button on twitch's side. Handles gracefully dynamic system's color scheme switching without reload.
// ==UserScript==
// @name Twitch Dark Light ColorScheme Theme System Sync
// @namespace TwitchColorSchemeThemeSync
// @version 1.0
// @description Automatically sync twitch theme with system preference, without clicking any UI button on twitch's side. Handles gracefully dynamic system's color scheme switching without reload.
// @author Write
// @match https://*.twitch.tv/*
// @grant none
// @run-at document-start
// @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAETSURBVHgB7ZU7DoJAEIb/JV7MBq/hCVROIJ7AqI2t0d5WsTF2dhzBI1hbsLIYwyPADgzrFvI1PJbk+5lZBoEaNq6cR4APA0wDIdTRgQV5lgGI8skZnbAe5a8ditwkjk15LoANeS5AW7nqabGvdfcrA9iiD9AHsB5gACZVI5o6uv+rBbct7AW4H4Dw+DmPp+7ipwGU/L5P5V4g/O8aexM2kkusvEsqVxitQOHNd7F8VnyGXIHiny37mWVFZSTyQIzL1tgV0MljQrwwq1pkBaDIoxeG3lU80XUAgvyhk/MC6OSOXs4KoJWfxIPysACRlSslV1YGpwIhV65oOwlDygYzEqBuqLShUQuSWd6hvBFLV/owwBuAI3t8NBey8QAAAABJRU5ErkJggg==
// ==/UserScript==
(function() {
'use strict';
let currentThemeIsDark = null;
let observer = null;
// Immediately check system preference
const systemPrefDarkQuery = window.matchMedia('(prefers-color-scheme: dark)');
let systemPrefersDark = systemPrefDarkQuery.matches;
console.log(`Twitch Theme Sync: System prefers ${systemPrefersDark ? 'dark' : 'light'} mode`);
// Function to update only the DOM theme (fast path for flash prevention)
function updateDOMThemeOnly(enableDarkMode) {
const htmlElement = document.documentElement;
if (!htmlElement) return false;
if (enableDarkMode) {
htmlElement.classList.remove('tw-root--theme-light');
htmlElement.classList.add('tw-root--theme-dark');
} else {
htmlElement.classList.remove('tw-root--theme-dark');
htmlElement.classList.add('tw-root--theme-light');
}
let themeToSwitch = enableDarkMode ? 'dark' : 'light';
toggleTheme(themeToSwitch);
return true;
}
function setTwitchTheme(enableDarkMode, skipCheck = false) {
const htmlElement = document.documentElement;
if (!htmlElement) return false;
const currentlyDark = htmlElement.classList.contains('theme-dark');
if (!skipCheck && currentlyDark === enableDarkMode) {
console.log('Twitch Theme Sync: Theme already matches preference');
return false;
}
console.log(`Twitch Theme Sync: Setting theme to ${enableDarkMode ? 'dark' : 'light'} mode`);
// 1. Update the HTML classes
updateDOMThemeOnly(enableDarkMode);
// 2. Set the theme cookie (0 for light, 1 for dark)
const themeValue = enableDarkMode ? '1' : '0';
localStorage.setItem('twilight.theme', `${themeValue}`);
currentThemeIsDark = enableDarkMode;
return true;
}
function syncWithSystemTheme(force = false) {
systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(`Twitch Theme Sync: System prefers ${systemPrefersDark ? 'dark' : 'light'} mode`);
return setTwitchTheme(systemPrefersDark, force);
}
function startThemeObserver() {
if (observer) return;
observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === 'attributes' &&
mutation.attributeName === 'class' &&
mutation.target === document.documentElement) {
const htmlElement = document.documentElement;
const currentlyDark = htmlElement.classList.contains('tw-root--theme-dark');
// If the current theme doesn't match our preference
if (currentThemeIsDark !== null && currentlyDark !== currentThemeIsDark) {
console.log('Twitch Theme Sync: Correcting theme class to match preference');
updateDOMThemeOnly(currentThemeIsDark !== null ? currentThemeIsDark : systemPrefersDark);
} else if (currentThemeIsDark === null) {
currentThemeIsDark = currentlyDark;
console.log(`Twitch Theme Sync: Detected initial Twitch theme: ${currentlyDark ? 'dark' : 'light'}`);
if (currentlyDark !== systemPrefersDark) {
console.log('Twitch Theme Sync: Initial theme does not match system preference');
setTwitchTheme(systemPrefersDark, true);
}
}
}
}
});
// Watch for class changes on the HTML element
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
console.log('Twitch Theme Sync: Theme observer started');
}
function handleSystemThemeChange(event) {
systemPrefersDark = event.matches;
console.log(`Twitch Theme Sync: System theme changed to ${systemPrefersDark ? 'dark' : 'light'} mode`);
setTwitchTheme(systemPrefersDark, true);
}
function initialize() {
console.log('Twitch Theme Sync: Initializing...');
if (!observer && document.documentElement) {
startThemeObserver();
}
// If we haven't detected Twitch's theme yet, force our preference
if (currentThemeIsDark === null) {
syncWithSystemTheme(true);
}
// Listen for system theme changes
systemPrefDarkQuery.removeEventListener('change', handleSystemThemeChange);
systemPrefDarkQuery.addEventListener('change', handleSystemThemeChange);
// Listen for visibility changes (tab focus)
document.addEventListener('visibilitychange', () => {
console.log(document.visibilityState)
if (document.visibilityState === 'visible') {
console.log('Twitch Theme Sync: Tab became visible, checking theme...');
syncWithSystemTheme();
}
});
// Expose functions to global scope for debugging/manual control
window.twitchThemeSync = {
toDark: () => setTwitchTheme(true, true),
toLight: () => setTwitchTheme(false, true),
syncWithSystem: () => syncWithSystemTheme(true),
getCurrentTheme: () => ({
systemPrefersDark,
currentThemeIsDark,
htmlClassDark: document.documentElement?.classList.contains('theme-dark')
})
};
console.log('Twitch Theme Sync: Initialization complete');
}
// Attempt to set theme as early as possible to prevent flash
function earlyThemeSetup() {
// Apply DOM theme change immediately at document-start
if (document.documentElement) {
console.log('Twitch Theme Sync: Early theme setup (document-start)');
// updateDOMThemeOnly(systemPrefersDark);
startThemeObserver();
}
}
earlyThemeSetup();
// If document wasn't ready yet, retry when it is
if (!document.documentElement) {
const checkDocument = setInterval(() => {
if (document.documentElement) {
earlyThemeSetup();
clearInterval(checkDocument);
}
}, 5);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initialize);
} else {
setTimeout(initialize, 100);
}
function toggleTheme(theme) {
const themes = {
dark: {
'--color-background-body': 'var(--color-hinted-grey-1)',
'--color-background-base': 'var(--color-hinted-grey-2)',
'--color-background-alt': 'var(--color-hinted-grey-3)',
'--color-background-alt-2': 'var(--color-hinted-grey-4)',
'--color-background-float': 'var(--color-hinted-grey-3)',
'--color-background-accent': 'var(--color-twitch-purple-7)',
'--color-background-accent-alt': 'var(--color-twitch-purple-6)',
'--color-background-accent-alt-2': 'var(--color-twitch-purple-5)',
'--color-background-placeholder': 'var(--color-opac-gd-1)',
'--color-background-live': 'var(--color-red)',
'--color-background-prime': 'var(--color-prime-blue)',
'--color-border-base': 'var(--color-opac-gd-2)',
'--color-border-region': 'var(--color-hinted-grey-6)',
'--color-text-base': 'var(--color-hinted-grey-14)',
'--color-text-alt': 'var(--color-hinted-grey-12)',
'--color-text-alt-2': 'var(--color-hinted-grey-9)',
'--color-text-link': 'var(--color-twitch-purple-11)',
'--color-text-link-hover': 'var(--color-twitch-purple-10)',
'--color-text-link-active': 'var(--color-twitch-purple-11)',
'--color-text-link-focus': 'var(--color-twitch-purple-10)',
'--color-text-link-visited': 'var(--color-twitch-purple-11)',
'--color-text-live': 'var(--color-text-accessible-red)',
'--color-text-alert': 'var(--color-text-accessible-red)',
'--color-text-prime': 'var(--color-prime-blue)',
'--color-text-error': 'var(--color-red-11)',
'--color-text-warn': 'var(--color-orange-11)',
'--color-text-success': 'var(--color-green-11)',
'--color-text-info': 'var(--color-blue-11)',
'--color-text-brand': 'var(--color-twitch-purple-11)',
'--color-text-accessible-red': 'var(--color-red-11)',
'--color-text-accessible-green': 'var(--color-green-11)',
'--color-text-accessible-blue': 'var(--color-blue-11)',
'--color-background-button-primary-default': 'var(--color-background-button-brand)',
'--color-background-button-primary-hover': 'var(--color-background-button-brand-hover)',
'--color-background-button-primary-active': 'var(--color-background-button-brand-active)',
'--color-background-button-secondary-default': 'var(--color-opac-gd-1)',
'--color-background-button-secondary-hover': 'var(--color-opac-gd-2)',
'--color-background-button-secondary-active': 'var(--color-opac-gd-3)',
'--color-background-button-text-default': 'var(--color-transparent)',
'--color-background-button-text-hover': 'var(--color-background-interactable-hover)',
'--color-background-button-text-active': 'var(--color-background-interactable-active)',
'--color-background-button-destructive-default': 'var(--color-background-button-error)',
'--color-background-button-destructive-hover': 'var(--color-background-button-error-hover)',
'--color-background-button-destructive-active': 'var(--color-background-button-error-active)',
'--color-background-button-error': 'var(--color-red-10)',
'--color-background-button-error-hover': 'var(--color-red-12)',
'--color-background-button-error-active': 'var(--color-red-14)',
'--color-background-button-warn': 'var(--color-orange-12)',
'--color-background-button-warn-hover': 'var(--color-orange-14)',
'--color-background-button-warn-active': 'var(--color-orange-15)',
'--color-background-button-success': 'var(--color-green-12)',
'--color-background-button-success-hover': 'var(--color-green-14)',
'--color-background-button-success-active': 'var(--color-green-15)',
'--color-background-button-info': 'var(--color-blue-11)',
'--color-background-button-info-hover': 'var(--color-blue-13)',
'--color-background-button-info-active': 'var(--color-blue-15)',
'--color-background-button-brand': 'var(--color-twitch-purple-9)',
'--color-background-button-brand-hover': 'var(--color-twitch-purple-8)',
'--color-background-button-brand-active': 'var(--color-twitch-purple-7)',
'--color-background-button-overlay-primary-default': 'var(--color-white)',
'--color-background-button-overlay-primary-hover': 'var(--color-opac-w-14)',
'--color-background-button-overlay-primary-active': 'var(--color-opac-w-13)',
'--color-background-button-overlay-secondary-default': 'var(--color-opac-w-3)',
'--color-background-button-overlay-secondary-hover': 'var(--color-background-interactable-overlay-hover)',
'--color-background-button-overlay-secondary-active': 'var(--color-background-interactable-overlay-active)',
'--color-background-button-overlay-text-default': 'var(--color-transparent)',
'--color-background-button-overlay-text-hover': 'var(--color-background-interactable-overlay-hover)',
'--color-background-button-overlay-text-active': 'var(--color-background-interactable-overlay-active)',
'--color-background-button-overlay-error': 'var(--color-background-button-error)',
'--color-background-button-overlay-error-hover': 'var(--color-background-button-error-hover)',
'--color-background-button-overlay-error-active': 'var(--color-background-button-error-active)',
'--color-background-button-overlay-warn': 'var(--color-background-button-warn)',
'--color-background-button-overlay-warn-hover': 'var(--color-background-button-warn-hover)',
'--color-background-button-overlay-warn-active': 'var(--color-background-button-warn-active)',
'--color-background-button-overlay-success': 'var(--color-background-button-success)',
'--color-background-button-overlay-success-hover': 'var(--color-background-button-success-hover)',
'--color-background-button-overlay-success-active': 'var(--color-background-button-success-active)',
'--color-background-button-overlay-info': 'var(--color-background-button-info)',
'--color-background-button-overlay-info-hover': 'var(--color-background-button-info-hover)',
'--color-background-button-overlay-info-active': 'var(--color-background-button-info-active)',
'--color-background-button-overlay-brand': 'var(--color-white)',
'--color-background-button-overlay-brand-hover': 'var(--color-opac-w-14)',
'--color-background-button-overlay-brand-active': 'var(--color-opac-w-13)',
'--color-background-button-disabled': 'var(--color-opac-gd-1)',
'--color-background-button-overlay-disabled': 'var(--color-opac-w-2)',
'--color-text-button-primary': 'var(--color-white)',
'--color-text-button-secondary': 'var(--color-text-base)',
'--color-text-button-text': 'var(--color-text-brand)',
'--color-text-button-text-hover': 'var(--color-text-base)',
'--color-text-button-destructive': 'var(--color-text-button-error)',
'--color-text-button-error': 'var(--color-black)',
'--color-text-button-warn': 'var(--color-black)',
'--color-text-button-success': 'var(--color-black)',
'--color-text-button-info': 'var(--color-black)',
'--color-text-button-brand': 'var(--color-white)',
'--color-text-button-overlay-primary': 'var(--color-black)',
'--color-text-button-overlay-secondary': 'var(--color-white)',
'--color-text-button-overlay-text': 'var(--color-white)',
'--color-text-button-overlay-error': 'var(--color-black)',
'--color-text-button-overlay-warn': 'var(--color-black)',
'--color-text-button-overlay-success': 'var(--color-black)',
'--color-text-button-overlay-info': 'var(--color-black)',
'--color-text-button-overlay-brand': 'var(--color-black)',
'--color-text-button-disabled': 'var(--color-hinted-grey-9)',
'--color-background-button': 'var(--color-twitch-purple-7)',
'--color-background-button-hover': 'var(--color-twitch-purple-8)',
'--color-background-button-focus': 'var(--color-twitch-purple-8)',
'--color-background-button-active': 'var(--color-twitch-purple-7)',
'--color-background-button-purchase': 'var(--color-opac-b-5)',
'--color-background-button-status': 'var(--color-background-button-success)',
'--color-background-button-status-hover': 'var(--color-background-button-error-hover)',
'--color-background-button-status-focus': 'var(--color-background-button-error-hover)',
'--color-background-button-status-active': 'var(--color-background-button-error-active)',
'--color-background-button-success-focus': 'var(--color-green-darker)',
'--color-background-button-alert': 'var(--color-red)',
'--color-background-button-alert-hover': 'var(--color-red-darker)',
'--color-background-button-alert-focus': 'var(--color-red-darker)',
'--color-background-button-alert-active': 'var(--color-red)',
'--color-background-button-overlay': 'var(--color-transparent)',
'--color-background-button-overlay-hover': 'var(--color-opac-w-1)',
'--color-background-button-overlay-focus': 'var(--color-opac-w-1)',
'--color-background-button-overlay-active': 'transparent',
'--color-background-interactable-alpha-hover': 'var(--color-opac-w-4)',
'--color-background-interactable-alpha-active': 'var(--color-opac-w-5)',
'--color-background-interactable-alpha-selected': 'var(--color-opac-w-3)',
'--color-text-button': 'var(--color-white)',
'--color-text-button-hover': 'var(--color-white)',
'--color-text-button-focus': 'var(--color-white)',
'--color-text-button-active': 'var(--color-white)',
'--color-text-button-secondary-hover': 'var(--color-hinted-grey-6)',
'--color-text-button-secondary-focus': 'var(--color-hinted-grey-6)',
'--color-text-button-secondary-active': 'var(--color-hinted-grey-6)',
'--color-text-button-text-focus': 'var(--color-opac-w-1)',
'--color-text-button-text-active': 'var(--color-opac-p-2)',
'--color-text-button-status': 'var(--color-white)',
'--color-text-button-status-hover': 'var(--color-white)',
'--color-text-button-status-focus': 'var(--color-white)',
'--color-text-button-status-active': 'var(--color-white)',
'--color-text-button-success-hover': 'var(--color-black)',
'--color-text-button-success-focus': 'var(--color-black)',
'--color-text-button-success-active': 'var(--color-black)',
'--color-text-button-alert': 'var(--color-black)',
'--color-text-button-alert-hover': 'var(--color-black)',
'--color-text-button-alert-focus': 'var(--color-black)',
'--color-text-button-alert-active': 'var(--color-black)',
'--color-text-button-overlay': 'var(--color-white)',
'--color-text-button-overlay-hover': 'var(--color-white)',
'--color-text-button-overlay-focus': 'var(--color-white)',
'--color-text-button-overlay-active': 'var(--color-white)',
'--color-text-interactable': 'currentColor',
'--color-text-interactable-hover': 'var(--color-white)',
'--color-text-interactable-active': 'var(--color-white)',
'--color-text-interactable-inverted': 'var(--color-white)',
'--color-text-input-focus': 'transparent',
'--color-border-button': 'var(--color-twitch-purple-7)',
'--color-border-button-hover': 'var(--color-twitch-purple-8)',
'--color-border-button-focus': 'var(--color-twitch-purple-9)',
'--color-border-button-active': 'var(--color-twitch-purple-8)',
'--color-border-button-disabled': 'var(--color-opac-w-1)',
'--color-border-button-status': 'var(--color-green)',
'--color-border-button-status-hover': 'var(--color-red-darker)',
'--color-border-button-status-focus': 'var(--color-red-darker)',
'--color-border-button-status-active': 'var(--color-red)',
'--color-border-button-success': 'var(--color-green)',
'--color-border-button-success-hover': 'var(--color-green)',
'--color-border-button-success-focus': 'var(--color-green)',
'--color-border-button-success-active': 'var(--color-green)',
'--color-border-button-alert': 'var(--color-red)',
'--color-border-button-alert-hover': 'var(--color-red-darker)',
'--color-border-button-alert-focus': 'var(--color-red-darker)',
'--color-border-button-alert-active': 'var(--color-red)',
'--color-border-button-overlay': 'var(--color-transparent)',
'--color-border-button-overlay-hover': 'var(--color-transparent)',
'--color-border-button-overlay-focus': 'var(--color-opac-w-6)',
'--color-border-button-overlay-active': 'var(--color-opac-w-9)',
'--color-border-button-overlay-bordered': 'var(--color-white)',
'--color-border-interactable-selected': 'var(--color-twitch-purple-10)',
'--shadow-input': 'inset 0 0 0 1px var(--color-twitch-purple-5)',
'--shadow-input-error': '0 0 0 1px var(--color-border-error)',
'--shadow-input-focus': '0 0 10px -2px var(--color-border-brand)',
'--shadow-input-error-focus': '0 0 6px -2px var(--color-border-error)',
'--shadow-interactable-focus': '0 0 6px 0 var(--color-twitch-purple-8)',
'--color-background-error': 'var(--color-red-11)',
'--color-background-warn': 'var(--color-orange-13)',
'--color-background-success': 'var(--color-green-13)',
'--color-background-info': 'var(--color-blue-12)',
'--color-background-brand': 'var(--color-twitch-purple-11)',
'--color-border-error': 'var(--color-red-10)',
'--color-border-error-hover': 'var(--color-red-11)',
'--color-border-warn': 'var(--color-orange-12)',
'--color-border-warn-hover': 'var(--color-orange-13)',
'--color-border-success': 'var(--color-green-12)',
'--color-border-success-hover': 'var(--color-green-13)',
'--color-border-info': 'var(--color-blue-10)',
'--color-border-brand': 'var(--color-twitch-purple-10)',
'--color-border-error-decorative': 'var(--color-red-10)',
'--color-border-warn-decorative': 'var(--color-orange-12)',
'--color-border-success-decorative': 'var(--color-green-12)',
'--color-border-info-decorative': 'var(--color-blue-10)',
'--color-border-brand-decorative': 'var(--color-twitch-purple-10)',
'--color-fill-error': 'var(--color-red-10)',
'--color-fill-warn': 'var(--color-orange-12)',
'--color-fill-success': 'var(--color-green-13)',
'--color-fill-info': 'var(--color-blue-10)',
'--color-fill-brand': 'var(--color-twitch-purple-10)',
'--font-size-base': 'var(--font-size-6)',
'--color-background-overlay-placeholder': 'var(--color-opac-w-3)',
'--color-background-overlay-error': 'var(--color-red-11)',
'--color-background-overlay-warn': 'var(--color-orange-13)',
'--color-background-overlay-success': 'var(--color-green-13)',
'--color-background-overlay-info': 'var(--color-blue-12)',
'--color-background-overlay-brand': 'var(--color-twitch-purple-11)',
'--color-background-interactable-hover': 'var(--color-opac-gd-2)',
'--color-background-interactable-active': 'var(--color-opac-gd-3)',
'--color-background-interactable-selected': 'var(--color-background-button-brand)',
'--color-background-interactable-overlay-hover': 'var(--color-opac-w-3)',
'--color-background-interactable-overlay-active': 'var(--color-opac-w-4)',
'--color-background-interactable-overlay-selected': 'var(--color-white)',
'--color-background-interactable-destructive-hover': 'var(--color-red-darker)',
'--color-background-interactable-destructive-active': 'var(--color-red)',
'--color-background-button-icon-overlay-default': 'var(--color-transparent)',
'--color-background-button-icon-overlay-hover': 'var(--color-background-interactable-overlay-hover)',
'--color-background-button-icon-overlay-active': 'var(--color-background-interactable-overlay-active)',
'--color-background-image-selector-overlay': 'var(--color-transparent)',
'--color-background-input': 'var(--color-background-base)',
'--color-background-input-focus': 'var(--color-background-base)',
'--color-background-input-checked': 'var(--color-twitch-purple-8)',
'--color-background-input-overlay': 'var(--color-opac-b-6)',
'--color-background-input-overlay-focus': 'var(--color-opac-b-6)',
'--color-background-input-checkbox-checked': 'var(--color-border-brand)',
'--color-background-input-checkbox-checked-background': 'var(--color-black)',
'--color-background-input-checkbox-checked-background-overlay': 'var(--color-black)',
'--color-background-input-checkbox-checked-overlay': 'var(--color-white)',
'--color-background-input-checkbox-checked-overlay-disabled': 'var(--color-opac-w-10)',
'--color-background-keyboard-prompt': 'var(--color-opac-gd-1)',
'--color-background-keyboard-prompt-tooltip': 'var(--color-opac-gl-1)',
'--color-background-segmented-bar': 'var(--color-opac-gd-3)',
'--color-background-segmented-bar-overlay': 'var(--color-opac-w-4)',
'--color-background-segmented-bar-fill-overlay': 'var(--color-white)',
'--color-background-segmented-button-overlay': 'var(--color-opac-w-2)',
'--color-background-segmented-button-option-selected': 'var(--color-white)',
'--color-background-segmented-button-overlay-option-selected': 'var(--color-white)',
'--color-background-selectable': 'var(--color-opac-gd-1)',
'--color-background-selectable-hover': 'var(--color-opac-gd-2)',
'--color-background-selectable-overlay': 'var(--color-opac-w-3)',
'--color-background-selectable-overlay-hover': 'var(--color-opac-w-4)',
'--color-background-tag-default': 'var(--color-opac-gd-1)',
'--color-background-table-selected': 'var(--color-twitch-purple-5)',
'--color-background-tag-hover': 'var(--color-background-interactable-hover)',
'--color-background-tag-active': 'var(--color-background-interactable-active)',
'--color-background-toggle': 'var(--color-transparent)',
'--color-background-toggle-handle': 'var(--color-white)',
'--color-background-toggle-handle-checked': 'var(--color-twitch-purple-10)',
'--color-background-toggle-handle-checked-disabled': 'var(--color-border-toggle)',
'--color-background-toggle-handle-overlay': 'var(--color-white)',
'--color-background-toggle-hover': 'var(--color-opac-w-5)',
'--color-background-toggle-focus': 'var(--color-opac-w-5)',
'--color-background-toggle-checked': 'var(--color-black)',
'--color-background-toggle-overlay': 'var(--color-opac-b-4)',
'--color-background-toggle-overlay-checked': 'var(--color-black)',
'--color-background-tooltip': 'var(--color-white)',
'--color-background-overlay-base': 'var(--color-opac-b-13)',
'--color-background-overlay-alt': 'var(--color-opac-b-9)',
'--color-background-progress': 'var(--color-opac-gd-4)',
'--color-background-progress-status': 'var(--color-border-brand)',
'--color-background-progress-status-error': 'var(--color-border-error)',
'--color-background-progress-status-caution': 'var(--color-border-warn)',
'--color-background-progress-status-success': 'var(--color-border-success)',
'--color-background-progress-overlay-status': 'var(--color-border-overlay-brand)',
'--color-background-progress-overlay-mask': 'var(--color-opac-w-4)',
'--color-background-progress-countdown': 'none',
'--color-background-progress-countdown-status': 'var(--color-twitch-purple-9)',
'--color-background-pill': 'var(--color-hinted-grey-7)',
'--color-background-pill-new': 'var(--color-magenta-11)',
'--color-background-pill-subtle': 'var(--color-hinted-grey-10)',
'--color-background-pill-notification': 'var(--color-red)',
'--color-background-range': 'var(--color-opac-gd-3)',
'--color-background-range-fill': 'var(--color-border-brand)',
'--color-background-range-overlay': 'var(--color-opac-w-6)',
'--color-background-range-overlay-fill': 'var(--color-white)',
'--color-background-social-column': 'var(--color-hinted-grey-2)',
'--color-background-top-nav': 'var(--color-twitch-purple-6)',
'--color-background-chat': 'var(--color-twitch-purple-1)',
'--color-background-chat-alt': 'var(--color-twitch-purple-3)',
'--color-background-chat-header': 'var(--color-twitch-purple-2)',
'--color-background-chat-line-mentioning': 'var(--color-hinted-grey-5)',
'--color-background-chat-line-mentioned': 'var(--color-hinted-grey-15)',
'--color-background-modal': 'var(--color-twitch-purple-3)',
'--color-background-modal-mask': 'var(--color-opac-gd-5)',
'--color-background-graph': 'var(--color-twitch-purple-2)',
'--color-background-graph-fill': 'var(--color-twitch-purple-8)',
'--color-background-scrollbar': 'var(--color-opac-w-8)',
'--color-background-hover': 'var(--color-opac-w-3)',
'--color-text-overlay-error': 'var(--color-red-11)',
'--color-text-overlay-warn': 'var(--color-orange-11)',
'--color-text-overlay-success': 'var(--color-green-11)',
'--color-text-overlay-info': 'var(--color-blue-11)',
'--color-text-overlay-brand': 'var(--color-white)',
'--color-text-tab': 'var(--color-text-base)',
'--color-text-tab-active': 'var(--color-twitch-purple-11)',
'--color-text-badge-alt': 'var(--color-black)',
'--color-text-badge-alt-2': 'var(--color-black)',
'--color-text-interactable-selected': 'var(--color-text-overlay)',
'--color-text-interactable-overlay-selected': 'var(--color-black)',
'--color-text-input': 'var(--color-text-base)',
'--color-text-input-placeholder': 'var(--color-opac-w-10)',
'--color-text-input-placeholder-overlay': 'var(--color-opac-w-10)',
'--color-text-input-checked-icon': 'var(--color-white)',
'--color-text-keyboard-prompt': 'var(--color-text-alt-2)',
'--color-text-keyboard-prompt-tooltip': 'var(--color-hinted-grey-7)',
'--color-text-label': 'var(--color-hinted-grey-15)',
'--color-text-label-optional': 'var(--color-hinted-grey-8)',
'--color-text-hint': 'var(--color-hinted-grey-8)',
'--color-text-segmented-button-selected': 'var(--color-black)',
'--color-text-segmented-button-overlay-selected': 'var(--color-black)',
'--color-text-tag': 'var(--color-text-alt-2)',
'--color-text-toggle-checked-icon': 'var(--color-border-brand)',
'--color-text-toggle-checked-icon-overlay': 'var(--color-white)',
'--color-text-tooltip': 'var(--color-hinted-grey-1)',
'--color-text-overlay': 'var(--color-white)',
'--color-text-overlay-alt': 'var(--color-opac-w-13)',
'--color-text-overlay-link': 'var(--color-white)',
'--color-text-overlay-link-hover': 'var(--color-opac-w-12)',
'--color-text-overlay-link-active': 'var(--color-white)',
'--color-text-overlay-link-focus': 'var(--color-opac-w-12)',
'--color-text-overlay-link-visited': 'var(--color-white)',
'--color-text-pill': 'var(--color-black)',
'--color-text-chat-line-mentioning': 'var(--color-white)',
'--color-text-chat-line-mentioned': 'var(--color-hinted-grey-2)',
'--color-text-channel-status-text-indicator-hosting': 'var(--color-black)',
'--color-text-channel-status-text-indicator-rerun': 'var(--color-black)',
'--color-text-channel-status-text-indicator-offline': 'var(--color-black)',
'--color-text-channel-status-text-indicator-hosting-overlay': 'var(--color-black)',
'--color-text-channel-status-text-indicator-rerun-overlay': 'var(--color-black)',
'--color-text-channel-status-text-indicator-offline-overlay': 'var(--color-black)',
'--color-text-ribbon': 'var(--color-white)',
'--color-border-overlay': 'var(--color-opac-w-5)',
'--color-border-overlay-focus': 'var(--color-white)',
'--color-border-alert': 'var(--color-red)',
'--color-border-overlay-error': 'var(--color-red-10)',
'--color-border-overlay-error-hover': 'var(--color-red-11)',
'--color-border-overlay-warn': 'var(--color-orange-12)',
'--color-border-overlay-warn-hover': 'var(--color-orange-13)',
'--color-border-overlay-success': 'var(--color-green-12)',
'--color-border-overlay-success-hover': 'var(--color-green-13)',
'--color-border-overlay-info': 'var(--color-blue-10)',
'--color-border-overlay-brand': 'var(--color-white)',
'--color-border-overlay-error-decorative': 'var(--color-red-10)',
'--color-border-overlay-warn-decorative': 'var(--color-orange-12)',
'--color-border-overlay-success-decorative': 'var(--color-green-12)',
'--color-border-overlay-info-decorative': 'var(--color-blue-10)',
'--color-border-overlay-brand-decorative': 'var(--color-twitch-purple-10)',
'--color-border-balloon-overlay': 'var(--color-opac-w-4)',
'--color-border-tab': 'var(--color-border-base)',
'--color-border-tab-hover': 'var(--color-twitch-purple-11)',
'--color-border-tab-focus': 'var(--color-twitch-purple-11)',
'--color-border-tab-active': 'var(--color-border-brand)',
'--color-border-image-selector': 'var(--color-opac-b-6)',
'--color-border-image-selector-overlay': 'var(--color-opac-w-6)',
'--color-border-image-selector-overlay-selected': 'var(--color-white)',
'--color-border-image-selector-mask': 'var(--color-twitch-purple-7)',
'--color-border-image-selector-mask-overlay': 'var(--color-twitch-purple-7)',
'--color-border-input': 'var(--color-opac-gl-4)',
'--color-border-input-hover': 'var(--color-opac-gl-4)',
'--color-border-input-focus': 'var(--color-border-brand)',
'--color-border-input-error': 'var(--color-border-error)',
'--color-border-input-error-overlay': 'var(--color-border-error)',
'--color-border-input-overlay': 'var(--color-opac-w-10)',
'--color-border-input-overlay-hover': 'var(--color-opac-w-10)',
'--color-border-input-overlay-focus': 'var(--color-white)',
'--color-border-input-checkbox': 'var(--color-opac-gl-5)',
'--color-border-input-checkbox-hover': 'var(--color-white)',
'--color-border-input-checkbox-focus': 'var(--color-border-brand)',
'--color-border-input-checkbox-checked': 'var(--color-border-brand)',
'--color-border-input-checkbox-error': 'var(--color-border-error)',
'--color-border-input-checkbox-overlay': 'var(--color-opac-w-10)',
'--color-border-input-checkbox-overlay-focus': 'var(--color-white)',
'--color-border-input-checkbox-hover-overlay': 'var(--color-white)',
'--color-border-input-checkbox-checked-overlay': 'var(--color-white)',
'--color-border-input-checkbox-checked-overlay-disabled': 'var(--color-opac-w-10)',
'--color-border-keyboard-prompt': 'var(--color-opac-gd-3)',
'--color-border-keyboard-prompt-tooltip': 'var(--color-opac-gl-3)',
'--color-border-range-handle': 'var(--color-border-brand)',
'--color-border-range-handle-focus': 'var(--color-white)',
'--color-border-tag': 'var(--color-opac-gd-1)',
'--color-border-tag-overlay': 'var(--color-opac-w-6)',
'--color-border-toggle': 'var(--color-opac-gl-5)',
'--color-border-toggle-hover': 'var(--color-white)',
'--color-border-toggle-focus': 'var(--color-border-brand)',
'--color-border-toggle-checked': 'var(--color-border-brand)',
'--color-border-toggle-overlay': 'var(--color-opac-w-10)',
'--color-border-toggle-overlay-hover': 'var(--color-white)',
'--color-border-toggle-overlay-focus': 'var(--color-white)',
'--color-border-toggle-overlay-checked': 'var(--color-white)',
'--color-border-whisper-incoming': 'var(--color-twitch-purple-10)',
'--color-border-whisper-outgoing': 'var(--color-hinted-grey-9)',
'--color-border-segmented-button': 'var(--color-opac-gl-4)',
'--color-border-segmented-button-overlay': 'var(--color-opac-w-10)',
'--color-border-selectable': 'var(--color-opac-gd-1)',
'--color-border-selectable-hover': 'var(--color-opac-gd-2)',
'--color-border-selectable-hover-outer': 'var(--color-opac-gl-4)',
'--color-border-selectable-hover-selected': 'var(--color-white)',
'--color-border-selectable-selected-outer': 'var(--color-white)',
'--color-border-selectable-selected-inner': 'var(--color-black)',
'--color-border-selectable-overlay': 'var(--color-opac-w-3)',
'--color-border-selectable-overlay-hover': 'var(--color-opac-w-4)',
'--color-border-selectable-overlay-hover-outer': 'var(--color-opac-w-7)',
'--color-border-selectable-overlay-selected': 'var(--color-white)',
'--color-border-selectable-overlay-selected-inner': 'var(--color-black)',
'--color-border-spinner': 'var(--color-opac-gd-2)',
'--color-border-spinner-fill': 'var(--color-text-base)',
'--color-border-quote': 'var(--color-hinted-grey-9)',
'--color-data-series-a-base': 'var(--color-twitch-purple-12)',
'--color-data-series-a-alt': 'var(--color-twitch-purple-11)',
'--color-data-series-a-alt-2': 'var(--color-twitch-purple-10)',
'--color-data-series-a-alt-3': 'var(--color-twitch-purple-9)',
'--color-data-series-a-alt-4': 'var(--color-twitch-purple-8)',
'--color-data-series-b-base': 'var(--color-magenta-12)',
'--color-data-series-b-alt': 'var(--color-magenta-11)',
'--color-data-series-b-alt-2': 'var(--color-magenta-10)',
'--color-data-series-b-alt-3': 'var(--color-magenta-9)',
'--color-data-series-b-alt-4': 'var(--color-magenta-8)',
'--color-data-series-c-base': 'var(--color-blue-12)',
'--color-data-series-c-alt': 'var(--color-blue-11)',
'--color-data-series-c-alt-2': 'var(--color-blue-10)',
'--color-data-series-c-alt-3': 'var(--color-blue-9)',
'--color-data-series-c-alt-4': 'var(--color-blue-8)',
'--color-data-series-d-base': 'var(--color-cyan-12)',
'--color-data-series-d-alt': 'var(--color-cyan-11)',
'--color-data-series-d-alt-2': 'var(--color-cyan-10)',
'--color-data-series-d-alt-3': 'var(--color-cyan-9)',
'--color-data-series-d-alt-4': 'var(--color-cyan-8)',
'--color-data-series-e-base': 'var(--color-orange-12)',
'--color-data-series-e-alt': 'var(--color-orange-11)',
'--color-data-series-e-alt-2': 'var(--color-orange-10)',
'--color-data-series-e-alt-3': 'var(--color-orange-9)',
'--color-data-series-e-alt-4': 'var(--color-orange-8)',
'--color-data-text-title': 'var(--color-text-base)',
'--color-data-text-subtitle': 'var(--color-text-alt-2)',
'--color-data-background-chart': 'var(--color-background-base)',
'--color-data-axis': 'var(--color-text-alt-2)',
'--color-data-grid': 'var(--color-border-base)',
'--color-data-background-gauge': 'var(--color-background-alt)',
'--color-data-indicator-positive': 'var(--color-cyan-11)',
'--color-data-indicator-negative': 'var(--color-red-11)',
'--color-icon-input-checked': 'var(--color-white)',
'--color-icon-input-radio-checked': 'var(--color-white)',
'--color-fill-base': 'var(--color-text-base)',
'--color-fill-current': 'currentColor',
'--color-fill-alt': 'var(--color-text-alt)',
'--color-fill-alt-2': 'var(--color-text-alt-2)',
'--color-fill-offline': 'var(--color-hinted-grey-9)',
'--color-fill-hosting': 'var(--color-orange-13)',
'--color-fill-live': 'var(--color-red-9)',
'--color-fill-recording': 'var(--color-red-9)',
'--color-fill-alert': 'var(--color-error)',
'--color-fill-error-overlay': 'var(--color-red-10)',
'--color-fill-warn-overlay': 'var(--color-orange-12)',
'--color-fill-success-overlay': 'var(--color-green-13)',
'--color-fill-info-overlay': 'var(--color-blue-10)',
'--color-fill-brand-overlay': 'var(--color-twitch-purple-10)',
'--color-fill-prime': 'var(--color-prime-blue)',
'--color-fill-drops': 'var(--color-green)',
'--color-fill-crate': 'var(--color-green)',
'--color-fill-range-notch': 'var(--color-hinted-grey-7)',
'--color-fill-button-icon': 'var(--color-text-base)',
'--color-fill-button-icon-hover': 'var(--color-text-base)',
'--color-fill-button-icon-focus': 'var(--color-text-base)',
'--color-fill-button-icon-active': 'var(--color-text-base)',
'--color-fill-channel-status-text-indicator-hosting': 'var(--color-opac-w-10)',
'--color-fill-channel-status-text-indicator-rerun': 'var(--color-opac-w-10)',
'--color-fill-channel-status-text-indicator-offline': 'var(--color-white)',
'--color-fill-channel-status-text-indicator-hosting-overlay': 'var(--color-opac-w-10)',
'--color-fill-channel-status-text-indicator-rerun-overlay': 'var(--color-opac-w-10)',
'--color-fill-channel-status-text-indicator-offline-overlay': 'var(--color-white)',
'--color-fill-new-item-indicator': 'var(--color-magenta-11)',
'--color-fill-presence-offline': 'var(--color-hinted-grey-9)',
'--color-fill-presence-invisible': 'var(--color-hinted-grey-9)',
'--color-fill-presence-online': 'var(--color-green-13)',
'--color-fill-presence-away': 'var(--color-orange-12)',
'--color-fill-presence-busy': 'var(--color-red-10)',
'--color-fill-presence-idle': 'var(--color-orange-12)',
'--color-fill-ribbon': 'var(--color-red-9)',
'--color-social-twitter': 'var(--color-twitter)',
'--color-social-facebook': 'var(--color-facebook)',
'--color-social-facebook-legacy': 'var(--color-facebook-legacy)',
'--color-social-reddit': 'var(--color-reddit)',
'--color-social-snapchat': 'var(--color-snapchat)',
'--color-social-instagram': 'var(--color-instagram)',
'--color-social-youtube': 'var(--color-youtube)',
'--color-social-paypal': 'var(--color-paypal)',
'--color-social-vk': 'var(--color-vk)',
'--shadow-elevation-umbra': '0.34',
'--shadow-elevation-penumbra': '0.26',
'--shadow-elevation-ambient': '0.28',
'--shadow-elevation-1': '0 1px 2px var(--color-opac-b-14),0 0px 2px var(--color-opac-b-14)',
'--shadow-elevation-2': '0 4px 8px var(--color-opac-b-7),0 0px 4px var(--color-opac-b-7)',
'--shadow-elevation-3': '0 6px 16px var(--color-opac-b-8),0 0px 4px var(--color-opac-b-7)',
'--shadow-elevation-4': '0 12px 32px var(--color-opac-b-8),0 0px 8px var(--color-opac-b-7)',
'--shadow-elevation-5': '0 32px 64px var(--color-opac-b-9),0 0px 16px var(--color-opac-b-7)',
'--shadow-button-focus': '0 0 6px 0 var(--color-twitch-purple-8)',
'--shadow-button-active': '0 0 6px 0 var(--color-twitch-purple-8)',
'--shadow-button-disabled': 'none',
'--shadow-button-overlay-focus': '0 0 6px 0 var(--color-opac-w-6)',
'--shadow-button-overlay-active': '0 0 6px 0 var(--color-opac-w-6)',
'--shadow-tab-focus': '0 4px 6px -4px var(--color-twitch-purple-11)',
'--shadow-balloon': '0 1px 1px var(--color-opac-b-5)',
'--shadow-scrollbar': '0 0 1px 1px var(--color-opac-w-5)',
'--opacity-pulse-animation': '0.7'
},
light: {
'--color-background-body': 'var(--color-hinted-grey-15)',
'--color-background-base': 'var(--color-white)',
'--color-background-alt': 'var(--color-hinted-grey-14)',
'--color-background-alt-2': 'var(--color-hinted-grey-13)',
'--color-background-float': 'var(--color-white)',
'--color-background-accent': 'var(--color-twitch-purple-7)',
'--color-background-accent-alt': 'var(--color-twitch-purple-6)',
'--color-background-accent-alt-2': 'var(--color-twitch-purple-5)',
'--color-background-placeholder': 'var(--color-opac-gl-1)',
'--color-background-live': 'var(--color-red)',
'--color-background-prime': 'var(--color-prime-blue)',
'--color-border-base': 'var(--color-opac-gl-2)',
'--color-border-region': 'var(--color-hinted-grey-12)',
'--color-text-base': 'var(--color-hinted-grey-1)',
'--color-text-alt': 'var(--color-hinted-grey-3)',
'--color-text-alt-2': 'var(--color-hinted-grey-7)',
'--color-text-link': 'var(--color-twitch-purple-7)',
'--color-text-link-hover': 'var(--color-twitch-purple-8)',
'--color-text-link-active': 'var(--color-twitch-purple-7)',
'--color-text-link-focus': 'var(--color-twitch-purple-8)',
'--color-text-link-visited': 'var(--color-twitch-purple-7)',
'--color-text-live': 'var(--color-text-accessible-red)',
'--color-text-alert': 'var(--color-text-accessible-red)',
'--color-text-prime': 'var(--color-prime-blue)',
'--color-text-error': 'var(--color-red-7)',
'--color-text-warn': 'var(--color-orange-7)',
'--color-text-success': 'var(--color-green-7)',
'--color-text-info': 'var(--color-blue-7)',
'--color-text-brand': 'var(--color-twitch-purple-7)',
'--color-text-accessible-red': 'var(--color-red-7)',
'--color-text-accessible-green': 'var(--color-green-7)',
'--color-text-accessible-blue': 'var(--color-blue-7)',
'--color-background-button-primary-default': 'var(--color-background-button-brand)',
'--color-background-button-primary-hover': 'var(--color-background-button-brand-hover)',
'--color-background-button-primary-active': 'var(--color-background-button-brand-active)',
'--color-background-button-secondary-default': 'var(--color-opac-gl-1)',
'--color-background-button-secondary-hover': 'var(--color-opac-gl-2)',
'--color-background-button-secondary-active': 'var(--color-opac-gl-3)',
'--color-background-button-text-default': 'var(--color-transparent)',
'--color-background-button-text-hover': 'var(--color-background-interactable-hover)',
'--color-background-button-text-active': 'var(--color-background-interactable-active)',
'--color-background-button-destructive-default': 'var(--color-background-button-error)',
'--color-background-button-destructive-hover': 'var(--color-background-button-error-hover)',
'--color-background-button-destructive-active': 'var(--color-background-button-error-active)',
'--color-background-button-error': 'var(--color-red-10)',
'--color-background-button-error-hover': 'var(--color-red-12)',
'--color-background-button-error-active': 'var(--color-red-14)',
'--color-background-button-warn': 'var(--color-orange-12)',
'--color-background-button-warn-hover': 'var(--color-orange-14)',
'--color-background-button-warn-active': 'var(--color-orange-15)',
'--color-background-button-success': 'var(--color-green-12)',
'--color-background-button-success-hover': 'var(--color-green-14)',
'--color-background-button-success-active': 'var(--color-green-15)',
'--color-background-button-info': 'var(--color-blue-11)',
'--color-background-button-info-hover': 'var(--color-blue-13)',
'--color-background-button-info-active': 'var(--color-blue-15)',
'--color-background-button-brand': 'var(--color-twitch-purple-9)',
'--color-background-button-brand-hover': 'var(--color-twitch-purple-8)',
'--color-background-button-brand-active': 'var(--color-twitch-purple-7)',
'--color-background-button-overlay-primary-default': 'var(--color-white)',
'--color-background-button-overlay-primary-hover': 'var(--color-opac-w-14)',
'--color-background-button-overlay-primary-active': 'var(--color-opac-w-13)',
'--color-background-button-overlay-secondary-default': 'var(--color-opac-w-3)',
'--color-background-button-overlay-secondary-hover': 'var(--color-background-interactable-overlay-hover)',
'--color-background-button-overlay-secondary-active': 'var(--color-background-interactable-overlay-active)',
'--color-background-button-overlay-text-default': 'var(--color-transparent)',
'--color-background-button-overlay-text-hover': 'var(--color-background-interactable-overlay-hover)',
'--color-background-button-overlay-text-active': 'var(--color-background-interactable-overlay-active)',
'--color-background-button-overlay-error': 'var(--color-background-button-error)',
'--color-background-button-overlay-error-hover': 'var(--color-background-button-error-hover)',
'--color-background-button-overlay-error-active': 'var(--color-background-button-error-active)',
'--color-background-button-overlay-warn': 'var(--color-background-button-warn)',
'--color-background-button-overlay-warn-hover': 'var(--color-background-button-warn-hover)',
'--color-background-button-overlay-warn-active': 'var(--color-background-button-warn-active)',
'--color-background-button-overlay-success': 'var(--color-background-button-success)',
'--color-background-button-overlay-success-hover': 'var(--color-background-button-success-hover)',
'--color-background-button-overlay-success-active': 'var(--color-background-button-success-active)',
'--color-background-button-overlay-info': 'var(--color-background-button-info)',
'--color-background-button-overlay-info-hover': 'var(--color-background-button-info-hover)',
'--color-background-button-overlay-info-active': 'var(--color-background-button-info-active)',
'--color-background-button-overlay-brand': 'var(--color-white)',
'--color-background-button-overlay-brand-hover': 'var(--color-opac-w-14)',
'--color-background-button-overlay-brand-active': 'var(--color-opac-w-13)',
'--color-background-button-disabled': 'var(--color-opac-gl-1)',
'--color-background-button-overlay-disabled': 'var(--color-opac-w-2)',
'--color-text-button-primary': 'var(--color-white)',
'--color-text-button-secondary': 'var(--color-text-base)',
'--color-text-button-text': 'var(--color-text-brand)',
'--color-text-button-text-hover': 'var(--color-text-base)',
'--color-text-button-destructive': 'var(--color-text-button-error)',
'--color-text-button-error': 'var(--color-black)',
'--color-text-button-warn': 'var(--color-black)',
'--color-text-button-success': 'var(--color-black)',
'--color-text-button-info': 'var(--color-black)',
'--color-text-button-brand': 'var(--color-white)',
'--color-text-button-overlay-primary': 'var(--color-black)',
'--color-text-button-overlay-secondary': 'var(--color-text-overlay)',
'--color-text-button-overlay-text': 'var(--color-white)',
'--color-text-button-overlay-error': 'var(--color-black)',
'--color-text-button-overlay-warn': 'var(--color-black)',
'--color-text-button-overlay-success': 'var(--color-black)',
'--color-text-button-overlay-info': 'var(--color-black)',
'--color-text-button-overlay-brand': 'var(--color-black)',
'--color-text-button-disabled': 'var(--color-hinted-grey-8)',
'--color-background-button': 'var(--color-twitch-purple-7)',
'--color-background-button-hover': 'var(--color-twitch-purple-8)',
'--color-background-button-focus': 'var(--color-twitch-purple-8)',
'--color-background-button-active': 'var(--color-twitch-purple-7)',
'--color-background-button-purchase': 'var(--color-opac-b-5)',
'--color-background-button-status': 'var(--color-background-button-success)',
'--color-background-button-status-hover': 'var(--color-background-button-error-hover)',
'--color-background-button-status-focus': 'var(--color-background-button-error-hover)',
'--color-background-button-status-active': 'var(--color-background-button-error-active)',
'--color-background-button-success-focus': 'var(--color-green-darker)',
'--color-background-button-alert': 'var(--color-red)',
'--color-background-button-alert-hover': 'var(--color-red-darker)',
'--color-background-button-alert-focus': 'var(--color-red-darker)',
'--color-background-button-alert-active': 'var(--color-red)',
'--color-background-button-overlay': 'var(--color-transparent)',
'--color-background-button-overlay-hover': 'var(--color-opac-w-1)',
'--color-background-button-overlay-focus': 'var(--color-opac-w-1)',
'--color-background-button-overlay-active': 'var(--color-opac-w-2)',
'--color-background-interactable-alpha-hover': 'var(--color-opac-b-1)',
'--color-background-interactable-alpha-active': 'var(--color-opac-b-2)',
'--color-background-interactable-alpha-selected': 'var(--color-opac-b-1)',
'--color-text-button': 'var(--color-white)',
'--color-text-button-hover': 'var(--color-white)',
'--color-text-button-focus': 'var(--color-white)',
'--color-text-button-active': 'var(--color-white)',
'--color-text-button-secondary-hover': 'var(--color-hinted-grey-9)',
'--color-text-button-secondary-focus': 'var(--color-hinted-grey-9)',
'--color-text-button-secondary-active': 'var(--color-hinted-grey-9)',
'--color-text-button-text-focus': 'var(--color-opac-p-1)',
'--color-text-button-text-active': 'var(--color-transparent)',
'--color-text-button-status': 'var(--color-white)',
'--color-text-button-status-hover': 'var(--color-white)',
'--color-text-button-status-focus': 'var(--color-white)',
'--color-text-button-status-active': 'var(--color-white)',
'--color-text-button-success-hover': 'var(--color-black)',
'--color-text-button-success-focus': 'var(--color-black)',
'--color-text-button-success-active': 'var(--color-black)',
'--color-text-button-alert': 'var(--color-black)',
'--color-text-button-alert-hover': 'var(--color-black)',
'--color-text-button-alert-focus': 'var(--color-black)',
'--color-text-button-alert-active': 'var(--color-black)',
'--color-text-button-overlay': 'var(--color-white)',
'--color-text-button-overlay-hover': 'var(--color-white)',
'--color-text-button-overlay-focus': 'var(--color-white)',
'--color-text-button-overlay-active': 'var(--color-white)',
'--color-text-interactable': 'currentColor',
'--color-text-interactable-hover': 'var(--color-white)',
'--color-text-interactable-active': 'var(--color-white)',
'--color-text-interactable-inverted': 'var(--color-white)',
'--color-text-input-focus': 'transparent',
'--color-border-button': 'var(--color-twitch-purple-7)',
'--color-border-button-hover': 'var(--color-twitch-purple-8)',
'--color-border-button-focus': 'var(--color-twitch-purple-9)',
'--color-border-button-active': 'var(--color-twitch-purple-8)',
'--color-border-button-disabled': 'var(--color-opac-b-1)',
'--color-border-button-status': 'var(--color-green)',
'--color-border-button-status-hover': 'var(--color-red-darker)',
'--color-border-button-status-focus': 'var(--color-red-darker)',
'--color-border-button-status-active': 'var(--color-red)',
'--color-border-button-success': 'var(--color-green)',
'--color-border-button-success-hover': 'var(--color-green)',
'--color-border-button-success-focus': 'var(--color-green)',
'--color-border-button-success-active': 'var(--color-green)',
'--color-border-button-alert': 'var(--color-red)',
'--color-border-button-alert-hover': 'var(--color-red-darker)',
'--color-border-button-alert-focus': 'var(--color-red-darker)',
'--color-border-button-alert-active': 'var(--color-red)',
'--color-border-button-overlay': 'var(--color-transparent)',
'--color-border-button-overlay-hover': 'var(--color-transparent)',
'--color-border-button-overlay-focus': 'var(--color-opac-w-6)',
'--color-border-button-overlay-active': 'var(--color-opac-w-9)',
'--color-border-button-overlay-bordered': 'var(--color-white)',
'--color-border-interactable-selected': 'var(--color-twitch-purple-9)',
'--shadow-input': 'inset 0 0 0 1px var(--color-hinted-grey-12)',
'--shadow-input-error': '0 0 8px -2px var(--color-border-error)',
'--shadow-input-focus': '0 0 10px -2px var(--color-border-brand)',
'--shadow-input-error-focus': '0 0 6px -3px var(--color-border-error)',
'--shadow-interactable-focus': '0 0 6px 1px var(--color-twitch-purple-8)',
'--color-background-error': 'var(--color-red-11)',
'--color-background-warn': 'var(--color-orange-13)',
'--color-background-success': 'var(--color-green-13)',
'--color-background-info': 'var(--color-blue-12)',
'--color-background-brand': 'var(--color-twitch-purple-11)',
'--color-border-error': 'var(--color-red-8)',
'--color-border-error-hover': 'var(--color-red-6)',
'--color-border-warn': 'var(--color-orange-8)',
'--color-border-warn-hover': 'var(--color-orange-6)',
'--color-border-success': 'var(--color-green-8)',
'--color-border-success-hover': 'var(--color-green-6)',
'--color-border-info': 'var(--color-blue-8)',
'--color-border-brand': 'var(--color-twitch-purple-8)',
'--color-border-error-decorative': 'var(--color-red-10)',
'--color-border-warn-decorative': 'var(--color-orange-12)',
'--color-border-success-decorative': 'var(--color-green-12)',
'--color-border-info-decorative': 'var(--color-blue-10)',
'--color-border-brand-decorative': 'var(--color-twitch-purple-9)',
'--color-fill-error': 'var(--color-red-9)',
'--color-fill-warn': 'var(--color-orange-9)',
'--color-fill-success': 'var(--color-green-9)',
'--color-fill-info': 'var(--color-blue-9)',
'--color-fill-brand': 'var(--color-twitch-purple-9)',
'--font-size-1': '5.4rem',
'--font-size-2': '3.6rem',
'--font-size-3': '2.4rem',
'--font-size-4': '1.8rem',
'--font-size-5': '1.4rem',
'--font-size-6': '1.3rem',
'--font-size-7': '1.2rem',
'--font-size-8': '1.2rem',
'--font-size-base': 'var(--font-size-6)',
'--color-background-overlay-placeholder': 'var(--color-opac-w-3)',
'--color-background-overlay-error': 'var(--color-red-11)',
'--color-background-overlay-warn': 'var(--color-orange-13)',
'--color-background-overlay-success': 'var(--color-green-13)',
'--color-background-overlay-info': 'var(--color-blue-12)',
'--color-background-overlay-brand': 'var(--color-twitch-purple-11)',
'--color-background-interactable-hover': 'var(--color-opac-gl-2)',
'--color-background-interactable-active': 'var(--color-opac-gl-3)',
'--color-background-interactable-selected': 'var(--color-background-button-brand)',
'--color-background-interactable-overlay-hover': 'var(--color-opac-w-3)',
'--color-background-interactable-overlay-active': 'var(--color-opac-w-4)',
'--color-background-interactable-overlay-selected': 'var(--color-white)',
'--color-background-interactable-destructive-hover': 'var(--color-red-darker)',
'--color-background-interactable-destructive-active': 'var(--color-red)',
'--color-background-button-icon-overlay-default': 'var(--color-transparent)',
'--color-background-button-icon-overlay-hover': 'var(--color-background-interactable-overlay-hover)',
'--color-background-button-icon-overlay-active': 'var(--color-background-interactable-overlay-active)',
'--color-background-image-selector-overlay': 'var(--color-transparent)',
'--color-background-input': 'var(--color-background-base)',
'--color-background-input-focus': 'var(--color-background-base)',
'--color-background-input-checked': 'var(--color-twitch-purple-8)',
'--color-background-input-overlay': 'var(--color-opac-b-6)',
'--color-background-input-overlay-focus': 'var(--color-opac-b-6)',
'--color-background-input-checkbox-checked': 'var(--color-border-brand)',
'--color-background-input-checkbox-checked-background': 'var(--color-white)',
'--color-background-input-checkbox-checked-background-overlay': 'var(--color-black)',
'--color-background-input-checkbox-checked-overlay': 'var(--color-white)',
'--color-background-input-checkbox-checked-overlay-disabled': 'var(--color-opac-w-10)',
'--color-background-keyboard-prompt': 'var(--color-opac-gl-1)',
'--color-background-keyboard-prompt-tooltip': 'var(--color-opac-gd-1)',
'--color-background-segmented-bar': 'var(--color-opac-gl-3)',
'--color-background-segmented-bar-overlay': 'var(--color-opac-w-4)',
'--color-background-segmented-bar-fill-overlay': 'var(--color-white)',
'--color-background-segmented-button-overlay': 'var(--color-opac-w-2)',
'--color-background-segmented-button-option-selected': 'var(--color-black)',
'--color-background-segmented-button-overlay-option-selected': 'var(--color-white)',
'--color-background-selectable': 'var(--color-opac-gl-1)',
'--color-background-selectable-hover': 'var(--color-opac-gl-2)',
'--color-background-selectable-overlay': 'var(--color-opac-w-3)',
'--color-background-selectable-overlay-hover': 'var(--color-opac-w-4)',
'--color-background-table-selected': 'var(--color-twitch-purple-14)',
'--color-background-tag-default': 'var(--color-opac-gl-1)',
'--color-background-tag-hover': 'var(--color-background-interactable-hover)',
'--color-background-tag-active': 'var(--color-background-interactable-active)',
'--color-background-toggle': 'var(--color-transparent)',
'--color-background-toggle-handle': 'var(--color-black)',
'--color-background-toggle-handle-checked': 'var(--color-twitch-purple-8)',
'--color-background-toggle-handle-checked-disabled': 'var(--color-border-toggle)',
'--color-background-toggle-handle-overlay': 'var(--color-white)',
'--color-background-toggle-hover': 'var(--color-opac-b-9)',
'--color-background-toggle-focus': 'var(--color-opac-b-7)',
'--color-background-toggle-checked': 'var(--color-white)',
'--color-background-toggle-overlay': 'var(--color-opac-b-4)',
'--color-background-toggle-overlay-checked': 'var(--color-black)',
'--color-background-tooltip': 'var(--color-hinted-grey-3)',
'--color-background-overlay-base': 'var(--color-opac-b-13)',
'--color-background-overlay-alt': 'var(--color-opac-b-9)',
'--color-background-progress': 'var(--color-opac-gl-3)',
'--color-background-progress-status': 'var(--color-border-brand)',
'--color-background-progress-status-error': 'var(--color-border-error)',
'--color-background-progress-status-caution': 'var(--color-border-warn)',
'--color-background-progress-status-success': 'var(--color-border-success)',
'--color-background-progress-overlay-status': 'var(--color-border-overlay-brand)',
'--color-background-progress-overlay-mask': 'var(--color-opac-w-4)',
'--color-background-progress-countdown': 'none',
'--color-background-progress-countdown-status': 'var(--color-twitch-purple-8)',
'--color-background-pill': 'var(--color-hinted-grey-7)',
'--color-background-pill-new': 'var(--color-magenta-11)',
'--color-background-pill-subtle': 'var(--color-hinted-grey-10)',
'--color-background-pill-notification': 'var(--color-red)',
'--color-background-range': 'var(--color-opac-gl-3)',
'--color-background-range-fill': 'var(--color-border-brand)',
'--color-background-range-overlay': 'var(--color-opac-w-6)',
'--color-background-range-overlay-fill': 'var(--color-white)',
'--color-background-social-column': 'var(--color-hinted-grey-15)',
'--color-background-top-nav': 'var(--color-twitch-purple-7)',
'--color-background-chat': 'var(--color-hinted-grey-15)',
'--color-background-chat-alt': 'var(--color-hinted-grey-14)',
'--color-background-chat-header': 'var(--color-hinted-grey-15)',
'--color-background-chat-line-mentioning': 'var(--color-hinted-grey-12)',
'--color-background-chat-line-mentioned': 'var(--color-hinted-grey-1)',
'--color-background-modal': 'var(--color-white)',
'--color-background-modal-mask': 'var(--color-opac-gl-5)',
'--color-background-graph': 'var(--color-twitch-purple-15)',
'--color-background-graph-fill': 'var(--color-twitch-purple-9)',
'--color-background-scrollbar': 'var(--color-opac-b-7)',
'--color-background-hover': 'var(--color-opac-b-1)',
'--color-text-overlay-error': 'var(--color-red-11)',
'--color-text-overlay-warn': 'var(--color-orange-11)',
'--color-text-overlay-success': 'var(--color-green-11)',
'--color-text-overlay-info': 'var(--color-blue-11)',
'--color-text-overlay-brand': 'var(--color-white)',
'--color-text-tab': 'var(--color-text-base)',
'--color-text-tab-active': 'var(--color-twitch-purple-8)',
'--color-text-badge-alt': 'var(--color-white)',
'--color-text-badge-alt-2': 'var(--color-white)',
'--color-text-interactable-selected': 'var(--color-text-overlay)',
'--color-text-interactable-overlay-selected': 'var(--color-text-base)',
'--color-text-input': 'var(--color-text-base)',
'--color-text-input-placeholder': 'var(--color-opac-b-10)',
'--color-text-input-placeholder-overlay': 'var(--color-opac-w-10)',
'--color-text-input-checked-icon': 'var(--color-white)',
'--color-text-keyboard-prompt': 'var(--color-text-alt-2)',
'--color-text-keyboard-prompt-tooltip': 'var(--color-hinted-grey-9)',
'--color-text-label': 'var(--color-hinted-grey-2)',
'--color-text-label-optional': 'var(--color-hinted-grey-7)',
'--color-text-hint': 'var(--color-hinted-grey-7)',
'--color-text-segmented-button-selected': 'var(--color-white)',
'--color-text-segmented-button-overlay-selected': 'var(--color-black)',
'--color-text-tag': 'var(--color-text-alt-2)',
'--color-text-toggle-checked-icon': 'var(--color-border-brand)',
'--color-text-toggle-checked-icon-overlay': 'var(--color-white)',
'--color-text-tooltip': 'var(--color-hinted-grey-14)',
'--color-text-overlay': 'var(--color-white)',
'--color-text-overlay-alt': 'var(--color-opac-w-13)',
'--color-text-overlay-link': 'var(--color-white)',
'--color-text-overlay-link-hover': 'var(--color-opac-w-12)',
'--color-text-overlay-link-active': 'var(--color-white)',
'--color-text-overlay-link-focus': 'var(--color-opac-w-12)',
'--color-text-overlay-link-visited': 'var(--color-white)',
'--color-text-pill': 'var(--color-black)',
'--color-text-chat-line-mentioning': 'var(--color-hinted-grey-2)',
'--color-text-chat-line-mentioned': 'var(--color-white)',
'--color-text-channel-status-text-indicator-hosting': 'var(--color-white)',
'--color-text-channel-status-text-indicator-rerun': 'var(--color-white)',
'--color-text-channel-status-text-indicator-offline': 'var(--color-white)',
'--color-text-channel-status-text-indicator-hosting-overlay': 'var(--color-black)',
'--color-text-channel-status-text-indicator-rerun-overlay': 'var(--color-black)',
'--color-text-channel-status-text-indicator-offline-overlay': 'var(--color-black)',
'--color-text-ribbon': 'var(--color-white)',
'--color-border-overlay': 'var(--color-opac-w-5)',
'--color-border-overlay-focus': 'var(--color-white)',
'--color-border-alert': 'var(--color-red)',
'--color-border-overlay-error': 'var(--color-red-10)',
'--color-border-overlay-error-hover': 'var(--color-red-11)',
'--color-border-overlay-warn': 'var(--color-orange-12)',
'--color-border-overlay-warn-hover': 'var(--color-orange-13)',
'--color-border-overlay-success': 'var(--color-green-12)',
'--color-border-overlay-success-hover': 'var(--color-green-13)',
'--color-border-overlay-info': 'var(--color-blue-10)',
'--color-border-overlay-brand': 'var(--color-white)',
'--color-border-overlay-error-decorative': 'var(--color-red-10)',
'--color-border-overlay-warn-decorative': 'var(--color-orange-12)',
'--color-border-overlay-success-decorative': 'var(--color-green-12)',
'--color-border-overlay-info-decorative': 'var(--color-blue-10)',
'--color-border-overlay-brand-decorative': 'var(--color-twitch-purple-10)',
'--color-border-balloon-overlay': 'var(--color-opac-w-4)',
'--color-border-tab': 'var(--color-border-base)',
'--color-border-tab-hover': 'var(--color-twitch-purple-9)',
'--color-border-tab-focus': 'var(--color-twitch-purple-9)',
'--color-border-tab-active': 'var(--color-border-brand)',
'--color-border-image-selector': 'var(--color-opac-b-6)',
'--color-border-image-selector-overlay': 'var(--color-opac-w-6)',
'--color-border-image-selector-overlay-selected': 'var(--color-white)',
'--color-border-image-selector-mask': 'var(--color-twitch-purple-13)',
'--color-border-image-selector-mask-overlay': 'var(--color-twitch-purple-7)',
'--color-border-input': 'var(--color-opac-gd-4)',
'--color-border-input-hover': 'var(--color-opac-gd-4)',
'--color-border-input-focus': 'var(--color-border-brand)',
'--color-border-input-error': 'var(--color-border-error)',
'--color-border-input-error-overlay': 'var(--color-red-10)',
'--color-border-input-overlay': 'var(--color-opac-w-10)',
'--color-border-input-overlay-hover': 'var(--color-opac-w-10)',
'--color-border-input-overlay-focus': 'var(--color-white)',
'--color-border-input-checkbox': 'var(--color-opac-gd-5)',
'--color-border-input-checkbox-hover': 'var(--color-black)',
'--color-border-input-checkbox-focus': 'var(--color-border-brand)',
'--color-border-input-checkbox-checked': 'var(--color-border-brand)',
'--color-border-input-checkbox-error': 'var(--color-border-error)',
'--color-border-input-checkbox-overlay': 'var(--color-opac-w-10)',
'--color-border-input-checkbox-overlay-focus': 'var(--color-white)',
'--color-border-input-checkbox-hover-overlay': 'var(--color-white)',
'--color-border-input-checkbox-checked-overlay': 'var(--color-white)',
'--color-border-input-checkbox-checked-overlay-disabled': 'var(--color-opac-w-10)',
'--color-border-keyboard-prompt': 'var(--color-opac-gl-3)',
'--color-border-keyboard-prompt-tooltip': 'var(--color-opac-gd-3)',
'--color-border-range-handle': 'var(--color-border-brand)',
'--color-border-range-handle-focus': 'var(--color-black)',
'--color-border-tag': 'var(--color-opac-gl-1)',
'--color-border-tag-overlay': 'var(--color-opac-w-6)',
'--color-border-toggle': 'var(--color-opac-gd-5)',
'--color-border-toggle-hover': 'var(--color-black)',
'--color-border-toggle-focus': 'var(--color-border-brand)',
'--color-border-toggle-checked': 'var(--color-border-brand)',
'--color-border-toggle-overlay': 'var(--color-opac-w-10)',
'--color-border-toggle-overlay-hover': 'var(--color-white)',
'--color-border-toggle-overlay-focus': 'var(--color-white)',
'--color-border-toggle-overlay-checked': 'var(--color-white)',
'--color-border-whisper-incoming': 'var(--color-twitch-purple-10)',
'--color-border-whisper-outgoing': 'var(--color-hinted-grey-9)',
'--color-border-segmented-button': 'var(--color-opac-gd-4)',
'--color-border-segmented-button-overlay': 'var(--color-opac-w-10)',
'--color-border-selectable': 'var(--color-opac-gl-1)',
'--color-border-selectable-hover': 'var(--color-opac-gl-2)',
'--color-border-selectable-hover-outer': 'var(--color-opac-gd-4)',
'--color-border-selectable-hover-selected': 'var(--color-black)',
'--color-border-selectable-selected-outer': 'var(--color-black)',
'--color-border-selectable-selected-inner': 'var(--color-white)',
'--color-border-selectable-overlay': 'var(--color-opac-w-3)',
'--color-border-selectable-overlay-hover': 'var(--color-opac-w-4)',
'--color-border-selectable-overlay-hover-outer': 'var(--color-opac-w-7)',
'--color-border-selectable-overlay-selected': 'var(--color-white)',
'--color-border-selectable-overlay-selected-inner': 'var(--color-black)',
'--color-border-spinner': 'var(--color-opac-gl-2)',
'--color-border-spinner-fill': 'var(--color-text-base)',
'--color-border-quote': 'var(--color-hinted-grey-7)',
'--color-data-series-a-base': 'var(--color-twitch-purple-9)',
'--color-data-series-a-alt': 'var(--color-twitch-purple-8)',
'--color-data-series-a-alt-2': 'var(--color-twitch-purple-7)',
'--color-data-series-a-alt-3': 'var(--color-twitch-purple-6)',
'--color-data-series-a-alt-4': 'var(--color-twitch-purple-5)',
'--color-data-series-b-base': 'var(--color-magenta-9)',
'--color-data-series-b-alt': 'var(--color-magenta-8)',
'--color-data-series-b-alt-2': 'var(--color-magenta-7)',
'--color-data-series-b-alt-3': 'var(--color-magenta-6)',
'--color-data-series-b-alt-4': 'var(--color-magenta-5)',
'--color-data-series-c-base': 'var(--color-blue-9)',
'--color-data-series-c-alt': 'var(--color-blue-8)',
'--color-data-series-c-alt-2': 'var(--color-blue-7)',
'--color-data-series-c-alt-3': 'var(--color-blue-6)',
'--color-data-series-c-alt-4': 'var(--color-blue-5)',
'--color-data-series-d-base': 'var(--color-cyan-9)',
'--color-data-series-d-alt': 'var(--color-cyan-8)',
'--color-data-series-d-alt-2': 'var(--color-cyan-7)',
'--color-data-series-d-alt-3': 'var(--color-cyan-6)',
'--color-data-series-d-alt-4': 'var(--color-cyan-5)',
'--color-data-series-e-base': 'var(--color-orange-10)',
'--color-data-series-e-alt': 'var(--color-orange-9)',
'--color-data-series-e-alt-2': 'var(--color-orange-8)',
'--color-data-series-e-alt-3': 'var(--color-orange-7)',
'--color-data-series-e-alt-4': 'var(--color-orange-6)',
'--color-data-text-title': 'var(--color-text-base)',
'--color-data-text-subtitle': 'var(--color-text-alt-2)',
'--color-data-background-chart': 'var(--color-background-base)',
'--color-data-axis': 'var(--color-text-alt-2)',
'--color-data-grid': 'var(--color-border-base)',
'--color-data-background-gauge': 'var(--color-background-alt)',
'--color-data-indicator-positive': 'var(--color-cyan-7)',
'--color-data-indicator-negative': 'var(--color-red-7)',
'--color-icon-input-checked': 'var(--color-white)',
'--color-icon-input-radio-checked': 'var(--color-white)',
'--color-fill-base': 'var(--color-text-base)',
'--color-fill-current': 'currentColor',
'--color-fill-alt': 'var(--color-text-alt)',
'--color-fill-alt-2': 'var(--color-text-alt-2)',
'--color-fill-offline': 'var(--color-hinted-grey-7)',
'--color-fill-hosting': 'var(--color-orange-9)',
'--color-fill-live': 'var(--color-red-9)',
'--color-fill-recording': 'var(--color-red-9)',
'--color-fill-alert': 'var(--color-error)',
'--color-fill-error-overlay': 'var(--color-red-10)',
'--color-fill-warn-overlay': 'var(--color-orange-12)',
'--color-fill-success-overlay': 'var(--color-green-13)',
'--color-fill-info-overlay': 'var(--color-blue-10)',
'--color-fill-brand-overlay': 'var(--color-twitch-purple-10)',
'--color-fill-prime': 'var(--color-prime-blue)',
'--color-fill-drops': 'var(--color-green)',
'--color-fill-crate': 'var(--color-green)',
'--color-fill-range-notch': 'var(--color-hinted-grey-9)',
'--color-fill-button-icon': 'var(--color-text-base)',
'--color-fill-button-icon-hover': 'var(--color-text-base)',
'--color-fill-button-icon-focus': 'var(--color-text-base)',
'--color-fill-button-icon-active': 'var(--color-text-base)',
'--color-fill-channel-status-text-indicator-hosting': 'var(--color-opac-b-10)',
'--color-fill-channel-status-text-indicator-rerun': 'var(--color-opac-b-10)',
'--color-fill-channel-status-text-indicator-offline': 'var(--color-black)',
'--color-fill-channel-status-text-indicator-hosting-overlay': 'var(--color-opac-w-10)',
'--color-fill-channel-status-text-indicator-rerun-overlay': 'var(--color-opac-w-10)',
'--color-fill-channel-status-text-indicator-offline-overlay': 'var(--color-white)',
'--color-fill-new-item-indicator': 'var(--color-magenta-9)',
'--color-fill-presence-offline': 'var(--color-hinted-grey-7)',
'--color-fill-presence-invisible': 'var(--color-hinted-grey-7)',
'--color-fill-presence-online': 'var(--color-green-9)',
'--color-fill-presence-away': 'var(--color-orange-9)',
'--color-fill-presence-busy': 'var(--color-red-9)',
'--color-fill-presence-idle': 'var(--color-orange-9)',
'--color-fill-ribbon': 'var(--color-red-9)',
'--color-social-twitter': 'var(--color-twitter)',
'--color-social-facebook': 'var(--color-facebook)',
'--color-social-facebook-legacy': 'var(--color-facebook-legacy)',
'--color-social-reddit': 'var(--color-reddit)',
'--color-social-snapchat': 'var(--color-snapchat)',
'--color-social-instagram': 'var(--color-instagram)',
'--color-social-youtube': 'var(--color-youtube)',
'--color-social-paypal': 'var(--color-paypal)',
'--color-social-vk': 'var(--color-vk)',
'--shadow-elevation-umbra': '0.1',
'--shadow-elevation-penumbra': '0.02',
'--shadow-elevation-ambient': '0.04',
'--shadow-elevation-1': '0 1px 2px var(--color-opac-b-3),0 0px 2px var(--color-opac-b-2)',
'--shadow-elevation-2': '0 4px 8px var(--color-opac-b-4),0 0px 4px var(--color-opac-b-1)',
'--shadow-elevation-3': '0 6px 16px var(--color-opac-b-4),0 0px 4px var(--color-opac-b-1)',
'--shadow-elevation-4': '0 12px 32px var(--color-opac-b-4),0 0px 8px var(--color-opac-b-1)',
'--shadow-elevation-5': '0 32px 64px var(--color-opac-b-4),0 0px 16px var(--color-opac-b-1)',
'--shadow-button-focus': '0 0 6px 0 var(--color-twitch-purple-8)',
'--shadow-button-active': '0 0 6px 0 var(--color-twitch-purple-8)',
'--shadow-button-disabled': 'none',
'--shadow-button-overlay-focus': '0 0 6px 0 var(--color-opac-w-6)',
'--shadow-button-overlay-active': '0 0 6px 0 var(--color-opac-w-6)',
'--shadow-tab-focus': '0 4px 6px -4px var(--color-twitch-purple-8)',
'--shadow-balloon': '0 1px 1px var(--color-opac-b-5)',
'--shadow-scrollbar': '0 0 1px 1px var(--color-opac-w-5)',
'--opacity-pulse-animation': '0.4'
}}
Object.entries(themes[theme]).forEach(([property, value]) => {
document.documentElement.style.setProperty(property, value);
});
console.log(`Theme switched to ${theme}`);
}
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址