Skip to content

Commit 420c81b

Browse files
claude: Add cross-mode logo fallback tests
This commit adds tests for how Quarto handles edge cases when logos are missing for one theme mode but both light and dark modes are enabled: 1. dark-mode-no-dark-logo.qmd: Tests what happens when dark mode is enabled but only light logo exists 2. dark-mode-no-light-logo.qmd: Tests what happens when dark mode is enabled but only dark logo exists 3. document-light-brand-light-only.qmd: Tests document-level light-only logo + brand with light-only logo 4. document-dark-brand-dark-only.qmd: Tests document-level dark-only logo + brand with dark-only logo Key learnings: - Quarto implements cross-mode fallbacks where missing logos for one mode automatically use logos from the other mode - Implementation in brand.ts shows the fallback logic applies in both directions: light → dark and dark → light - Document-level logo settings take precedence over brand-level settings - The fallback system ensures logos always appear regardless of which theme mode is active, providing a consistent user experience
1 parent 27b5f40 commit 420c81b

File tree

4 files changed

+150
-0
lines changed

4 files changed

+150
-0
lines changed
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Dark Mode with No Dark Logo
3+
format:
4+
dashboard:
5+
theme:
6+
light: default
7+
dark: darkly # Explicitly enable dark mode
8+
brand:
9+
color:
10+
foreground:
11+
light: '#222'
12+
dark: '#eee'
13+
background:
14+
light: '#eee'
15+
dark: '#222'
16+
logo:
17+
images:
18+
light-logo:
19+
path: quarto.png
20+
alt: light logo
21+
medium:
22+
light: light-logo
23+
# No dark variant defined - what happens?
24+
_quarto:
25+
tests:
26+
dashboard:
27+
ensureHtmlElements:
28+
-
29+
# Light mode should use the light logo
30+
- 'img[src="quarto.png"][alt="light logo"][class="navbar-logo light-content d-inline-block"]'
31+
# For dark mode, should it use the light logo since no dark logo exists?
32+
- 'img[src="quarto.png"][alt="light logo"][class="navbar-logo dark-content d-inline-block"]'
33+
- []
34+
---
35+
36+
{{< lipsum 4 >}}
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Dark Mode with No Light Logo
3+
format:
4+
dashboard:
5+
theme:
6+
light: default
7+
dark: darkly # Explicitly enable dark mode
8+
brand:
9+
color:
10+
foreground:
11+
light: '#222'
12+
dark: '#eee'
13+
background:
14+
light: '#eee'
15+
dark: '#222'
16+
logo:
17+
images:
18+
dark-logo:
19+
path: posit-logo-2024.svg
20+
alt: dark logo
21+
medium:
22+
dark: dark-logo
23+
# No light variant defined - what happens?
24+
_quarto:
25+
tests:
26+
dashboard:
27+
ensureHtmlElements:
28+
-
29+
# Dark mode should use the dark logo
30+
- 'img[src="posit-logo-2024.svg"][alt="dark logo"][class="navbar-logo dark-content d-inline-block"]'
31+
# For light mode, should it use the dark logo since no light logo exists?
32+
- 'img[src="posit-logo-2024.svg"][alt="dark logo"][class="navbar-logo light-content d-inline-block"]'
33+
- []
34+
---
35+
36+
{{< lipsum 4 >}}
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: Document Dark Logo + Brand Dark Logo Only
3+
format:
4+
dashboard:
5+
theme:
6+
light: default
7+
dark: darkly # Explicitly enable dark mode
8+
# Document level logo with only dark defined
9+
logo:
10+
dark: direct-dark-logo.png
11+
brand:
12+
color:
13+
foreground:
14+
light: '#222'
15+
dark: '#eee'
16+
background:
17+
light: '#eee'
18+
dark: '#222'
19+
logo:
20+
images:
21+
brand-dark-logo:
22+
path: posit-logo-2024.svg
23+
alt: brand dark logo
24+
medium:
25+
dark: brand-dark-logo
26+
# No light variant defined in brand
27+
_quarto:
28+
tests:
29+
dashboard:
30+
ensureHtmlElements:
31+
-
32+
# Dark mode should use document-level dark logo (not brand)
33+
- 'img[src="direct-dark-logo.png"][alt=""][class="navbar-logo dark-content d-inline-block"]'
34+
# For light mode, should use same document-level dark logo for fallback
35+
- 'img[src="direct-dark-logo.png"][alt=""][class="navbar-logo light-content d-inline-block"]'
36+
- []
37+
---
38+
39+
{{< lipsum 4 >}}
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: Document Light Logo + Brand Light Logo Only
3+
format:
4+
dashboard:
5+
theme:
6+
light: default
7+
dark: darkly # Explicitly enable dark mode
8+
# Document level logo with only light defined
9+
logo:
10+
light: direct-light-logo.png
11+
brand:
12+
color:
13+
foreground:
14+
light: '#222'
15+
dark: '#eee'
16+
background:
17+
light: '#eee'
18+
dark: '#222'
19+
logo:
20+
images:
21+
brand-light-logo:
22+
path: quarto.png
23+
alt: brand light logo
24+
medium:
25+
light: brand-light-logo
26+
# No dark variant defined in brand
27+
_quarto:
28+
tests:
29+
dashboard:
30+
ensureHtmlElements:
31+
-
32+
# Light mode should use document-level light logo (not brand)
33+
- 'img[src="direct-light-logo.png"][alt=""][class="navbar-logo light-content d-inline-block"]'
34+
# For dark mode, should use same document-level light logo for fallback
35+
- 'img[src="direct-light-logo.png"][alt=""][class="navbar-logo dark-content d-inline-block"]'
36+
- []
37+
---
38+
39+
{{< lipsum 4 >}}

0 commit comments

Comments
 (0)