feature: dark brand

enable dark brand in brand sass bundles; do not exempt brand when creating dark sass bundles

enable toggling when brand is multi and includes dark
(as previously for theme)

Author: gordonwoodhull

src/command/render/pandoc-html.ts

@@ -114,9 +114,9 @@ export async function resolveSassBundles(
     }
 
     // See if any bundles are providing dark specific css
-    const hasDark = bundles.some((bundle) => bundle.dark !== undefined);
+    const hasDark = bundlesWithBrand.some((bundle) => bundle.dark !== undefined);
     defaultStyle =
-      bundles.some((bundle) => bundle.dark !== undefined && bundle.dark.default)
+      bundlesWithBrand.some((bundle) => bundle.dark !== undefined && bundle.dark.default)
         ? "dark"
         : "light";
     const targets: SassTarget[] = [{
@@ -134,7 +134,7 @@ export async function resolveSassBundles(
       };
 
       // Provide a dark bundle for this
-      const darkBundles = bundles.map((bundle) => {
+      const darkBundles = bundlesWithBrand.map((bundle) => {
         bundle = cloneDeep(bundle);
         bundle.user = bundle.dark?.user || bundle.user;
         bundle.quarto = bundle.dark?.quarto || bundle.quarto;

src/command/render/pandoc.ts

@@ -1467,7 +1467,7 @@ async function resolveExtras(
 
   // perform typst-specific merging
   if (isTypstOutput(format.pandoc)) {
-    const brand = await project.resolveBrand(input);
+    const brand = (await project.resolveBrand(input))?.light;
     const fontdirs: Set<string> = new Set();
     const base_urls = {
       google: "https://fonts.googleapis.com/css",

src/command/render/render-contexts.ts

@@ -614,11 +614,11 @@ async function resolveFormats(
 
     // resolve brand in project and forward it to format
     const brand = await project.resolveBrand(target.source);
-    mergedFormats[format].render.brand = brand;
+    mergedFormats[format].render.brand = brand?.light;
 
     // apply defaults from brand yaml under the metadata of the current format
     const brandFormatDefaults: Metadata =
-      (brand?.data?.defaults?.quarto as unknown as Record<
+      (brand?.light?.data?.defaults?.quarto as unknown as Record<
         string,
         Record<string, Metadata>
       >)?.format

src/core/brand/brand.ts

@@ -284,6 +284,11 @@ export class Brand {
   }
 }
 
+export type LightDarkBrand = {
+  light?: Brand;
+  dark?: Brand;
+};
+
 export const getFavicon = (brand: Brand): string | undefined => {
   const logoInfo = brand.getLogo("small");
   if (!logoInfo) {

src/core/sass/brand.ts

@@ -22,6 +22,10 @@ import {
   BrandFontWeight,
 } from "../../resources/types/schema-types.ts";
 import { Brand } from "../brand/brand.ts";
+import {
+  darkModeDefault,
+} from "../../format/html/format-html-info.ts";
+
 
 const defaultColorNameMap: Record<string, string> = {
   "link-color": "link",
@@ -75,7 +79,10 @@ export async function brandBootstrapSassBundles(
   return [{
     key,
     dependency: "bootstrap",
-    user: layers,
+    user: layers.light,
+    dark: {
+      user: layers.dark
+    }
   }];
 }
 
@@ -559,29 +566,42 @@ const brandTypographyLayer = (
   };
 };
 
+export interface LightDarkSassLayers {
+  light: SassLayer[];
+  dark: SassLayer[];
+}
+
 export async function brandSassLayers(
   fileName: string | undefined,
   project: ProjectContext,
   nameMap: Record<string, string> = {},
-): Promise<SassLayer[]> {
+): Promise<LightDarkSassLayers> {
   const brand = await project.resolveBrand(fileName);
-  const sassLayers: SassLayer[] = [];
+  const sassLayers: LightDarkSassLayers = {
+    light: [],
+    dark: []
+  };
 
-  if (brand) {
-    sassLayers.push({
+  for (const layer of [sassLayers.light, sassLayers.dark]) {
+    layer.push({
       defaults: '$theme: "brand" !default;',
       uses: "",
       functions: "",
       mixins: "",
       rules: "",
     });
   }
-  if (brand?.data.color) {
-    sassLayers.push(brandColorLayer(brand, nameMap));
+  if (brand?.light?.data.color) {
+    sassLayers.light.push(brandColorLayer(brand?.light, nameMap));
   }
-
-  if (brand?.data.typography) {
-    sassLayers.push(brandTypographyLayer(brand));
+  if (brand?.dark?.data.color) {
+    sassLayers.dark.push(brandColorLayer(brand?.dark, nameMap));
+  }
+  if (brand?.light?.data.typography) {
+    sassLayers.light.push(brandTypographyLayer(brand?.light));
+  }
+  if (brand?.dark?.data.typography) {
+    sassLayers.dark.push(brandTypographyLayer(brand?.dark));
   }
 
   return sassLayers;
@@ -591,16 +611,19 @@ export async function brandBootstrapSassLayers(
   fileName: string | undefined,
   project: ProjectContext,
   nameMap: Record<string, string> = {},
-): Promise<SassLayer[]> {
+): Promise<LightDarkSassLayers> {
   const layers = await brandSassLayers(
     fileName,
     project,
     nameMap,
   );
 
   const brand = await project.resolveBrand(fileName);
-  if (brand?.data?.defaults?.bootstrap) {
-    layers.unshift(brandDefaultsBootstrapLayer(brand));
+  if (brand?.light?.data?.defaults?.bootstrap) {
+    layers.light.unshift(brandDefaultsBootstrapLayer(brand.light));
+  }
+  if (brand?.dark?.data?.defaults?.bootstrap) {
+    layers.dark.unshift(brandDefaultsBootstrapLayer(brand.dark));
   }
 
   return layers;
@@ -611,16 +634,16 @@ export async function brandRevealSassLayers(
   _format: Format,
   project: ProjectContext,
 ): Promise<SassLayer[]> {
-  return brandSassLayers(
+  return (await brandSassLayers(
     input,
     project,
     defaultColorNameMap,
-  );
+  )).light;
 }
 
 export async function brandSassFormatExtras(
   input: string | undefined,
-  _format: Format,
+  format: Format,
   project: ProjectContext,
 ): Promise<FormatExtras> {
   const htmlSassBundleLayers = await brandBootstrapSassLayers(
@@ -634,7 +657,11 @@ export async function brandSassFormatExtras(
         {
           key: "brand",
           dependency: "bootstrap",
-          user: htmlSassBundleLayers,
+          user: htmlSassBundleLayers.light,
+          dark: {
+            user: htmlSassBundleLayers.dark,
+            default: darkModeDefault(format.metadata)
+          }
         },
       ],
     },

src/format/html/format-html-bootstrap.ts

@@ -78,6 +78,10 @@ import {
   documentTitleScssLayer,
   processDocumentTitle,
 } from "./format-html-title.ts";
+import {
+  darkModeDefault,
+} from "./format-html-info.ts";
+
 import { kTemplatePartials } from "../../command/render/template.ts";
 import { isHtmlOutput } from "../../config/format.ts";
 import { emplaceNotebookPreviews } from "./format-html-notebook.ts";
@@ -1062,13 +1066,8 @@ function bootstrapHtmlFinalizer(format: Format, flags: PandocFlags) {
 
     // start body with light or dark class for proper display when JS is disabled
     let initialLightDarkClass = "quarto-light";
-    // some logic duplicated from resolveThemeLayer
-    const theme = format.metadata.theme;
-    if (theme && !Array.isArray(theme) && typeof theme === "object") {
-      const keys = Object.keys(theme);
-      if(keys.length > 1 && keys[0] === "dark") {
-        initialLightDarkClass = "quarto-dark";
-      }
+    if (darkModeDefault(format.metadata)) {
+      initialLightDarkClass = "quarto-dark";
     }
     doc.body.classList.add(initialLightDarkClass);
 

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

@@ -6,7 +6,7 @@
  * Copyright (C) 2020-2022 Posit Software, PBC
  */
 
-import { kTheme } from "../../config/constants.ts";
+import { kTheme, kBrand } from "../../config/constants.ts";
 import { isHtmlDashboardOutput, isHtmlOutput } from "../../config/format.ts";
 import { Format, Metadata } from "../../config/types.ts";
 
@@ -40,14 +40,15 @@ export function formatDarkMode(format: Format): boolean | undefined {
 
 export function darkModeDefault(metadata?: Metadata): boolean | undefined {
   if (metadata !== undefined) {
-    const theme = metadata[kTheme];
-    if (theme && typeof (theme) === "object") {
-      const keys = Object.keys(theme);
-      if (keys.includes("dark")) {
-        if (keys[0] === "dark") {
-          return true;
-        } else {
-          return false;
+    for (const darkable of [metadata[kTheme], metadata[kBrand]]) {
+      if (darkable && typeof (darkable) === "object") {
+        const keys = Object.keys(darkable);
+        if (keys.includes("dark")) {
+          if (keys[0] === "dark") {
+            return true;
+          } else {
+            return false;
+          }
         }
       }
     }

src/project/project-shared.ts

@@ -48,7 +48,7 @@ import { DirectiveCell } from "../core/lib/break-quarto-md-types.ts";
 import { QuartoJSONSchema, readYamlFromMarkdown } from "../core/yaml.ts";
 import { refSchema } from "../core/lib/yaml-schema/common.ts";
 import { Brand as BrandJson } from "../resources/types/schema-types.ts";
-import { Brand } from "../core/brand/brand.ts";
+import { Brand, LightDarkBrand } from "../core/brand/brand.ts";
 import { warnOnce } from "../core/log.ts";
 import { assert } from "testing/asserts";
 
@@ -512,7 +512,24 @@ export const ensureFileInformationCache = (
 export async function projectResolveBrand(
   project: ProjectContext,
   fileName?: string,
-) {
+) : Promise<{light?: Brand, dark?: Brand} | undefined> {
+  async function loadBrand(brandPath: string) : Promise<Brand> {
+    const brand = await readAndValidateYamlFromFile(
+      brandPath,
+      refSchema("brand", "Format-independent brand configuration."),
+      "Brand validation failed for " + brandPath + ".",
+    ) as BrandJson;
+    return new Brand(brand, dirname(brandPath), project.dir);
+  }
+  async function loadLocalBrand(brandPath: string) : Promise<Brand> {
+    let resolved: string = "";
+    if (brandPath.startsWith("/")) {
+      resolved = join(project.dir, brandPath);
+    } else {
+      resolved = join(dirname(fileName!), brandPath);
+    }
+    return await loadBrand(resolved);
+  }
   if (fileName === undefined) {
     if (project.brandCache) {
       return project.brandCache.brand;
@@ -538,46 +555,60 @@ export async function projectResolveBrand(
         refSchema("brand", "Format-independent brand configuration."),
         "Brand validation failed for " + brandPath + ".",
       ) as BrandJson;
-      project.brandCache.brand = new Brand(
+      project.brandCache.brand = {light: new Brand(
         brand,
         dirname(brandPath),
         project.dir,
-      );
+      )};
     }
     return project.brandCache.brand;
   } else {
     const metadata = await project.fileMetadata(fileName);
     if (metadata.brand === false) {
       return undefined;
     }
-    if (metadata.brand === true || metadata.brand === undefined) {
+    if (metadata.brand === true || metadata.brand === undefined || metadata.brand === null) {
       return project.resolveBrand();
     }
     const fileInformation = ensureFileInformationCache(project, fileName);
     if (fileInformation.brand) {
       return fileInformation.brand;
     }
     if (typeof metadata.brand === "string") {
-      let brandPath: string = "";
-      if (brandPath.startsWith("/")) {
-        brandPath = join(project.dir, metadata.brand);
-      } else {
-        brandPath = join(dirname(fileName), metadata.brand);
-      }
-      const brand = await readAndValidateYamlFromFile(
-        brandPath,
-        refSchema("brand", "Format-independent brand configuration."),
-        "Brand validation failed for " + brandPath + ".",
-      ) as BrandJson;
-      fileInformation.brand = new Brand(brand, dirname(brandPath), project.dir);
+      fileInformation.brand = {light: await loadLocalBrand(metadata.brand)};
       return fileInformation.brand;
     } else {
       assert(typeof metadata.brand === "object");
-      fileInformation.brand = new Brand(
-        metadata.brand as BrandJson,
-        dirname(fileName),
-        project.dir,
-      );
+      if ((metadata.brand as LightDarkBrand).light || (metadata.brand as LightDarkBrand).dark) {
+        let light;
+        let ldb = metadata.brand as LightDarkBrand;
+        if (typeof ldb.light === "string") {
+          light = await loadLocalBrand(ldb.light)
+        } else {
+          light = new Brand(
+            ldb.light as BrandJson,
+            dirname(fileName),
+            project.dir
+          );
+        }
+        let dark;
+        if (typeof ldb.dark === "string") {
+          dark = await loadLocalBrand(ldb.dark)
+        } else {
+          dark = new Brand(
+            ldb.dark as BrandJson,
+            dirname(fileName),
+            project.dir
+          );
+        }
+        fileInformation.brand = {light, dark};
+      } else {
+        fileInformation.brand = {light: new Brand(
+          metadata.brand as BrandJson,
+          dirname(fileName),
+          project.dir,
+        )};
+      }
       return fileInformation.brand;
     }
   }

src/project/types.ts

@@ -7,7 +7,7 @@
 import { RenderServices } from "../command/render/types.ts";
 import { Metadata, PandocFlags } from "../config/types.ts";
 import { Format, FormatExtras } from "../config/types.ts";
-import { Brand } from "../core/brand/brand.ts";
+import { Brand, LightDarkBrand } 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";
@@ -56,7 +56,7 @@ export type FileInformation = {
   engine?: ExecutionEngine;
   target?: ExecutionTarget;
   metadata?: Metadata;
-  brand?: Brand;
+  brand?: LightDarkBrand;
 };
 
 export interface ProjectContext {
@@ -70,8 +70,8 @@ export interface ProjectContext {
   fileInformationCache: Map<string, FileInformation>;
 
   // This is a cache of _brand.yml for a project
-  brandCache?: { brand?: Brand };
-  resolveBrand: (fileName?: string) => Promise<Brand | undefined>;
+  brandCache?: { brand?: LightDarkBrand};
+  resolveBrand: (fileName?: string) => Promise<undefined | {light?: Brand | undefined, dark?: Brand | undefined}>;
 
   // expands markdown for a file
   // input file doesn't have to be markdown; it can be, for example, a knitr spin file