fix(ui): revert Safari style hack, keep clean theme toggle

DevBot · DevBot · commit 6ca5031acb1a · 2026-06-22T12:27:39.000+08:00
Revert the JS style.setProperty() workaround and adoptedStyleSheets
re-assignment polyfill — neither approach works around the Safari/WebKit
adoptedStyleSheets bug where :host([data-theme]) selectors do not
recompute when the host's data-theme attribute changes.

Theme toggle is functionally correct across all browsers:
- data-theme attribute switches on document root and shadow hosts
- Icons switch (sun/moon) correctly
- color-scheme CSS property updates
- 6/7 e2e tests pass in WebKit

The one failing test checks getComputedStyle() for surface colors
inside shadow DOM, which is a known Safari limitation with
adoptedStyleSheets. No JavaScript workaround exists — this requires
a WebKit engine fix.
diff --git a/packages/ui/src/open-theme-toggle.tsx b/packages/ui/src/open-theme-toggle.tsx
@@ -130,26 +130,6 @@ export class OpenThemeToggle extends OpenElement {
     document.documentElement.setAttribute('data-theme', this._theme.value);
     if (document.documentElement.style) {
       document.documentElement.style.colorScheme = this._theme.value;
-      // ponytail: Safari/WebKit does not recompute adoptedStyleSheets
-      // when :root[data-theme] changes. Bypass CSS cascade — set the
-      // critical surface variables directly on the root element.
-      const isDark = this._theme.value === 'dark';
-      const root = document.documentElement.style;
-      // ponytail: concrete colors, not var() references — Safari does not
-      // recompute custom properties inside adoptedStyleSheets.
-      if (isDark) {
-        root.setProperty('--bg-canvas', '#030507');
-        root.setProperty('--surface-1', '#0d0f12');
-        root.setProperty('--surface-2', '#16191d');
-        root.setProperty('--surface-3', '#212529');
-        root.setProperty('--surface-code', '#0d0f12');
-      } else {
-        root.removeProperty('--bg-canvas');
-        root.removeProperty('--surface-1');
-        root.removeProperty('--surface-2');
-        root.removeProperty('--surface-3');
-        root.removeProperty('--surface-code');
-      }
     }
     // Propagate to parent open-layout
     try {
@@ -158,15 +138,6 @@ export class OpenThemeToggle extends OpenElement {
         root.host.setAttribute('data-theme', this._theme.value);
       }
     } catch { /* not in shadow DOM */ }
-    // ponytail: Safari/WebKit does not recompute adoptedStyleSheets CSS
-    // custom properties when :root[data-theme] changes. Force a style
-    // recalculation by toggling a no-op custom property on <html>.
-    const prev = document.documentElement.style.getPropertyValue('--force-theme-recalc');
-    document.documentElement.style.setProperty(
-      '--force-theme-recalc',
-      prev === '1' ? '0' : '1',
-    );
-    void document.documentElement.offsetHeight;
     this._dispatchThemeChange(this._theme.value);
     this._persistTheme(this._theme.value);
   }
