watch prefers-color-scheme

it's the same as our toggle except we don't set local storage

Author: gordonwoodhull

src/resources/formats/html/templates/quarto-html-after-body.ejs

@@ -22,41 +22,7 @@
   
       window.document.body.appendChild(a);
     }
-  
-    const toggleGiscusIfUsed = (isAlternate, darkModeDefault) => {
-      const baseTheme = document.querySelector('#giscus-base-theme')?.value ?? 'light';
-      const alternateTheme = document.querySelector('#giscus-alt-theme')?.value ?? 'dark';
-  
-      let newTheme = '';
-  
-      if(darkModeDefault) {
-        newTheme = isAlternate ? baseTheme : alternateTheme;
-      } else {
-        newTheme = isAlternate ? alternateTheme : baseTheme;
-      }
-  
-      const changeGiscusTheme = () => {
-  
-        // From: https://github.com/giscus/giscus/issues/336
-        const sendMessage = (message) => {
-          const iframe = document.querySelector('iframe.giscus-frame');
-          if (!iframe) return;
-          iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
-        }
-  
-        sendMessage({
-          setConfig: {
-            theme: newTheme
-          }
-        });
-      }
-  
-      const isGiscussLoaded = window.document.querySelector('iframe.giscus-frame') !== null;
-      if (isGiscussLoaded) {
-        changeGiscusTheme();
-      }
-    }
-  
+    
     <% } %>
   
     <% if (tabby) {  %>

src/resources/formats/html/templates/quarto-html-before-body.ejs

@@ -128,10 +128,46 @@
         return localAlternateSentinel;
       }
     }
+    
+    const toggleGiscusIfUsed = (isAlternate, darkModeDefault) => {
+      const baseTheme = document.querySelector('#giscus-base-theme')?.value ?? 'light';
+      const alternateTheme = document.querySelector('#giscus-alt-theme')?.value ?? 'dark';
+  
+      let newTheme = '';
+  
+      if(darkModeDefault) {
+        newTheme = isAlternate ? baseTheme : alternateTheme;
+      } else {
+        newTheme = isAlternate ? alternateTheme : baseTheme;
+      }
+  
+      const changeGiscusTheme = () => {
+  
+        // From: https://github.com/giscus/giscus/issues/336
+        const sendMessage = (message) => {
+          const iframe = document.querySelector('iframe.giscus-frame');
+          if (!iframe) return;
+          iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+        }
+  
+        sendMessage({
+          setConfig: {
+            theme: newTheme
+          }
+        });
+      }
+  
+      const isGiscussLoaded = window.document.querySelector('iframe.giscus-frame') !== null;
+      if (isGiscussLoaded) {
+        changeGiscusTheme();
+      }
+    };
+
     <% if (respectUserColorScheme) { %>
-      const darkModeDefault = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const queryPrefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+    const darkModeDefault = queryPrefersDark.matches;
     <% } else { %>
-      const darkModeDefault = <%= darkModeDefault %>;
+    const darkModeDefault = <%= darkModeDefault %>;
     <% } %>
       
     let localAlternateSentinel = darkModeDefault ? 'alternate' : 'default';
@@ -145,6 +181,14 @@
       toggleGiscusIfUsed(toAlternate, darkModeDefault);
     };
 
+    <% if (respectUserColorScheme) { %>
+      queryPrefersDark.addEventListener("change", e => {
+        const alternate = e.matches
+        toggleColorMode(alternate);
+        toggleGiscusIfUsed(alternate, darkModeDefault);
+      })
+    <% } %>
+
     // Switch to dark mode if need be
     if (hasAlternateSentinel()) {
       toggleColorMode(true);

tests/integration/playwright/tests/html-dark-mode-defaultdark.spec.ts

@@ -1,5 +1,11 @@
 import { test, expect } from '@playwright/test';
 
+async function check_background(page, class_, bkcolor) {
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass(`fullcontent ${class_}`);
+  await expect(locatr).toHaveCSS('background-color', bkcolor);
+}
+
 async function check_backgrounds(page, class_, primary, secondary) {
   const locatr = await page.locator('body').first();
   await expect(locatr).toHaveClass(`fullcontent ${class_}`);
@@ -16,7 +22,6 @@ test.use({
 const blue = 'rgb(204, 221, 255)';
 const red = 'rgb(66, 7, 11)';
 
-
 // brands used in these documents have background colors
 
 test('Dark and light brand after user themes', async ({ page }) => {
@@ -44,8 +49,24 @@ test('Project specifies light and dark brands and respect-user-color-scheme', as
   await check_backgrounds(page, 'quarto-dark', red, blue);
 });
 
+test('Project specifies light and dark brands, dynamic respect-user-color-scheme', async ({ page }) => {
+  await page.goto('./html/dark-brand/project-light/simple-respect-color-scheme.html');
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass(`fullcontent quarto-dark`);
+  await expect(locatr).toHaveCSS('background-color', red);
+
+  await page.emulateMedia({ colorScheme: 'light' });
+  await expect(locatr).toHaveClass(`fullcontent quarto-light`);
+  await expect(locatr).toHaveCSS('background-color', blue);
+});
 
-test('Project specifies dark and light brands and respect-user-color-scheme', async ({ page }) => {
+test('Project specifies dark and light brands, dynamic respect-user-color-scheme', async ({ page }) => {
   await page.goto('./html/dark-brand/project-dark/simple-respect-color-scheme.html');
-  await check_backgrounds(page, 'quarto-dark', red, blue);
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass(`fullcontent quarto-dark`);
+  await expect(locatr).toHaveCSS('background-color', red);
+
+  await page.emulateMedia({ colorScheme: 'light' });
+  await expect(locatr).toHaveClass(`fullcontent quarto-light`);
+  await expect(locatr).toHaveCSS('background-color', blue);
 });

tests/integration/playwright/tests/html-dark-mode-defaultlight.spec.ts

@@ -47,3 +47,26 @@ test('Project specifies dark and light brands and respect-user-color-scheme', as
   await page.goto('./html/dark-brand/project-dark/simple-respect-color-scheme.html');
   await check_backgrounds(page, 'quarto-light', blue, red);
 });
+
+
+test('Project specifies light and dark brands, dynamic respect-user-color-scheme', async ({ page }) => {
+  await page.goto('./html/dark-brand/project-light/simple-respect-color-scheme.html');
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass(`fullcontent quarto-light`);
+  await expect(locatr).toHaveCSS('background-color', blue);
+
+  await page.emulateMedia({ colorScheme: 'dark' });
+  await expect(locatr).toHaveClass(`fullcontent quarto-dark`);
+  await expect(locatr).toHaveCSS('background-color', red);
+});
+
+test('Project specifies dark and light brands, dynamic respect-user-color-scheme', async ({ page }) => {
+  await page.goto('./html/dark-brand/project-dark/simple-respect-color-scheme.html');
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass(`fullcontent quarto-light`);
+  await expect(locatr).toHaveCSS('background-color', blue);
+
+  await page.emulateMedia({ colorScheme: 'dark' });
+  await expect(locatr).toHaveClass(`fullcontent quarto-dark`);
+  await expect(locatr).toHaveCSS('background-color', red);
+});