Skip to content

Commit cf69f72

Browse files
gordonwoodhullgordonwoodhull
committed
set visual toggle once page is loaded
also, exhaustively test visual toggle
1 parent 7aa9dba commit cf69f72

File tree

4 files changed

+57
-15
lines changed

4 files changed

+57
-15
lines changed

‎src/resources/formats/html/templates/quarto-html-after-body.ejs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
2323
window.document.body.appendChild(a);
2424
}
25-
25+
window.setColorSchemeToggle(window.hasAlternateSentinel())
26+
2627
<% } %>
2728
2829
<% if (tabby) { %>

‎src/resources/formats/html/templates/quarto-html-before-body.ejs

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,20 @@
2121
}
2222
}
2323
24+
window.setColorSchemeToggle = (alternate) => {
25+
const toggles = window.document.querySelectorAll('.quarto-color-scheme-toggle');
26+
for (let i=0; i < toggles.length; i++) {
27+
const toggle = toggles[i];
28+
if (toggle) {
29+
if (alternate) {
30+
toggle.classList.add("alternate");
31+
} else {
32+
toggle.classList.remove("alternate");
33+
}
34+
}
35+
}
36+
};
37+
2438
const toggleColorMode = (alternate) => {
2539
// Switch the stylesheets
2640
const primaryStylesheets = window.document.querySelectorAll('link.quarto-color-scheme:not(.quarto-color-alternate)');
@@ -42,17 +56,7 @@
4256
manageTransitions('#quarto-margin-sidebar .nav-link', true);
4357
4458
// Switch the toggles
45-
const toggles = window.document.querySelectorAll('.quarto-color-scheme-toggle');
46-
for (let i=0; i < toggles.length; i++) {
47-
const toggle = toggles[i];
48-
if (toggle) {
49-
if (alternate) {
50-
toggle.classList.add("alternate");
51-
} else {
52-
toggle.classList.remove("alternate");
53-
}
54-
}
55-
}
59+
window.setColorSchemeToggle(alternate)
5660
5761
// Hack to workaround the fact that safari doesn't
5862
// properly recolor the scrollbar when toggling (#1455)
@@ -99,7 +103,7 @@
99103
return window.location.protocol === 'file:';
100104
}
101105
102-
const hasAlternateSentinel = () => {
106+
window.hasAlternateSentinel = () => {
103107
let styleSentinel = getColorSchemeSentinel();
104108
if (styleSentinel !== null) {
105109
return styleSentinel === "alternate";
@@ -172,7 +176,7 @@
172176
// Dark / light mode switch
173177
window.quartoToggleColorScheme = () => {
174178
// Read the current dark / light value
175-
let toAlternate = !hasAlternateSentinel();
179+
let toAlternate = !window.hasAlternateSentinel();
176180
toggleColorMode(toAlternate);
177181
setStyleSentinel(toAlternate);
178182
toggleGiscusIfUsed(toAlternate, darkModeDefault);
@@ -187,7 +191,7 @@
187191
<% } %>
188192
189193
// Switch to dark mode if need be
190-
if (hasAlternateSentinel()) {
194+
if (window.hasAlternateSentinel()) {
191195
toggleColorMode(true);
192196
} else {
193197
toggleColorMode(false);

‎tests/integration/playwright/tests/html-dark-mode-defaultdark.spec.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ async function check_backgrounds(page, class_, primary, secondary) {
1515
await expect(locatr2).toHaveCSS('background-color', secondary);
1616
}
1717

18+
async function check_toggle(page, alternate) {
19+
const locatr = await page.locator("a.quarto-color-scheme-toggle");
20+
await expect(locatr).toHaveClass(`top-right quarto-color-scheme-toggle${alternate?" alternate":""}`)
21+
}
22+
1823
test.use({
1924
colorScheme: 'dark'
2025
});
@@ -27,46 +32,58 @@ const red = 'rgb(66, 7, 11)';
2732
test('Dark and light brand after user themes', async ({ page }) => {
2833
// brand overrides theme background color
2934
await page.goto('./html/dark-brand/brand-after-theme.html');
35+
await check_toggle(page, true);
3036
await check_backgrounds(page, 'quarto-dark', red, blue);
37+
await check_toggle(page, false);
3138
});
3239

3340
// project tests
3441

3542
test('Project specifies light and dark brands', async ({ page }) => {
3643
await page.goto('./html/dark-brand/project-light/simple.html');
44+
await check_toggle(page, false);
3745
await check_backgrounds(page, 'quarto-light', blue, red);
46+
await check_toggle(page, true);
3847
});
3948

4049

4150
test('Project specifies dark and light brands', async ({ page }) => {
4251
await page.goto('./html/dark-brand/project-dark/simple.html');
52+
await check_toggle(page, true);
4353
await check_backgrounds(page, 'quarto-dark', red, blue);
54+
await check_toggle(page, false);
4455
});
4556

4657

4758
test('Project specifies light and dark brands and respect-user-color-scheme', async ({ page }) => {
4859
await page.goto('./html/dark-brand/project-light/simple-respect-color-scheme.html');
60+
await check_toggle(page, true);
4961
await check_backgrounds(page, 'quarto-dark', red, blue);
62+
await check_toggle(page, false);
5063
});
5164

5265
test('Project specifies light and dark brands, dynamic respect-user-color-scheme', async ({ page }) => {
5366
await page.goto('./html/dark-brand/project-light/simple-respect-color-scheme.html');
5467
const locatr = await page.locator('body').first();
5568
await expect(locatr).toHaveClass(`fullcontent quarto-dark`);
5669
await expect(locatr).toHaveCSS('background-color', red);
70+
await check_toggle(page, true);
5771

5872
await page.emulateMedia({ colorScheme: 'light' });
5973
await expect(locatr).toHaveClass(`fullcontent quarto-light`);
6074
await expect(locatr).toHaveCSS('background-color', blue);
75+
await check_toggle(page, false);
6176
});
6277

6378
test('Project specifies dark and light brands, dynamic respect-user-color-scheme', async ({ page }) => {
6479
await page.goto('./html/dark-brand/project-dark/simple-respect-color-scheme.html');
6580
const locatr = await page.locator('body').first();
6681
await expect(locatr).toHaveClass(`fullcontent quarto-dark`);
6782
await expect(locatr).toHaveCSS('background-color', red);
83+
await check_toggle(page, true);
6884

6985
await page.emulateMedia({ colorScheme: 'light' });
7086
await expect(locatr).toHaveClass(`fullcontent quarto-light`);
7187
await expect(locatr).toHaveCSS('background-color', blue);
88+
await check_toggle(page, false);
7289
});

‎tests/integration/playwright/tests/html-dark-mode-defaultlight.spec.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ async function check_backgrounds(page, class_, primary, secondary) {
99
await expect(locatr2).toHaveCSS('background-color', secondary);
1010
}
1111

12+
13+
async function check_toggle(page, alternate) {
14+
const locatr = await page.locator("a.quarto-color-scheme-toggle");
15+
await expect(locatr).toHaveClass(`top-right quarto-color-scheme-toggle${alternate?" alternate":""}`)
16+
}
17+
1218
test.use({
1319
colorScheme: 'light'
1420
});
@@ -21,31 +27,41 @@ const red = 'rgb(66, 7, 11)';
2127
test('Dark and light brand after user themes', async ({ page }) => {
2228
// brand overrides theme background color
2329
await page.goto('./html/dark-brand/brand-after-theme.html');
30+
await check_toggle(page, true);
2431
await check_backgrounds(page, 'quarto-dark', red, blue);
32+
await check_toggle(page, false);
2533
});
2634

2735
// project tests
2836

2937
test('Project specifies light and dark brands', async ({ page }) => {
3038
await page.goto('./html/dark-brand/project-light/simple.html');
39+
await check_toggle(page, false);
3140
await check_backgrounds(page, 'quarto-light', blue, red);
41+
await check_toggle(page, true);
3242
});
3343

3444

3545
test('Project specifies dark and light brands', async ({ page }) => {
3646
await page.goto('./html/dark-brand/project-dark/simple.html');
47+
await check_toggle(page, true);
3748
await check_backgrounds(page, 'quarto-dark', red, blue);
49+
await check_toggle(page, false);
3850
});
3951

4052

4153
test('Project specifies light and dark brands and respect-user-color-scheme', async ({ page }) => {
4254
await page.goto('./html/dark-brand/project-light/simple-respect-color-scheme.html');
55+
await check_toggle(page, false);
4356
await check_backgrounds(page, 'quarto-light', blue, red);
57+
await check_toggle(page, true);
4458
});
4559

4660
test('Project specifies dark and light brands and respect-user-color-scheme', async ({ page }) => {
4761
await page.goto('./html/dark-brand/project-dark/simple-respect-color-scheme.html');
62+
await check_toggle(page, false);
4863
await check_backgrounds(page, 'quarto-light', blue, red);
64+
await check_toggle(page, true);
4965
});
5066

5167

@@ -54,19 +70,23 @@ test('Project specifies light and dark brands, dynamic respect-user-color-scheme
5470
const locatr = await page.locator('body').first();
5571
await expect(locatr).toHaveClass(`fullcontent quarto-light`);
5672
await expect(locatr).toHaveCSS('background-color', blue);
73+
await check_toggle(page, false);
5774

5875
await page.emulateMedia({ colorScheme: 'dark' });
5976
await expect(locatr).toHaveClass(`fullcontent quarto-dark`);
6077
await expect(locatr).toHaveCSS('background-color', red);
78+
await check_toggle(page, true);
6179
});
6280

6381
test('Project specifies dark and light brands, dynamic respect-user-color-scheme', async ({ page }) => {
6482
await page.goto('./html/dark-brand/project-dark/simple-respect-color-scheme.html');
6583
const locatr = await page.locator('body').first();
6684
await expect(locatr).toHaveClass(`fullcontent quarto-light`);
6785
await expect(locatr).toHaveCSS('background-color', blue);
86+
await check_toggle(page, false);
6887

6988
await page.emulateMedia({ colorScheme: 'dark' });
7089
await expect(locatr).toHaveClass(`fullcontent quarto-dark`);
7190
await expect(locatr).toHaveCSS('background-color', red);
91+
await check_toggle(page, true);
7292
});

0 commit comments

Comments
 (0)