|
6 | 6 | applyDarkModeClass, |
7 | 7 | applyThemeVariables, |
8 | 8 | clearThemeVariables, |
| 9 | + STUDIO_DOCUMENT_THEME_ATTRIBUTE, |
9 | 10 | useTheme, |
10 | 11 | } from "./use-theme"; |
11 | 12 |
|
@@ -55,8 +56,10 @@ function renderThemeHarness(args: { |
55 | 56 |
|
56 | 57 | afterEach(() => { |
57 | 58 | document.body.innerHTML = ""; |
| 59 | + document.body.removeAttribute("style"); |
58 | 60 | document.documentElement.className = ""; |
59 | 61 | document.documentElement.removeAttribute("style"); |
| 62 | + document.documentElement.removeAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE); |
60 | 63 | }); |
61 | 64 |
|
62 | 65 | describe("theme helpers", () => { |
@@ -214,4 +217,178 @@ describe("useTheme", () => { |
214 | 217 | harness.cleanup(); |
215 | 218 | portalRoot.remove(); |
216 | 219 | }); |
| 220 | + |
| 221 | + it("syncs the resolved dark theme to the document root when the page background is unstyled", () => { |
| 222 | + const harness = renderThemeHarness({ |
| 223 | + isDarkMode: true, |
| 224 | + }); |
| 225 | + |
| 226 | + expect( |
| 227 | + document.documentElement.getAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 228 | + ).toBe("dark"); |
| 229 | + expect(document.documentElement.style.colorScheme).toBe("dark"); |
| 230 | + |
| 231 | + harness.cleanup(); |
| 232 | + }); |
| 233 | + |
| 234 | + it("paints the document background with Studio's resolved background variable", () => { |
| 235 | + const harness = renderThemeHarness({ |
| 236 | + customTheme: { |
| 237 | + dark: { |
| 238 | + "--background": "rgb(20, 20, 22)", |
| 239 | + }, |
| 240 | + light: { |
| 241 | + "--background": "rgb(250, 250, 250)", |
| 242 | + }, |
| 243 | + }, |
| 244 | + isDarkMode: true, |
| 245 | + }); |
| 246 | + |
| 247 | + expect(document.documentElement.style.backgroundColor).toBe( |
| 248 | + "rgb(20, 20, 22)", |
| 249 | + ); |
| 250 | + |
| 251 | + harness.cleanup(); |
| 252 | + }); |
| 253 | + |
| 254 | + it("keeps following theme changes after claiming the document", async () => { |
| 255 | + const container = createStudioRoot(); |
| 256 | + const root = createRoot(container); |
| 257 | + |
| 258 | + function Harness(props: { isDarkMode: boolean }) { |
| 259 | + useTheme(undefined, props.isDarkMode); |
| 260 | + return null; |
| 261 | + } |
| 262 | + |
| 263 | + act(() => { |
| 264 | + root.render(<Harness isDarkMode />); |
| 265 | + }); |
| 266 | + |
| 267 | + expect(document.documentElement.style.colorScheme).toBe("dark"); |
| 268 | + |
| 269 | + act(() => { |
| 270 | + root.render(<Harness isDarkMode={false} />); |
| 271 | + }); |
| 272 | + |
| 273 | + await flush(); |
| 274 | + |
| 275 | + expect( |
| 276 | + document.documentElement.getAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 277 | + ).toBe("light"); |
| 278 | + expect(document.documentElement.style.colorScheme).toBe("light"); |
| 279 | + |
| 280 | + act(() => { |
| 281 | + root.unmount(); |
| 282 | + }); |
| 283 | + container.remove(); |
| 284 | + }); |
| 285 | + |
| 286 | + it("leaves the document untouched when the host authored a page background", () => { |
| 287 | + document.body.style.background = "#ffffff"; |
| 288 | + |
| 289 | + const harness = renderThemeHarness({ |
| 290 | + isDarkMode: true, |
| 291 | + }); |
| 292 | + |
| 293 | + expect( |
| 294 | + document.documentElement.hasAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 295 | + ).toBe(false); |
| 296 | + expect(document.documentElement.style.colorScheme).toBe(""); |
| 297 | + expect(document.documentElement.style.backgroundColor).toBe(""); |
| 298 | + |
| 299 | + harness.cleanup(); |
| 300 | + }); |
| 301 | + |
| 302 | + it("releases the document when the host authors a background after mount", async () => { |
| 303 | + const harness = renderThemeHarness({ |
| 304 | + isDarkMode: true, |
| 305 | + }); |
| 306 | + |
| 307 | + expect( |
| 308 | + document.documentElement.getAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 309 | + ).toBe("dark"); |
| 310 | + |
| 311 | + // The host starts styling its page after Studio mounted. |
| 312 | + document.body.style.background = "#ffffff"; |
| 313 | + |
| 314 | + // Trigger a re-sync through the body mutation observer. |
| 315 | + const mutationProbe = document.createElement("div"); |
| 316 | + document.body.appendChild(mutationProbe); |
| 317 | + |
| 318 | + await flush(); |
| 319 | + |
| 320 | + expect( |
| 321 | + document.documentElement.hasAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 322 | + ).toBe(false); |
| 323 | + expect(document.documentElement.style.colorScheme).toBe(""); |
| 324 | + expect(document.documentElement.style.backgroundColor).toBe(""); |
| 325 | + |
| 326 | + harness.cleanup(); |
| 327 | + mutationProbe.remove(); |
| 328 | + }); |
| 329 | + |
| 330 | + it("keeps the document theme until the last Studio instance unmounts", () => { |
| 331 | + const firstHarness = renderThemeHarness({ |
| 332 | + isDarkMode: true, |
| 333 | + }); |
| 334 | + const secondHarness = renderThemeHarness({ |
| 335 | + isDarkMode: true, |
| 336 | + }); |
| 337 | + |
| 338 | + expect( |
| 339 | + document.documentElement.getAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 340 | + ).toBe("dark"); |
| 341 | + |
| 342 | + firstHarness.cleanup(); |
| 343 | + |
| 344 | + expect( |
| 345 | + document.documentElement.getAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 346 | + ).toBe("dark"); |
| 347 | + expect(document.documentElement.style.colorScheme).toBe("dark"); |
| 348 | + |
| 349 | + secondHarness.cleanup(); |
| 350 | + |
| 351 | + expect( |
| 352 | + document.documentElement.hasAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 353 | + ).toBe(false); |
| 354 | + expect(document.documentElement.style.colorScheme).toBe(""); |
| 355 | + }); |
| 356 | + |
| 357 | + it("restores a pre-existing host inline color-scheme on release", () => { |
| 358 | + document.documentElement.style.colorScheme = "light"; |
| 359 | + |
| 360 | + const harness = renderThemeHarness({ |
| 361 | + isDarkMode: true, |
| 362 | + }); |
| 363 | + |
| 364 | + expect( |
| 365 | + document.documentElement.getAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 366 | + ).toBe("dark"); |
| 367 | + expect(document.documentElement.style.colorScheme).toBe("dark"); |
| 368 | + |
| 369 | + harness.cleanup(); |
| 370 | + |
| 371 | + expect( |
| 372 | + document.documentElement.hasAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 373 | + ).toBe(false); |
| 374 | + expect(document.documentElement.style.colorScheme).toBe("light"); |
| 375 | + }); |
| 376 | + |
| 377 | + it("clears the document-level theme when Studio unmounts", () => { |
| 378 | + const harness = renderThemeHarness({ |
| 379 | + isDarkMode: true, |
| 380 | + }); |
| 381 | + |
| 382 | + expect( |
| 383 | + document.documentElement.hasAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 384 | + ).toBe(true); |
| 385 | + |
| 386 | + harness.cleanup(); |
| 387 | + |
| 388 | + expect( |
| 389 | + document.documentElement.hasAttribute(STUDIO_DOCUMENT_THEME_ATTRIBUTE), |
| 390 | + ).toBe(false); |
| 391 | + expect(document.documentElement.style.colorScheme).toBe(""); |
| 392 | + expect(document.documentElement.style.backgroundColor).toBe(""); |
| 393 | + }); |
217 | 394 | }); |
0 commit comments