default to alternate logo or brand

if dark mode is enabled and we don't have data
using the opposite data is the best we can do

having some trouble with this approach for sidebar
seems ugly to resolve this in render-contexts and to have
inconsistency between format.render.brand and project.resolveBrand()
but this is where we know if theme is enabling dark mode

provisional commit to test in CI

Author: gordonwoodhull

src/command/render/render-contexts.ts

@@ -86,6 +86,7 @@ import {
 import { ExtensionContext } from "../../extension/types.ts";
 import { NotebookContext } from "../../render/notebook/notebook-types.ts";
 import { safeCloneDeep } from "../../core/safe-clone-deep.ts";
+import { darkModeDefaultMetadata } from "../../format/html/format-html-info.ts";
 
 export async function resolveFormatsFromMetadata(
   metadata: Metadata,
@@ -570,6 +571,19 @@ async function resolveFormats(
     // resolve brand in project and forward it to format
     const brand = await project.resolveBrand(target.source);
     mergedFormats[format].render.brand = brand;
+    if (
+      mergedFormats[format].render.brand &&
+      !mergedFormats[format].render.brand.dark &&
+      darkModeDefaultMetadata(mergedFormats[format].metadata) !== undefined
+    ) {
+      // there is no dark brand specified but the theme enables dark mode
+      // so we need to copy the light brand to the dark brand
+      // https://github.com/quarto-dev/quarto-cli/issues/12981
+
+      mergedFormats[format].render.brand.dark = ld.cloneDeep(
+        mergedFormats[format].render.brand.light,
+      );
+    }
 
     // apply defaults from brand yaml under the metadata of the current format
     const brandFormatDefaults: Metadata =

src/core/brand/brand.ts

@@ -327,8 +327,8 @@ export function resolveLogo(
   };
   if (!spec) {
     return {
-      light: findLogo("light", order),
-      dark: findLogo("dark", order),
+      light: findLogo("light", order) || findLogo("dark", order),
+      dark: findLogo("dark", order) || findLogo("light", order),
     };
   }
   if (typeof spec === "string") {
@@ -358,6 +358,15 @@ export function resolveLogo(
   } else {
     dark = resolveLogoOptions("dark", spec.dark);
   }
+  // light logo default to dark logo if no light logo specified
+  if (!light && dark) {
+    light = { ...dark };
+  }
+  // dark logo default to light logo if no dark logo specified
+  // and dark mode is enabled
+  if (!dark && light && brand && brand.dark) {
+    dark = { ...light };
+  }
   return {
     light,
     dark,

src/format/dashboard/format-dashboard.ts

@@ -122,7 +122,7 @@ export function dashboardFormat() {
           }
         }
 
-        const brand = await project.resolveBrand(input);
+        const brand = format.render.brand;
         let logoSpec = format.metadata[kLogo] as LogoLightDarkSpecifier;
         if (typeof logoSpec === "string" && format.metadata[kLogoAlt]) {
           logoSpec = {
@@ -135,7 +135,6 @@ export function dashboardFormat() {
           "medium",
           "large",
         ]);
-        console.log("dash logo", format.metadata[kLogo]);
 
         const extras: FormatExtras = await baseHtmlFormat.formatExtras(
           input,

src/format/html/format-html-info.ts

@@ -38,36 +38,48 @@ export function formatDarkMode(format: Format): boolean | undefined {
   return undefined;
 }
 
-export function darkModeDefault(format: Format): boolean | undefined {
-  const metadata = format.metadata;
-  const brand = format.render.brand;
-  if (metadata !== undefined) {
-    if (metadata[kTheme] && typeof metadata[kTheme] === "object") {
-      const keys = Object.keys(metadata[kTheme]);
-      if (keys.includes("dark")) {
-        if (keys[0] === "dark") {
-          return true;
-        } else {
-          return false;
-        }
+// there are two stages of knowing whether dark mode is enabled:
+// 1. from the start we can look at theme and brand metadata to see if there is
+//   a dark theme or brand
+// 2. later, after brand is loaded, we'll know whether unified brand enabled dark mode
+// in practice, we only know
+export function darkModeDefaultMetadata(
+  metadata: Metadata,
+): boolean | undefined {
+  if (metadata[kTheme] && typeof metadata[kTheme] === "object") {
+    const keys = Object.keys(metadata[kTheme]);
+    if (keys.includes("dark")) {
+      if (keys[0] === "dark") {
+        return true;
+      } else {
+        return false;
       }
     }
-    if (metadata[kBrand] || brand) {
-      if (metadata[kBrand] && typeof metadata[kBrand] === "object") {
-        const keys = Object.keys(metadata[kBrand]);
-        if (keys.includes("dark")) {
-          if (keys[0] === "dark") {
-            return true;
-          } else {
-            return false;
-          }
-        }
-      }
-      if (brand && brand.dark) {
-        // unified brand has no author preference but it can have dark mode
+  }
+  if (metadata[kBrand] && typeof metadata[kBrand] === "object") {
+    const keys = Object.keys(metadata[kBrand]);
+    if (keys.includes("dark")) {
+      if (keys[0] === "dark") {
+        return true;
+      } else {
         return false;
       }
     }
   }
   return undefined;
 }
+export function darkModeDefault(format: Format): boolean | undefined {
+  const metadata = format.metadata;
+  if (metadata !== undefined) {
+    const dmdm = darkModeDefaultMetadata(metadata);
+    if (dmdm !== undefined) {
+      return dmdm;
+    }
+  }
+  const brand = format.render.brand;
+  if (brand && brand.dark) {
+    // unified brand has no author preference but it can have dark mode
+    return false;
+  }
+  return undefined;
+}

tests/docs/smoke-all/brand/logo/logo-light-only.yml

@@ -0,0 +1,10 @@
+logo:
+  images:
+    light-logo:
+      path: light-logo.png
+      alt: light logo
+    dark-logo:
+      path: dark-logo.png
+      alt: dark logo
+  small:
+    light: light-logo

tests/docs/smoke-all/brand/logo/theme-dark-mode-brand-file-light-yes-dark-logo.qmd

@@ -0,0 +1,30 @@
+---
+title: Yes dark logo if theme enables dark mode
+format:
+  dashboard:
+    theme:
+      light: default
+      dark: darkly  # Explicitly enable dark mode
+brand: logo-light-only.yml
+logo:
+  light: quarto.png
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          - 'img[src="quarto.png"][alt=""][class="navbar-logo light-content d-inline-block"]'
+          - 'img[src="light-logo.png"][alt="light logo"][class="navbar-logo dark-content d-inline-block"]'
+        - []
+---
+
+
+There is ambiguity whether this should use `quarto.png` for the dark logo, since
+the brand provides no dark logos, but if that's the intention then use
+
+```yaml
+logo: quarto.png
+```
+
+
+{{< lipsum 4 >}}

tests/docs/smoke-all/brand/logo/theme-dark-mode-yes-dark-logo.qmd

@@ -0,0 +1,36 @@
+---
+title: Yes dark logo if theme enables dark mode
+format:
+  dashboard:
+    theme:
+      light: default
+      dark: darkly
+brand:
+  logo:
+    images:
+      light-logo:
+        path: light-logo.png
+        alt: light logo
+    small:
+      light: light-logo
+logo:
+  light: quarto.png
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          - 'img[src="quarto.png"][alt=""][class="navbar-logo light-content d-inline-block"]'
+          - 'img[src="light-logo.png"][alt="light logo"][class="navbar-logo dark-content d-inline-block"]'
+        - []
+---
+
+There is ambiguity whether this should use `quarto.png` for the dark logo, since
+the brand provides no dark logos, but if that's the intention then use
+
+```yaml
+logo: quarto.png
+```
+
+
+{{< lipsum 4 >}}

tests/docs/smoke-all/brand/logo/theme-dark-project-brand-file-light/.gitignore

@@ -0,0 +1 @@
+/.quarto/

tests/docs/smoke-all/brand/logo/theme-dark-project-brand-file-light/_quarto.yml

@@ -0,0 +1,8 @@
+project:
+  type: default
+format:
+  dashboard:
+    theme:
+      light: default
+      dark: darkly # Explicitly enable dark mode
+brand: logo-light-only.yml

tests/docs/smoke-all/brand/logo/theme-dark-project-brand-file-light/logo-light-only.yml

@@ -0,0 +1,7 @@
+logo:
+  images:
+    light-logo:
+      path: light-logo.png
+      alt: light logo
+  small:
+    light: light-logo

tests/docs/smoke-all/brand/logo/theme-dark-project-brand-file-light/yes-dark-logo.qmd

@@ -0,0 +1,24 @@
+---
+title: Yes dark logo if theme enables dark mode
+logo:
+  light: quarto.png
+_quarto:
+  tests:
+    dashboard:
+      ensureHtmlElements:
+        -
+          - 'img[src="quarto.png"][alt=""][class="navbar-logo light-content d-inline-block"]'
+          - 'img[src="light-logo.png"][alt="light logo"][class="navbar-logo dark-content d-inline-block"]'
+        - []
+---
+
+
+There is ambiguity whether this should use `quarto.png` for the dark logo, since
+the brand provides no dark logos, but if that's the intention then use
+
+```yaml
+logo: quarto.png
+```
+
+
+{{< lipsum 4 >}}