Darkmode Switch for MultiTwitch Embed Chat

darkmode4mttv.js

// ==UserScript==
// @name         Darkmode Switch for MultiTwitch Embed Chat
// @namespace    MTTV-Embed-Chat-Darkmode
// @version      0.1
// @description  Fixes the issue that twitch embedded chatroom won't apply dark theme correctly in multitwitch.tv. Also adds a button letting you to toggle on and off light mode.
// @author       xMarch
// @match        https://www.twitch.tv/embed/*/chat*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twitch.tv
// @grant        none
// @sandbox      DOM
// ==/UserScript==

(function() {
    'use strict';
    // ===== Configs ======
    var use_darkmode_as_default = true; // Enable or Disable darkmode as defalut.
    var inject_light_switch_to_chatroom = true; // Enable or Disable darkmode switch button.
    var execution_timeout = 3000; // So script won't kick in before webpage finishes loading.

    // ===== Functions =====
    function Light_Switch(){ // Toggle Light Mode on and off
        var chatroom_html = document.documentElement;
        var is_chatroom_lit = (chatroom_html.className.search(/theme-dark/) < 0) // find if dark theme is applied
        var replace_class_string;
        if (is_chatroom_lit) {
            replace_class_string = chatroom_html.className.replace('theme-light','theme-dark');
        } else {
            replace_class_string = chatroom_html.className.replace('theme-dark','theme-light');
        }
        chatroom_html.className = replace_class_string;
    }

    function Go_Dark(){ // Switch to dark theme
        var chatroom_html = document.documentElement;
        var replace_class_string = chatroom_html.className.replace('theme-light','theme-dark');
        chatroom_html.className = replace_class_string;
    }

    function Inject_Light_Switch(){ // Inject button HTML into chatroom
        var inject_point = document.getElementsByClassName("stream-chat-header")[0].firstChild;
        var html_elemental = `
        <style>
         .stream-chat-header {
          z-index:9999!important;
         }

         #enjected-light-switch {
          position: absolute;
          left: 0;
          margin-left: 1rem;
          padding: 3px;
          border-radius: .3rem;
          cursor: pointer;
          user-select: none;
         }

         #enjected-light-switch:hover {
          background-color: rgba(127, 127, 127,0.4);
         }

         #enjected-light-switch:hover:after{
          content: "Toggle Light Mode";
          position: absolute;
          padding: 5px;
          border-radius: 0.3rem;
          left: 0;
          top: 3rem;
          text-wrap: nowrap;
          color: white;
          background: rgba(30,30,30,0.9);
         }
        </style>

        <div id="enjected-light-switch">
         <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16" style="display: block;">
          <path fill-rule="evenodd" d="M5.04.303A.5.5 0 0 1 5.5 0h5c.2 0 .38.12.46.303l3 7a.5.5 0 0 1-.363.687h-.002c-.15.03-.3.056-.45.081a32.731 32.731 0 0 1-4.645.425V13.5a.5.5 0 1 1-1 0V8.495a32.753 32.753 0 0 1-4.645-.425c-.15-.025-.3-.05-.45-.08h-.003a.5.5 0 0 1-.362-.688l3-7Z"/>
          <path d="M6.493 12.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.052.075l-.001.004-.004.01V14l.002.008a.147.147 0 0 0 .016.033.62.62 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.62.62 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411Z"/>
         </svg>
        </div>
        `;

        inject_point.insertAdjacentHTML("beforeBegin",html_elemental); // Inject button into .stream-chat-header

        document.getElementById("enjected-light-switch").addEventListener("click", Light_Switch); // Makes button toggle light switch
    }

    // ===== Main =====
    if (use_darkmode_as_default){
        setTimeout(Go_Dark, execution_timeout);
    }

    if (inject_light_switch_to_chatroom){
        setTimeout(Inject_Light_Switch, execution_timeout);
    }
})();