fix(platform): apply system appearance before hydration

Author: emir-karabeg

apps/sim/platform/checks/appearance.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+
+test.use({ javaScriptEnabled: false })
+
+test('system appearance follows the OS before hydration while an explicit appearance stays fixed', async ({
+  page,
+}) => {
+  const surface = page.locator('[data-platform-ui]')
+  const canvas = { light: 'rgb(255, 255, 255)', dark: 'rgb(20, 20, 20)' }
+  for (const preference of ['system', 'light', 'dark'] as const) {
+    await page.goto(`http://127.0.0.1:3181/home?theme=${preference}`)
+    for (const os of ['dark', 'light'] as const) {
+      await page.emulateMedia({ colorScheme: os })
+      const appearance = preference === 'system' ? os : preference
+      await expect(surface).toHaveCSS('background-color', canvas[appearance])
+      await expect(surface).toHaveCSS('color-scheme', appearance)
+    }
+  }
+})

apps/sim/platform/design-system/components/platform-surface.tsx

@@ -2,9 +2,10 @@
 
 import type { ReactNode } from 'react'
 import { useInterfacePreferences } from '@/platform/design-system/components/interface-preferences'
+import type { Appearance } from '@/platform/design-system/navigation'
 
 interface PlatformSurfaceProps {
-  theme: 'light' | 'dark'
+  theme: Appearance
   children: ReactNode
 }
 

apps/sim/platform/design-system/components/product-surface.tsx

@@ -25,7 +25,7 @@ export function ProductSurface({ preference, children }: ProductSurfaceProps) {
   const theme = preference === 'system' ? (dark ? 'dark' : 'light') : preference
   return (
     <ThemeContext.Provider value={theme}>
-      <PlatformSurface theme={theme}>{children}</PlatformSurface>
+      <PlatformSurface theme={preference}>{children}</PlatformSurface>
     </ThemeContext.Provider>
   )
 }

apps/sim/platform/design-system/styles/system-appearance.cjs

@@ -0,0 +1,21 @@
+/** Reuse explicit Platform theme rules for system appearance before React hydrates. */
+module.exports = {
+  postcssPlugin: 'sim-system-appearance',
+  OnceExit(root, { postcss }) {
+    root.walkRules(/\[data-platform-ui\]\[data-theme=/, (rule) => {
+      for (const scheme of ['dark', 'light']) {
+        const explicit = new RegExp(`^\\[data-platform-ui\\]\\[data-theme=["']?${scheme}["']?\\]`)
+        const selectors = rule.selectors
+          .filter((selector) => explicit.test(selector))
+          .map((selector) => selector.replace(explicit, '[data-platform-ui][data-theme="system"]'))
+        if (selectors.length) {
+          const media = postcss.atRule({
+            name: 'media',
+            params: `(prefers-color-scheme: ${scheme})`,
+          })
+          rule.after(media.append(rule.clone({ selectors })))
+        }
+      }
+    })
+  },
+}

apps/sim/platform/postcss.config.mjs

@@ -1 +1,10 @@
-export default { plugins: { '@tailwindcss/postcss': {} } }
+import { createRequire } from 'node:module'
+
+const require = createRequire(import.meta.url)
+
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    [require.resolve('./design-system/styles/system-appearance.cjs')]: {},
+  },
+}