default to alternate logo; preserve light and dark brand

and enablesDarkMode flag until merging with theme, when we know whether we need dark mode
a bit messy to have this extra flag, but seems the be the only correct way

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,
@@ -569,8 +570,16 @@ 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 (brand) {
+      mergedFormats[format].render.brand = {
+        light: brand.light,
+        dark: (brand.enablesDarkMode ||
+            darkModeDefaultMetadata(mergedFormats[format].metadata) !==
+              undefined)
+          ? brand.dark
+          : undefined,
+      };
+    }
     // apply defaults from brand yaml under the metadata of the current format
     const brandFormatDefaults: Metadata =
       (brand?.light?.data?.defaults?.quarto as unknown as Record<

src/core/brand/brand.ts

@@ -269,6 +269,12 @@ export type LightDarkBrand = {
   dark?: Brand;
 };
 
+export type LightDarkBrandDarkFlag = {
+  light?: Brand;
+  dark?: Brand;
+  enablesDarkMode: boolean;
+};
+
 export type LightDarkColor = {
   light?: string;
   dark?: string;
@@ -327,8 +333,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 +364,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,
@@ -466,7 +481,7 @@ export function splitUnifiedBrand(
   unified: unknown,
   brandDir: string,
   projectDir: string,
-): LightDarkBrand {
+): LightDarkBrandDarkFlag {
   const unifiedBrand: BrandUnified = Zod.BrandUnified.parse(unified);
   let typography: BrandTypographySingle | undefined = undefined;
   let headingsColor: LightDarkColor | undefined = undefined;
@@ -629,8 +644,7 @@ export function splitUnifiedBrand(
   }
   return {
     light: new Brand(lightBrand, brandDir, projectDir),
-    dark: brandHasDarkMode(unifiedBrand)
-      ? new Brand(darkBrand, brandDir, projectDir)
-      : undefined,
+    dark: new Brand(darkBrand, brandDir, projectDir),
+    enablesDarkMode: brandHasDarkMode(unifiedBrand),
   };
 }

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;
+}

src/project/project-shared.ts

@@ -51,6 +51,7 @@ import { Zod } from "../resources/types/zod/schema-types.ts";
 import {
   Brand,
   LightDarkBrand,
+  LightDarkBrandDarkFlag,
   splitUnifiedBrand,
 } from "../core/brand/brand.ts";
 import { assert } from "testing/asserts";
@@ -520,7 +521,7 @@ export const ensureFileInformationCache = (
 export async function projectResolveBrand(
   project: ProjectContext,
   fileName?: string,
-): Promise<{ light?: Brand; dark?: Brand } | undefined> {
+): Promise<LightDarkBrandDarkFlag | undefined> {
   async function loadSingleBrand(brandPath: string): Promise<Brand> {
     const brand = await readAndValidateYamlFromFile(
       brandPath,
@@ -529,7 +530,9 @@ export async function projectResolveBrand(
     );
     return new Brand(brand, dirname(brandPath), project.dir);
   }
-  async function loadUnifiedBrand(brandPath: string): Promise<LightDarkBrand> {
+  async function loadUnifiedBrand(
+    brandPath: string,
+  ): Promise<LightDarkBrandDarkFlag> {
     const brand = await readAndValidateYamlFromFile(
       brandPath,
       refSchema("brand-unified", "Format-independent brand configuration."),
@@ -576,6 +579,7 @@ export async function projectResolveBrand(
         dark: brand.dark
           ? await loadSingleBrand(resolveBrandPath(brand.dark, project.dir))
           : undefined,
+        enablesDarkMode: !!brand.dark,
       };
       return project.brandCache.brand;
     }
@@ -631,7 +635,7 @@ export async function projectResolveBrand(
             project.dir,
           );
         }
-        fileInformation.brand = { light, dark };
+        fileInformation.brand = { light, dark, enablesDarkMode: !!dark };
       } else {
         fileInformation.brand = splitUnifiedBrand(
           brand,

src/project/types.ts

@@ -7,7 +7,11 @@
 import { RenderServices } from "../command/render/types.ts";
 import { Metadata, PandocFlags } from "../config/types.ts";
 import { Format, FormatExtras } from "../config/types.ts";
-import { Brand, LightDarkBrand } from "../core/brand/brand.ts";
+import {
+  Brand,
+  LightDarkBrand,
+  LightDarkBrandDarkFlag,
+} from "../core/brand/brand.ts";
 import { MappedString } from "../core/mapped-text.ts";
 import { PartitionedMarkdown } from "../core/pandoc/types.ts";
 import { ExecutionEngine, ExecutionTarget } from "../execute/types.ts";
@@ -57,7 +61,7 @@ export type FileInformation = {
   engine?: ExecutionEngine;
   target?: ExecutionTarget;
   metadata?: Metadata;
-  brand?: LightDarkBrand;
+  brand?: LightDarkBrandDarkFlag;
 };
 
 export interface ProjectContext extends Cloneable<ProjectContext> {
@@ -71,11 +75,11 @@ export interface ProjectContext extends Cloneable<ProjectContext> {
   fileInformationCache: Map<string, FileInformation>;
 
   // This is a cache of _brand.yml for a project
-  brandCache?: { brand?: LightDarkBrand };
+  brandCache?: { brand?: LightDarkBrandDarkFlag };
   resolveBrand: (
     fileName?: string,
   ) => Promise<
-    undefined | { light?: Brand | undefined; dark?: Brand | undefined }
+    undefined | LightDarkBrandDarkFlag
   >;
 
   // expands markdown for a file

tests/docs/smoke-all/2024/07/09/issue-10251/index.qmd

@@ -5,8 +5,8 @@ _quarto:
     html:
       ensureHtmlElements:
         -
-          - 'img[src="https://quarto.org/quarto.png"][alt="this is the alt text that for the logo in the sidebar"][class="sidebar-logo light-content py-0 d-lg-inline d-none"]'
-          - 'img[src="https://quarto.org/quarto.png"][alt="this is the alt text that for the logo in the navbar"][class="navbar-logo"]'
+          - 'img[src="https://quarto.org/quarto.png"][alt="this is the alt text that for the logo in the sidebar"][class*="sidebar-logo light-content"]'
+          - 'img[src="https://quarto.org/quarto.png"][alt="this is the alt text that for the logo in the navbar"][class*="navbar-logo light-content"]'
         - []
 ---
 

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 >}}