diff --git a/src/app.css b/src/app.css
index c28c2fb55..c2c5aa2d3 100644
--- a/src/app.css
+++ b/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);
 }
 
diff --git a/src/app/editor/active-store/index.ts b/src/app/editor/active-store/index.ts
index 1b0681103..e69989199 100644
--- a/src/app/editor/active-store/index.ts
+++ b/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)
diff --git a/src/app/shell/theme.ts b/src/app/shell/theme.ts
index dc7659b2a..a5f3e61b1 100644
--- a/src/app/shell/theme.ts
+++ b/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 {