here is the right way to do light and dark favicon

using the media attribute of link tag
unfortunately it only works on Chrome :-(
but it's a very nice way

TODO: also allow project.favicon to choose icon resource
or have {light,dark}

Author: gordonwoodhull

src/command/render/pandoc-dependencies-html.ts

@@ -209,6 +209,7 @@ interface HtmlInjector {
     href: string,
     rel: string,
     type?: string,
+    media?: string,
   ): void;
 
   injectHtml(html: string): void;
@@ -350,7 +351,7 @@ function processHtmlDependencies(
     // Link tags
     if (dependency.links) {
       dependency.links.forEach((link) => {
-        injector.injectLink(link.href, link.rel, link.type);
+        injector.injectLink(link.href, link.rel, link.type, link.media);
       });
     }
 
@@ -515,13 +516,17 @@ function domDependencyInjector(
     href: string,
     rel: string,
     type?: string,
+    media?: string,
   ) => {
     const linkEl = doc.createElement("link");
     linkEl.setAttribute("href", pathWithForwardSlashes(href));
     linkEl.setAttribute("rel", rel);
     if (type) {
       linkEl.setAttribute("type", type);
     }
+    if (media) {
+      linkEl.setAttribute("media", media);
+    }
     injectEl(linkEl);
   };
 
@@ -575,7 +580,7 @@ function lineDependencyInjector(
     `<link <%= attribs %> href="<%- href %>" rel="stylesheet" />`,
   );
   const rawLinkTemplate = ld.template(
-    `<link href="<%- href %>" rel="<%- rel %>"<% if (type) { %> type="<%- type %>"<% } %> />`,
+    `<link href="<%- href %>" rel="<%- rel %>"<% if (type) { %> type="<%- type %>"<% } %><% if (media) { %> media="<%- media %>"<% } %> />`,
   );
 
   const inject = (content: string, afterBody?: boolean) => {
@@ -625,6 +630,7 @@ function lineDependencyInjector(
     href: string,
     rel: string,
     type?: string,
+    media?: string,
   ) => {
     if (!type) {
       type = "";

src/config/types.ts

@@ -269,7 +269,7 @@ export interface FormatDependency {
   version?: string;
   external?: boolean;
   meta?: Record<string, string>;
-  links?: { rel: string; href: string; type?: string }[];
+  links?: { rel: string; href: string; type?: string; media?: string }[];
   scripts?: DependencyHtmlFile[];
   stylesheets?: DependencyHtmlFile[];
   serviceworkers?: DependencyServiceWorker[];

src/project/types/website/website.ts

@@ -19,6 +19,7 @@ import {
 import { ProjectCreate, ProjectOutputFile, ProjectType } from "../types.ts";
 import {
   Format,
+  FormatDependency,
   FormatExtras,
   kDependencies,
   kHtmlFinalizers,
@@ -179,25 +180,42 @@ export const websiteProjectType: ProjectType = {
     }
 
     // dependency for favicon if we have one
-    let favicon = websiteConfigString(kSiteFavicon, project.config);
-    if (!favicon) {
+    let faviconLight = websiteConfigString(kSiteFavicon, project.config);
+    let faviconDark = undefined; // until schema upgrade
+    if (!faviconLight) {
       const brand = await project.resolveBrand();
       if (brand?.light) {
-        favicon = getFavicon(brand.light);
+        faviconLight = getFavicon(brand.light);
+      }
+      if (brand?.dark) {
+        faviconDark = getFavicon(brand.dark);
       }
     }
-    if (favicon) {
+    if (faviconLight || faviconDark) {
       const offset = projectOffset(project, source);
       extras.html = extras.html || {};
       extras.html.dependencies = extras.html.dependencies || [];
-      extras.html.dependencies.push({
+      const faviconDep: FormatDependency = {
         name: kSiteFavicon,
-        links: [{
+        links: [],
+      };
+      if (faviconDark) {
+        faviconDep.links!.push({
           rel: "icon",
-          href: offset + "/" + favicon,
-          type: contentType(favicon),
-        }],
-      });
+          href: offset + "/" + faviconDark,
+          type: contentType(faviconDark),
+          media: "(prefers-color-scheme:dark)",
+        });
+      }
+      if (faviconLight) {
+        faviconDep.links!.push({
+          rel: "icon",
+          href: offset + "/" + faviconLight,
+          type: contentType(faviconLight),
+          media: "(prefers-color-scheme:light)",
+        });
+      }
+      extras.html.dependencies.push(faviconDep);
     }
 
     // pagetitle for home page if it has no title

tests/docs/smoke-all/brand/logo/brand-icon-small-favicon-book/index.qmd

@@ -2,8 +2,8 @@
 _quarto:
   tests:
     html:
-      ensureFileRegexMatches:
-        - ['<link href="./logos/small.png" rel="icon" type="image/png">']
+      ensureHtmlElements:
+        - ['link[href="./logos/small.png"][rel="icon"][type="image/png"]']
         - []
 ---
 

tests/docs/smoke-all/brand/logo/favicon/.gitignore

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

tests/docs/smoke-all/brand/logo/favicon/_brand.yml

@@ -0,0 +1,11 @@
+color:
+  background:
+    light: "#fff"
+    dark: "#111"
+  foreground:
+    light: "#111"
+    dark: "#fff"
+logo:
+  small:
+    light: sun-face.png
+    dark: moon-face.png

tests/docs/smoke-all/brand/logo/favicon/_quarto.yml

@@ -0,0 +1,2 @@
+project:
+  type: website

tests/docs/smoke-all/brand/logo/favicon/index.qmd

@@ -0,0 +1,22 @@
+---
+brand:
+  color:
+    background:
+      light: "#fff"
+      dark: "#111"
+    foreground:
+      light: "#111"
+      dark: "#fff"
+  logo:
+    small:
+      light: sun-face.png
+      dark: moon-face.png
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        -
+          - 'link[rel="icon"][href="./sun-face.png"][media="(prefers-color-scheme:light)"]'
+          - 'link[rel="icon"][href="./moon-face.png"][media="(prefers-color-scheme:dark)"]'
+        - []
+---

tests/docs/smoke-all/brand/logo/navbar/favicon/_brand.yml

@@ -0,0 +1,11 @@
+color:
+  background:
+    light: "#fff"
+    dark: "#111"
+  foreground:
+    light: "#111"
+    dark: "#fff"
+logo:
+  small:
+    light: sun-face.png
+    dark: moon-face.png

tests/docs/smoke-all/brand/logo/navbar/favicon/_quarto.yml

@@ -0,0 +1,12 @@
+project:
+  type: website
+theme:
+  light: brand
+  dark: [brand, dark-fixups.scss]
+website:
+  navbar:
+    style: "docked"
+    search: true
+    contents:
+      - index.qmd
+      - conclusion.qmd