use static tests for user default color scheme

since we do not support dynamic change of prefers-color-scheme yet

Author: gordonwoodhull

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');