dark logo: navbar

Author: gordonwoodhull

src/project/types/website/website-navigation.ts

@@ -1015,13 +1015,15 @@ async function sidebarEjsData(project: ProjectContext, sidebar: Sidebar) {
 
   // ensure title and search are present
   sidebar.title = await sidebarTitle(sidebar, project) as string | undefined;
-  // sidebar logo has been normalized
-  const sidebarLogo = sidebar.logo as NormalizedLogoLightDarkSpecifier;
-  if (sidebarLogo.light) {
-    sidebarLogo.light.path = resolveLogo(sidebarLogo.light.path)!;
-  }
-  if (sidebarLogo.dark) {
-    sidebarLogo.dark.path = resolveLogo(sidebarLogo.dark.path)!;
+  if (sidebar.logo) {
+    // sidebar logo has been normalized
+    const sidebarLogo = sidebar.logo as NormalizedLogoLightDarkSpecifier;
+    if (sidebarLogo.light) {
+      sidebarLogo.light.path = resolveLogo(sidebarLogo.light.path)!;
+    }
+    if (sidebarLogo.dark) {
+      sidebarLogo.dark.path = resolveLogo(sidebarLogo.dark.path)!;
+    }
   }
   const searchOpts = await searchOptions(project);
   sidebar.search = sidebar.search !== undefined
@@ -1257,6 +1259,7 @@ async function navbarEjsData(
     pinned: navbar.pinned !== undefined ? !!navbar.pinned : false,
   };
   if (data.logo) {
+    console.log("navbar logo", navbar.logo);
     // navbar logo has been normalized
     const navbarLogo = navbar.logo as NormalizedLogoLightDarkSpecifier;
     if (navbarLogo.light) {

src/project/types/website/website-shared.ts

@@ -135,6 +135,8 @@ export async function websiteNavigationConfig(project: ProjectContext) {
         logo = { path: logo, alt: navbar[kLogoAlt] };
       }
     }
+
+    // note no document-level customization of brand logo #11309
     const brand = await projectResolveBrand(project);
     navbar.logo = await normalizeLogoSpec(brand, logo);
   }
@@ -162,7 +164,6 @@ export async function websiteNavigationConfig(project: ProjectContext) {
     }
 
     if (sidebars[0].logo) {
-      // note no document-level customization of brand logo #11309
       let logo = sidebars[0].logo;
       if (sidebars[0][kLogoAlt]) {
         const alt = sidebars[0][kLogoAlt];
@@ -189,6 +190,7 @@ export async function websiteNavigationConfig(project: ProjectContext) {
         //   };
         // }
       }
+      // note no document-level customization of brand logo #11309
       const brand = await projectResolveBrand(project);
       sidebars[0].logo = await normalizeLogoSpec(brand, logo);
     }
@@ -234,17 +236,19 @@ export async function websiteNavigationConfig(project: ProjectContext) {
   if (
     projectBrand?.light?.processedData.logo && navbar
   ) {
-    const light = projectBrand.light.processedData.logo.small ??
-      projectBrand.light.processedData.logo.medium ??
-      projectBrand.light.processedData.logo.large;
-    const dark = projectBrand.dark?.processedData.logo.small ??
-      projectBrand.dark?.processedData.logo.medium ??
-      projectBrand.dark?.processedData.logo.large;
-    if (light || dark) {
-      navbar.logo = {
-        light,
-        dark,
-      };
+    if (navbar.logo === undefined) {
+      const light = projectBrand.light.processedData.logo.small ??
+        projectBrand.light.processedData.logo.medium ??
+        projectBrand.light.processedData.logo.large;
+      const dark = projectBrand.dark?.processedData.logo.small ??
+        projectBrand.dark?.processedData.logo.medium ??
+        projectBrand.dark?.processedData.logo.large;
+      if (light || dark) {
+        navbar.logo = {
+          light,
+          dark,
+        };
+      }
     }
   }
 

tests/docs/smoke-all/brand/logo/navbar/brand-default/dark-fixups.scss

@@ -1,5 +1,9 @@
 /*-- scss:rules --*/
 
 nav.sidebar.sidebar-navigation:not(.rollup) {
-  background-color: #282B30;
-}
+  background-color: #282b30;
+}
+
+nav.navbar {
+  background-color: rgba(13, 108, 251, 25%);
+}

tests/docs/smoke-all/brand/logo/navbar/brand-override-alt/dark-fixups.scss

@@ -1,5 +1,9 @@
 /*-- scss:rules --*/
 
 nav.sidebar.sidebar-navigation:not(.rollup) {
-  background-color: #282B30;
-}
+  background-color: #282b30;
+}
+
+nav.navbar {
+  background-color: rgba(13, 108, 251, 25%);
+}

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

@@ -8,8 +8,8 @@ website:
     id: navbar-id
     style: "docked"
     logo:
-      light: moon
-      dark: sun
+      light: { path: moon }
+      dark: { path: sun, alt: "SUN FACE" }
     search: true
     contents:
       - index.qmd

tests/docs/smoke-all/brand/logo/navbar/brand-override-resources/dark-fixups.scss

@@ -1,5 +1,9 @@
 /*-- scss:rules --*/
 
 nav.sidebar.sidebar-navigation:not(.rollup) {
-  background-color: #282B30;
-}
+  background-color: #282b30;
+}
+
+nav.navbar {
+  background-color: rgba(13, 108, 251, 25%);
+}

tests/docs/smoke-all/brand/logo/navbar/brand-override-resources/index.qmd

@@ -5,7 +5,7 @@ _quarto:
     html:
       ensureHtmlElements:
         -
-          - 'img[class*="dark-content"][src="./sun-face.png"][alt=""]'
+          - 'img[class*="dark-content"][src="./sun-face.png"][alt="SUN FACE"]'
           - 'img[class*="light-content"][src="./moon-face.png"][alt=""]'
         - []
 ---

tests/docs/smoke-all/brand/logo/sidebar/brand-default/dark-fixups.scss

@@ -1,5 +1,9 @@
 /*-- scss:rules --*/
 
 nav.sidebar.sidebar-navigation:not(.rollup) {
-  background-color: #282B30;
-}
+  background-color: #282b30;
+}
+
+nav.navbar {
+  background-color: rgba(13, 108, 251, 25%);
+}

tests/docs/smoke-all/brand/logo/sidebar/brand-override-alt/dark-fixups.scss

@@ -1,5 +1,9 @@
 /*-- scss:rules --*/
 
 nav.sidebar.sidebar-navigation:not(.rollup) {
-  background-color: #282B30;
-}
+  background-color: #282b30;
+}
+
+nav.navbar {
+  background-color: rgba(13, 108, 251, 25%);
+}

tests/docs/smoke-all/brand/logo/sidebar/brand-override-resources/dark-fixups.scss

@@ -1,5 +1,9 @@
 /*-- scss:rules --*/
 
 nav.sidebar.sidebar-navigation:not(.rollup) {
-  background-color: #282B30;
-}
+  background-color: #282b30;
+}
+
+nav.navbar {
+  background-color: rgba(13, 108, 251, 25%);
+}