feat: add support for dark theme

BrightspaceUI · Jul 26, 2023 · d4f0c7d · d4f0c7d
1 parent b042d37
commit d4f0c7d
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 0 deletions.
diff --git a/src/browser/reset.js b/src/browser/reset.js
@@ -7,6 +7,7 @@ const DEFAULT_LANG = 'en',
 
 let currentLang = undefined,
 	currentRtl = false,
+	currentTheme = undefined,
 	currentViewportHeight = 0,
 	currentViewportWidth = 0,
 	shouldResetMouse = false;
@@ -54,6 +55,16 @@ export async function reset(opts) {
 		awaitNextFrame = true;
 	}
 
+	if (opts.theme !== currentTheme) {
+		if (opts.theme === 'dark') {
+			document.body.setAttribute('data-theme', 'dark');
+		} else {
+			document.body.removeAttribute('data-theme');
+		}
+		currentTheme = opts.theme;
+		awaitNextFrame = true;
+	}
+
 	if (opts.viewport.height !== currentViewportHeight || opts.viewport.width !== currentViewportWidth) {
 		await setViewport(opts.viewport).catch(() => {});
 		awaitNextFrame = true;

diff --git a/src/server/report/app.js b/src/server/report/app.js
@@ -49,13 +49,16 @@ class App extends LitElement {
 			border: 1px solid #cdd5dc;
 			padding: 10px;
 			text-align: center;
+			white-space: nowrap;
 		}
 		thead th {
 			background-color: #f5f5f5;
 		}
 		tbody th {
 			font-weight: normal;
 			text-align: left;
+			width: 100%;
+			white-space: normal;
 		}
 		td.passed {
 			background-color: #efffd9;

diff --git a/src/server/wtr-config.js b/src/server/wtr-config.js
@@ -95,6 +95,9 @@ export class WTRConfig {
 								line-height: 1.4rem;
 								padding: 30px;
 							}
+							body[data-theme="dark"] {
+								background-color: #000000;
+							}
 						</style>
 					</head>
 					<body>

diff --git a/test/browser/fixture.test.js b/test/browser/fixture.test.js
@@ -157,6 +157,19 @@ describe('fixture', () => {
 			expect(window.innerWidth).to.equal(800);
 		});
 
+		it('should use no theme by default', async() => {
+			await fixture(html`<p>hello</p>`);
+			expect(document.body.hasAttribute('data-theme')).to.be.false;
+		});
+
+		it('should reset theme', async() => {
+			const elem = html`<p>hello</p>`;
+			await fixture(elem, { theme: 'dark' });
+			expect(document.body.getAttribute('data-theme')).to.equal('dark');
+			await fixture(elem);
+			expect(document.body.hasAttribute('data-theme')).to.be.false;
+		});
+
 	});
 
 	describe('waitForElem', () => {

diff --git a/test/browser/theme.vdiff.js b/test/browser/theme.vdiff.js
@@ -0,0 +1,44 @@
+import { css, html, LitElement } from 'lit';
+import { defineCE, expect, fixture } from '../../src/browser/index.js';
+
+const themeTag = defineCE(
+	class extends LitElement {
+		static get properties() {
+			return {
+				theme: { reflect: true, type: String }
+			};
+		}
+		static get styles() {
+			return css`
+				:host {
+					border: 1px solid black;
+					display: inline-block;
+					text-align: center;
+					padding: 20px;
+				}
+				:host([theme="dark"]) {
+					border-color: white;
+					color: white;
+				}
+			`;
+		}
+		render() {
+			return html`Theme: ${this.theme}`;
+		}
+	}
+);
+
+describe('theme', () => {
+	[
+		'normal',
+		'dark'
+	].forEach(name => {
+		it(name, async() => {
+			const elem = await fixture(
+				`<${themeTag} theme="${name}"></${themeTag}>`,
+				{ theme: name === 'normal' ? undefined : name }
+			);
+			await expect(elem).to.be.golden();
+		});
+	});
+});