use user prefers-color-schema setting instead of author default

fixes #1470

use static tests for user default color scheme
since we do not support dynamic change of prefers-color-scheme yet

Author: gordonwoodhull

news/changelog-1.7.md

@@ -61,6 +61,7 @@ All changes included in 1.7:
 - ([#12277](https://github.com/quarto-dev/quarto-cli/pull/12277)): Provide light and dark plot and table renderings with `renderings: [light,dark]`
 - ([#11860](https://github.com/quarto-dev/quarto-cli/issues/11860)): ES6 modules that import other local JS modules in documents with `embed-resources: true` are now correctly embedded.
 - ([#1325](https://github.com/quarto-dev/quarto-cli/issues/1325)): Dark Mode pages should not flash light on reload. (Nor should Light Mode pages flash dark.)
+- ([#1470](https://github.com/quarto-dev/quarto-cli/issues/1470)): User preference for `prefers-color-scheme` is respected, although only on page load, not dynamically. Author preference still influences stylesheet order and therefore NoJS experience.
 - ([#12307](https://github.com/quarto-dev/quarto-cli/issues/12307)): Tabsets using `tabby.js` in non-boostrap html (`theme: pandoc`, `theme: none` or `minimal: true`) now correctly render reactive content when `server: shiny` is used.
 - ([#12356](https://github.com/quarto-dev/quarto-cli/issues/12356)): Remove duplicate id in HTML document when using `#lst-` prefix label for using Quarto crossref.
 

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

@@ -128,7 +128,7 @@
         return localAlternateSentinel;
       }
     }
-    const darkModeDefault = <%= darkModeDefault %>;
+    const darkModeDefault = window.matchMedia('(prefers-color-scheme: dark)').matches;
     let localAlternateSentinel = darkModeDefault ? 'alternate' : 'default';
 
     // Dark / light mode switch

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

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+async function check_red_blue(page) {
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass('fullcontent quarto-dark');
+  await expect(locatr).toHaveCSS('background-color', 'rgb(66, 7, 11)');
+  await page.locator("a.quarto-color-scheme-toggle").click();
+  const locatr2 = await page.locator('body').first();
+  await expect(locatr2).toHaveCSS('background-color', 'rgb(204, 221, 255)');
+}
+
+test.use({
+  colorScheme: 'dark'
+});
+
+// brands used in these documents have background colors
+
+test('Dark and light brand after user themes', async ({ page }) => {
+  // brand overrides theme background color
+  await page.goto('./html/dark-brand/brand-after-theme.html');
+  await check_red_blue(page);
+});
+
+// project tests
+
+test('Project specifies dark and light brands', async ({ page }) => {
+  await page.goto('./html/dark-brand/project-light-dark/simple.html');
+  await check_red_blue(page);
+});

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

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+async function check_blue_red(page) {
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass('fullcontent quarto-light');
+  await expect(locatr).toHaveCSS('background-color', 'rgb(204, 221, 255)');
+  await page.locator("a.quarto-color-scheme-toggle").click();
+  const locatr2 = await page.locator('body').first();
+  await expect(locatr2).toHaveCSS('background-color', 'rgb(66, 7, 11)');
+}
+
+test.use({
+  colorScheme: 'light'
+});
+
+// brands used in these documents have background colors
+
+test('Dark and light brand after user themes', async ({ page }) => {
+  // brand overrides theme background color
+  await page.goto('./html/dark-brand/brand-after-theme.html');
+  await check_blue_red(page);
+});
+
+// project tests
+
+test('Project specifies dark and light brands', async ({ page }) => {
+  await page.goto('./html/dark-brand/project-light-dark/simple.html');
+  await check_blue_red(page);
+});

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

@@ -1,14 +1,5 @@
 import { test, expect } from '@playwright/test';
 
-async function check_red_blue(page) {
-  const locatr = await page.locator('body').first();
-  await expect(locatr).toHaveClass('fullcontent quarto-dark');
-  await expect(locatr).toHaveCSS('background-color', 'rgb(66, 7, 11)');
-  await page.locator("a.quarto-color-scheme-toggle").click();
-  const locatr2 = await page.locator('body').first();
-  await expect(locatr2).toHaveCSS('background-color', 'rgb(204, 221, 255)');
-}
-
 async function check_theme_overrides(page) {
   const locatr = await page.locator('body').first();
   await expect(locatr).toHaveClass('fullcontent quarto-light');
@@ -19,12 +10,6 @@ async function check_theme_overrides(page) {
 }
 // themes used in these documents have background colors
 
-test('Dark and light brand after user themes', async ({ page }) => {
-  // brand overrides theme background color
-  await page.goto('./html/dark-brand/brand-after-theme.html');
-  await check_red_blue(page);
-});
-
 test('Dark and light brand before user themes', async ({ page }) => {
   // theme will override brand
   await page.goto('./html/dark-brand/brand-before-theme.html');
@@ -33,11 +18,6 @@ test('Dark and light brand before user themes', async ({ page }) => {
 
 // project tests
 
-test('Project specifies dark and light brands', async ({ page }) => {
-  await page.goto('./html/dark-brand/project-light-dark/simple.html');
-  await check_red_blue(page);
-});
-
 test('Project brand before user themes', async ({ page }) => {
   // theme will override brand
   await page.goto('./html/dark-brand/project-light-dark/brand-under-theme.html');