(#398) Ensure Disqus works in dark mode

Due to the Bootstrap upgrade to 5.3, Disqus
comments were not readable in dark mode. This
issue was reported and confirmed at:

https://disqus.com/home/discussion/channel-discussdisqus/embed_disqus_comments_not_changing_background_color_with_bootstrap_53_color_mode/

A change has been made to override the
color-scheme at the :root, which appears not to
affect anything else in choco-theme currently.

In addition, the Disqus JavaScript has been moved
into it's own file so that the code can be shared
across repositories.

.vscode/settings.json

@@ -14,6 +14,7 @@
         "corepack",
         "cssnano",
         "datatables",
+        "Disqus",
         "DOCSEARCH",
         "dropoverlay",
         "easymde",

build/choco-theme.ts

@@ -121,6 +121,18 @@ const init = async () => {
             );
         }
 
+        // Disqus
+        if (repository.name === repositoryConfig.community.name || repository.name === repositoryConfig.blog.name) {
+            parallelTasksInitial.push(
+                {
+                    task: 'disqus.min.js',
+                    source: `${repositoryConfig.theme.js}disqus.min.js`,
+                    destination: `${repository.js}disqus.min.js`,
+                    isFolder: false
+                }
+            );
+        }
+
         // atcb-override css
         if (repository.name === repositoryConfig.org.name) {
             parallelTasksInitial.push(

dist/css/chocolatey.css

@@ -5,6 +5,7 @@
 * Licensed under MIT (https://github.com/chocolatey/choco-theme/blob/main/LICENSE)
 */
 :root {
+  color-scheme: unset !important;
   --bs-blue-rgb: 92, 159, 216;
   --bs-indigo-rgb: 102, 16, 242;
   --bs-purple-rgb: 111, 66, 193;

dist/css/zendesk.css

@@ -5,6 +5,7 @@
 * Licensed under MIT (https://github.com/chocolatey/choco-theme/blob/main/LICENSE)
 */
 :root {
+  color-scheme: unset !important;
   --bs-blue-rgb: 92, 159, 216;
   --bs-indigo-rgb: 102, 16, 242;
   --bs-purple-rgb: 111, 66, 193;

dist/js/disqus.js

@@ -0,0 +1,21 @@
+/*!
+  * choco-theme v0.6.2 (https://github.com/chocolatey/choco-theme#readme)
+  * Copyright 2020-2024 Chocolatey Software
+  * Licensed under MIT (https://github.com/chocolatey/choco-theme/blob/main/LICENSE)
+*/
+(() => {
+  // js/disqus.js
+  (() => {
+    const disqusShortname = "chocolatey";
+    const dsq = document.createElement("script");
+    dsq.type = "text/javascript";
+    dsq.async = true;
+    dsq.src = `//${disqusShortname}.disqus.com/embed.js`;
+    (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(dsq);
+    document.addEventListener("themeChanged", () => {
+      if (document.readyState == "complete") {
+        DISQUS.reset({ reload: true, config: disqus_config });
+      }
+    });
+  })();
+})();

dist/js/disqus.min.js

@@ -0,0 +1,6 @@
+/*!
+  * choco-theme v0.6.2 (https://github.com/chocolatey/choco-theme#readme)
+  * Copyright 2020-2024 Chocolatey Software
+  * Licensed under MIT (https://github.com/chocolatey/choco-theme/blob/main/LICENSE)
+*/
+(()=>{(()=>{let t="chocolatey",e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=`//${t}.disqus.com/embed.js`,(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e),document.addEventListener("themeChanged",()=>{document.readyState=="complete"&&DISQUS.reset({reload:!0,config:disqus_config})})})();})();

dist/js/theme-toggle.js

@@ -61,6 +61,8 @@
           setStoredTheme(theme);
           setTheme(theme);
           showActiveTheme(theme, true);
+          const event = new Event("themeChanged");
+          document.dispatchEvent(event);
         });
       });
     });

js/disqus.js

@@ -0,0 +1,18 @@
+(() => {
+    const disqusShortname = 'chocolatey';
+
+    const dsq = document.createElement('script');
+    dsq.type = 'text/javascript';
+    dsq.async = true;
+    dsq.src = `//${disqusShortname}.disqus.com/embed.js`;
+    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+
+    // Disqus theme switching
+    // Tutorial: https://thisdevbrain.com/disqus-auto-theme-switching/
+    document.addEventListener('themeChanged', () => {
+        if (document.readyState == 'complete') {
+            // eslint-disable-next-line no-undef, camelcase
+            DISQUS.reset({ reload: true, config: disqus_config });
+        }
+    });
+})();

js/theme-toggle.js

@@ -71,6 +71,10 @@
                 setStoredTheme(theme);
                 setTheme(theme);
                 showActiveTheme(theme, true);
+
+                // Create and send event for Disqus to reload
+                const event = new Event('themeChanged');
+                document.dispatchEvent(event);
             });
         });
     });

scss/variables/_chocolatey-root.scss

@@ -1,4 +1,5 @@
 :root {
+    color-scheme: unset !important; // https://disqus.com/home/discussion/channel-discussdisqus/embed_disqus_comments_not_changing_background_color_with_bootstrap_53_color_mode/
     @each $color, $value in $colors-rgb {
         --#{$variable-prefix}#{$color}-rgb: #{$value};
     }