do not respect user color scheme if user has set a preference

also, the localAlternateSentinel is used dynamically
so it needs to be updated when we detect an OS change
so that the toggle works on the first click

Author: gordonwoodhull

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

@@ -184,8 +184,11 @@
 
     <% if (respectUserColorScheme) { %>
     queryPrefersDark.addEventListener("change", e => {
+      if(window.localStorage.getItem("quarto-color-scheme") !== null)
+        return;
       const alternate = e.matches
       toggleColorMode(alternate);
+      localAlternateSentinel = e.matches ? 'alternate' : 'default'; // this is used alongside local storage!
       toggleGiscusIfUsed(alternate, darkModeDefault);
     });
     <% } %>

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

@@ -87,3 +87,21 @@ test('Project specifies dark and light brands, dynamic respect-user-color-scheme
   await expect(locatr).toHaveCSS('background-color', blue);
   await check_toggle(page, false);
 });
+
+
+test('Project specifies dark and light brands, do not respect-user-color-scheme after toggling', 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-dark`);
+  await expect(locatr).toHaveCSS('background-color', red);
+  await check_toggle(page, true);
+
+  await check_backgrounds(page, 'quarto-dark', red, blue);
+  await check_backgrounds(page, 'quarto-light', blue, red);
+  await check_toggle(page, true);
+
+  await page.emulateMedia({ colorScheme: 'light' });
+  await expect(locatr).toHaveClass(`fullcontent quarto-dark`);
+  await expect(locatr).toHaveCSS('background-color', red);
+  await check_toggle(page, true);
+});