Toggle between light and dark modes to verify the side panel picks up theme changes and renders correctly in both modes.
Cards, backgrounds, and surfaces should transition smoothly between themes.
Text contrast and accent colors should be accessible in both light and dark modes.
Dark mode isn't just inverting colors. Effective dark themes use careful color adjustments — reducing contrast slightly, using softer whites, and ensuring brand colors work on dark backgrounds. This card tests that content remains readable and aesthetically pleasing in both modes.
Using CSS custom properties (variables) makes theme switching trivial. By defining all theme-dependent values as variables on the root element and overriding them with a class, the entire page transitions seamlessly. This approach works well with embedded widgets that observe the host page's theme.
Embedded widgets can use MutationObserver to watch for class changes on the host page's <html> or <body> element. When a "dark" class is added or removed, the widget can adjust its own theme accordingly. This is more reliable than listening for custom events since it works with any theming library.
The prefers-color-scheme media query detects the user's system-level dark mode preference. Pages should honor this by default and allow manual override. The side panel widget should also respect this preference when the host page doesn't explicitly set a theme class.
When switching themes, all page elements should transition smoothly. Borders, shadows, and background colors are common sources of visual glitches during theme transitions. The side panel's divider line and tab handle should adapt without jarring flashes or layout shifts.
Both light and dark themes must maintain WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text). Dark mode can be tricky — pure white text on dark backgrounds causes eye strain, while too-dim text fails contrast requirements. Finding the right balance is key.
User theme preferences should be persisted across sessions using localStorage or cookies. On page load, the saved preference should be applied before first paint to avoid a flash of wrong theme. This is typically done with a small inline script in the <head>.