Ensure that user provided SCSS has precedence over quarto generated scss also for Dark theme

.github/workflows/test-smokes.yml

@@ -283,8 +283,17 @@ jobs:
           echo "Pull Request URL - ${{ steps.cpr.outputs.pull-request-url }}"
           echo "Pull Request Action Performed - ${{ steps.cpr.outputs.pull-request-operation }}"
 
-      - uses: actions/upload-artifact@v3
+      - name: Upload test timing file
+        uses: actions/upload-artifact@v3
         if: matrix.time-test && ( failure() || cancelled())
         with:
           name: timed test file
           path: tests/timing-for-ci.txt
+
+      - uses: actions/upload-artifact@v3
+        # PLaywright test only runs on Linux for now
+        if: ${{ !cancelled() && runner.os != 'Windows' }}
+        with:
+          name: playwright-report
+          path: ./tests/integration/playwright/playwright-report/
+          retention-days: 30

news/changelog-1.6.md

@@ -16,6 +16,7 @@ All changes included in 1.6:
 
 - Fix `kbd` element styling on dark themes.
 - ([#10761](https://github.com/quarto-dev/quarto-cli/issues/10761)): Add support for `licence: CC0` to automatically link to Creative Commons licence [CC0 1.0](https://creativecommons.org/publicdomain/zero/1.0/).
+- ([#10817](https://github.com/quarto-dev/quarto-cli/issues/10817)): Ensure that user provided SCSS has precedent over quarto generated scss also for dark theme.
 
 ## `revealjs` Format
 

src/format/html/format-html-scss.ts

@@ -317,9 +317,9 @@ export function resolveTextHighlightingLayer(
   if (themeDescriptor) {
     const readTextColor = (name: string) => {
       const textStyles = themeDescriptor.json["text-styles"];
-      if (textStyles && typeof (textStyles) === "object") {
+      if (textStyles && typeof textStyles === "object") {
         const commentColor = (textStyles as Record<string, unknown>)[name];
-        if (commentColor && typeof (commentColor) === "object") {
+        if (commentColor && typeof commentColor === "object") {
           const textColor =
             (commentColor as Record<string, unknown>)["text-color"];
           return textColor;
@@ -368,19 +368,19 @@ function resolveThemeLayer(
   let theme = undefined;
   let defaultDark = false;
 
-  if (typeof (themes) === "string") {
+  if (typeof themes === "string") {
     // The themes is just a string
     theme = { light: [themes] };
   } else if (Array.isArray(themes)) {
     // The themes is an array
     theme = { light: themes };
-  } else if (typeof (themes) === "object") {
+  } else if (typeof themes === "object") {
     // The themes are an object  - look at each key and
     // deal with them either as a string or a string[]
     const themeArr = (theme?: unknown): string[] => {
       const themes: string[] = [];
       if (theme) {
-        if (typeof (theme) === "string") {
+        if (typeof theme === "string") {
           themes.push(theme);
         } else if (Array.isArray(theme)) {
           themes.push(...theme);
@@ -417,7 +417,7 @@ function resolveThemeLayer(
     ? layerTheme(input, theme.dark, quartoThemesDir)
     : undefined;
   if (darkLayerContext) {
-    darkLayerContext.layers.push(...sassLayers);
+    darkLayerContext.layers.unshift(...sassLayers);
     const darkHighlightingLayer = resolveTextHighlightingLayer(
       input,
       format,
@@ -522,7 +522,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
   const colorDefaults: string[] = [];
 
   const navbar = (metadata[kWebsite] as Metadata)?.[kSiteNavbar];
-  if (navbar && typeof (navbar) === "object") {
+  if (navbar && typeof navbar === "object") {
     // Forward navbar background color
     const navbarBackground = (navbar as Record<string, unknown>)[kBackground];
     if (navbarBackground !== undefined) {
@@ -532,9 +532,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
           sassVariable(
             "navbar-bg",
             navbarBackground,
-            typeof (navbarBackground) === "string"
-              ? asBootstrapColor
-              : undefined,
+            typeof navbarBackground === "string" ? asBootstrapColor : undefined,
           ),
         ),
       );
@@ -549,9 +547,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
           sassVariable(
             "navbar-fg",
             navbarForeground,
-            typeof (navbarForeground) === "string"
-              ? asBootstrapColor
-              : undefined,
+            typeof navbarForeground === "string" ? asBootstrapColor : undefined,
           ),
         ),
       );
@@ -575,7 +571,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
   const sidebars = (metadata[kWebsite] as Metadata)?.[kSiteSidebar];
   const sidebar = Array.isArray(sidebars)
     ? sidebars[0]
-    : typeof (sidebars) === "object"
+    : typeof sidebars === "object"
     ? (sidebars as Metadata)
     : undefined;
 
@@ -589,7 +585,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
           sassVariable(
             "sidebar-bg",
             sidebarBackground,
-            typeof (sidebarBackground) === "string"
+            typeof sidebarBackground === "string"
               ? asBootstrapColor
               : undefined,
           ),
@@ -612,7 +608,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
           sassVariable(
             "sidebar-fg",
             sidebarForeground,
-            typeof (sidebarForeground) === "string"
+            typeof sidebarForeground === "string"
               ? asBootstrapColor
               : undefined,
           ),
@@ -640,7 +636,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
   }
 
   const footer = (metadata[kWebsite] as Metadata)?.[kPageFooter] as Metadata;
-  if (footer !== undefined && typeof (footer) === "object") {
+  if (footer !== undefined && typeof footer === "object") {
     // Forward footer color
     const footerBg = footer[kBackground];
     if (footerBg !== undefined) {
@@ -650,7 +646,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
           sassVariable(
             "footer-bg",
             footerBg,
-            typeof (footerBg) === "string" ? asBootstrapColor : undefined,
+            typeof footerBg === "string" ? asBootstrapColor : undefined,
           ),
         ),
       );
@@ -665,7 +661,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
           sassVariable(
             "footer-fg",
             footerFg,
-            typeof (footerFg) === "string" ? asBootstrapColor : undefined,
+            typeof footerFg === "string" ? asBootstrapColor : undefined,
           ),
         ),
       );
@@ -689,7 +685,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
     }
 
     // If the footer border is a color, set that
-    if (footerBorder !== undefined && typeof (footerBorder) === "string") {
+    if (footerBorder !== undefined && typeof footerBorder === "string") {
       resolveBootstrapColorDefault(footerBorder, colorDefaults);
       variables.push(
         outputVariable(
@@ -704,7 +700,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
 
     // Forward any footer color
     const footerColor = footer[kColor];
-    if (footerColor && typeof (footerColor) === "string") {
+    if (footerColor && typeof footerColor === "string") {
       resolveBootstrapColorDefault(footerColor, colorDefaults);
       variables.push(
         outputVariable(
@@ -729,7 +725,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
         sassVariable(
           kCodeBorderLeft,
           codeblockLeftBorder,
-          typeof (codeblockLeftBorder) === "string"
+          typeof codeblockLeftBorder === "string"
             ? asBootstrapColor
             : undefined,
         ),
@@ -746,7 +742,7 @@ export const quartoBootstrapDefaults = (metadata: Metadata) => {
     variables.push(outputVariable(sassVariable(
       kCodeBlockBackground,
       codeblockBackground,
-      typeof (codeblockBackground) === "string" ? asBootstrapColor : undefined,
+      typeof codeblockBackground === "string" ? asBootstrapColor : undefined,
     )));
   }
 
@@ -775,7 +771,7 @@ function resolveBootstrapColorDefault(value: unknown, variables: string[]) {
 }
 
 function bootstrapColorDefault(value: unknown) {
-  if (typeof (value) === "string") {
+  if (typeof value === "string") {
     return bootstrapColorVars[value];
   }
 }

tests/docs/playwright/html/dark-light-theme-custom/.gitignore

@@ -0,0 +1,2 @@
+*_files/
+*.html

tests/docs/playwright/html/dark-light-theme-custom/custom.scss

@@ -0,0 +1,8 @@
+/*-- scss:defaults --*/
+
+/*-- scss:rules --*/
+.quarto-title-banner {
+  margin-bottom: 1em;
+  color: #dee2e6;
+  background: red;
+}

tests/docs/playwright/html/dark-light-theme-custom/index.qmd

@@ -0,0 +1,15 @@
+---
+title: "Quarto Playground"
+title-block-banner: true
+format:
+  html:
+    theme:
+      light:
+        - cosmo
+        - custom.scss
+      dark: 
+        - darkly
+        - custom.scss
+---
+
+This is a playground for Quarto.

tests/integration/playwright-tests.test.ts

@@ -14,6 +14,7 @@ import {
 import { cleanoutput } from "../smoke/render/render.ts";
 import { execProcess } from "../../src/core/process.ts";
 import { quartoDevCmd } from "../utils.ts";
+import { fail } from "testing/asserts.ts";
 
 async function fullInit() {
   await initYamlIntelligenceResourcesFromFilesystem();
@@ -29,7 +30,7 @@ setInitializer(fullInit);
 await initState();
 
 // const promises = [];
-const fileNames = [];
+const fileNames: string[] = [];
 
 for (const { path: fileName } of globOutput) {
   const input = fileName;
@@ -43,15 +44,29 @@ for (const { path: fileName } of globOutput) {
   fileNames.push(fileName);
 }
 
-
-try {
-  // run playwright
-  await execProcess({
-    cmd: [Deno.build.os == "windows" ? "npx.cmd" : "npx", "playwright", "test"],
-    cwd: "integration/playwright",
-  });
-} finally {
-  for (const fileName of fileNames) {
-    cleanoutput(fileName, "html");
+Deno.test({
+  name: "Playwright tests are passing", 
+  // currently we run playwright tests only on Linux
+  ignore: Deno.build.os === "windows",
+  fn: async () => {
+    try {
+      // run playwright
+      const res = await execProcess({
+        cmd: [Deno.build.os == "windows" ? "npx.cmd" : "npx", "playwright", "test"],
+        cwd: "integration/playwright",
+      });
+      if (!res.success) {
+        if (Deno.env.get("GITHUB_ACTIONS") && Deno.env.get("GITHUB_REPOSITORY") && Deno.env.get("GITHUB_RUN_ID")) {
+          const runUrl = `https://github.com/${Deno.env.get("GITHUB_REPOSITORY")}/actions/runs/${Deno.env.get("GITHUB_RUN_ID")}`;
+          console.log(`::error file=playwright-tests.test.ts, title=Playwright tests::Some tests failed. Download report uploaded as artifact at ${runUrl}`);
+        }
+        fail("Failed tests with playwright. Look at playwright report for more details.")
+      }
+
+    } finally {
+      for (const fileName of fileNames) {
+        cleanoutput(fileName, "html");
+      }
+    }
   }
-}
+});

tests/integration/playwright/tests/html-themes.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+
+test('Dark and light theme respect user themes', async ({ page }) => {
+  // This document use a custom theme file that change the background color of the title banner
+  // Same user defined color should be used in both dark and light theme
+  await page.goto('./html/dark-light-theme-custom/');
+  const locatr = await page.locator('div').filter({ hasText: 'Quarto Playground' }).first()
+  await expect(locatr).toHaveCSS('background-color', 'rgb(255, 0, 0)');
+  await page.locator("a.quarto-color-scheme-toggle").click();
+  const locatr2 = await page.locator('div').filter({ hasText: 'Quarto Playground' }).first()
+  await expect(locatr2).toHaveCSS('background-color', 'rgb(255, 0, 0)');
+});
+
+test('Dark theming toggle change to dark background ', async ({ page }) => {
+  await page.goto('./html/dark-light-theme-custom/');
+  const locatr = page.getByText('Quarto Playground This is a');
+  await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+  // switching to dark theme using toggle
+  await page.locator("a.quarto-color-scheme-toggle").click();
+  const locatr2 = await page.locator('div').filter({ hasText: 'Quarto Playground' }).first()
+  await expect(locatr2).toHaveCSS('background-color', 'rgb(255, 0, 0)');
+});