diff --git a/tests/e2e/design/panel.spec.ts-snapshots/design-panel-paint-effects-export-openpencil-darwin.png b/tests/e2e/design/panel.spec.ts-snapshots/design-panel-paint-effects-export-openpencil-darwin.png
index 245a47356..4230256ae 100644
Binary files a/tests/e2e/design/panel.spec.ts-snapshots/design-panel-paint-effects-export-openpencil-darwin.png and b/tests/e2e/design/panel.spec.ts-snapshots/design-panel-paint-effects-export-openpencil-darwin.png differ
diff --git a/tests/e2e/design/panel.spec.ts-snapshots/design-panel-position-appearance-openpencil-darwin.png b/tests/e2e/design/panel.spec.ts-snapshots/design-panel-position-appearance-openpencil-darwin.png
index c29b801e8..db52e2f2b 100644
Binary files a/tests/e2e/design/panel.spec.ts-snapshots/design-panel-position-appearance-openpencil-darwin.png and b/tests/e2e/design/panel.spec.ts-snapshots/design-panel-position-appearance-openpencil-darwin.png differ
diff --git a/tests/e2e/properties/blend-modes.spec.ts-snapshots/effect-blend-mode-openpencil-darwin.png b/tests/e2e/properties/blend-modes.spec.ts-snapshots/effect-blend-mode-openpencil-darwin.png
index e84e3ff98..7b26f04dc 100644
Binary files a/tests/e2e/properties/blend-modes.spec.ts-snapshots/effect-blend-mode-openpencil-darwin.png and b/tests/e2e/properties/blend-modes.spec.ts-snapshots/effect-blend-mode-openpencil-darwin.png differ
diff --git a/tests/e2e/properties/component-properties.spec.ts-snapshots/component-properties-controls-openpencil-darwin.png b/tests/e2e/properties/component-properties.spec.ts-snapshots/component-properties-controls-openpencil-darwin.png
index d71936624..02fc14159 100644
Binary files a/tests/e2e/properties/component-properties.spec.ts-snapshots/component-properties-controls-openpencil-darwin.png and b/tests/e2e/properties/component-properties.spec.ts-snapshots/component-properties-controls-openpencil-darwin.png differ
diff --git a/tests/e2e/properties/panel.spec.ts b/tests/e2e/properties/panel.spec.ts
index 33d9b2fcb..bc1c6d944 100644
--- a/tests/e2e/properties/panel.spec.ts
+++ b/tests/e2e/properties/panel.spec.ts
@@ -32,7 +32,7 @@ test('appearance fields share control height and show variable actions', async (
     section.getByRole('spinbutton', { name: 'Corner smoothing' })
   ]
   for (const control of controls) {
-    await expect(control).toHaveCSS('height', '26px')
+    await expect(control).toHaveCSS('height', '24px')
   }
 
   const applyVariable = section.getByRole('button', { name: 'Apply variable' }).first()
@@ -58,7 +58,7 @@ test('appearance fields share control height and show variable actions', async (
 
   const fillItem = propertyItems(editor.page, 'fills').first()
   const paintField = fillItem.locator('[data-slot="paint-field"]')
-  await expect(paintField).toHaveCSS('height', '26px')
+  await expect(paintField).toHaveCSS('height', '24px')
   const colorBox = expectDefined(
     await fillItem.getByRole('textbox', { name: 'Fill' }).boundingBox(),
     'fill color bounds'
diff --git a/tests/e2e/ui/theme.spec.ts b/tests/e2e/ui/theme.spec.ts
new file mode 100644
index 000000000..6a63e1523
--- /dev/null
+++ b/tests/e2e/ui/theme.spec.ts
@@ -0,0 +1,43 @@
+import { expect, test, useEditorSetup } from '#tests/e2e/fixtures'
+
+const editor = useEditorSetup()
+
+test('rulers follow the active theme', async () => {
+  const { page } = editor
+
+  const readState = () =>
+    page.evaluate(() => {
+      const store = window.openPencil?.getStore?.()
+      const style = getComputedStyle(document.documentElement)
+      return {
+        cssTheme: document.documentElement.dataset.theme ?? 'dark',
+        cssRulerBg: style.getPropertyValue('--color-ruler-bg').trim(),
+        storeRulerBg: store?.state.rulerTheme?.background ?? null
+      }
+    })
+
+  // Baseline: dark theme
+  const dark = await readState()
+  expect(dark.cssTheme).toBe('dark')
+
+  // Switch to light via the app's theme API (module state, not raw localStorage,
+  // so the watcher applies it and pushes the ruler theme to the active editor).
+  await page.evaluate(async () => {
+    const themeModule = await import('/src/app/shell/theme.ts')
+    themeModule.useAppTheme().setTheme('light')
+  })
+  await page.waitForFunction(() => document.documentElement.dataset.theme === 'light')
+
+  const light = await readState()
+  expect(light.cssTheme).toBe('light')
+  // Canvas ruler theme must track the light tokens, not stay on the dark fallback.
+  expect(light.cssRulerBg).not.toBe(dark.cssRulerBg)
+  expect(light.storeRulerBg).not.toBeNull()
+
+  // Restore dark so later specs are unaffected.
+  await page.evaluate(async () => {
+    const themeModule = await import('/src/app/shell/theme.ts')
+    themeModule.useAppTheme().setTheme('dark')
+  })
+  await page.waitForFunction(() => document.documentElement.dataset.theme === 'dark')
+})