fix(canvas): rulers follow the active theme

Rulers stayed dark in light theme because the canvas ruler theme was only
pushed to the editor store at theme-apply time, before any editor existed,
and the renderer fell back to a hardcoded dark color.

- Push the ruler theme to the active editor whenever it registers or the
  theme changes, via a reactive active-store ref (keeps the no-browser-
  globals-in-core boundary intact)
- Refresh the light ruler palette for proper contrast on the light canvas

src/app.css

@@ -104,9 +104,9 @@ html[data-theme='light'] {
   --color-code-punctuation: #64748b;
   --color-checkerboard: #d1d5db;
   --color-checkerboard-muted: #e5e7eb;
-  --color-ruler-bg: rgb(229, 231, 235);
-  --color-ruler-tick: rgb(148, 163, 184);
-  --color-ruler-text: rgb(100, 116, 139);
+  --color-ruler-bg: rgb(250, 250, 251);
+  --color-ruler-tick: rgb(163, 171, 182);
+  --color-ruler-text: rgb(90, 99, 112);
   --color-ruler-label: rgb(255, 255, 255);
 }
 

src/app/editor/active-store/index.ts

@@ -6,6 +6,10 @@ export type { EditorStore }
 
 const storeRef = shallowRef<EditorStore>()
 
+export function useActiveEditorStoreRef() {
+  return storeRef
+}
+
 export function setActiveEditorStore(store: EditorStore) {
   storeRef.value = store
   triggerRef(storeRef)

src/app/shell/theme.ts

@@ -5,7 +5,7 @@ import type { RulerTheme } from '@open-pencil/core/canvas'
 import { parseColor } from '@open-pencil/core/color'
 import { IS_BROWSER } from '@open-pencil/core/constants'
 
-import { getActiveEditorStoreOrNull } from '@/app/editor/active-store'
+import { getActiveEditorStoreOrNull, useActiveEditorStoreRef } from '@/app/editor/active-store'
 
 export type AppTheme = 'dark' | 'light' | 'auto'
 
@@ -51,6 +51,11 @@ export function useAppTheme() {
     immediate: true
   })
 
+  // Editors may mount after the theme was applied; push the canvas (ruler)
+  // theme whenever the active editor changes so rulers always match.
+  const activeStoreRef = useActiveEditorStoreRef()
+  watch([activeStoreRef, resolvedTheme], () => updateCanvasTheme(), { flush: 'post' })
+
   const isLight = computed(() => resolvedTheme.value === 'light')
 
   function setTheme(value: AppTheme): void {