@markup-canvas/core 1.0.7 → 1.0.8

package/dist/lib/rulers/updateRulerTheme.d.ts

@@ -5,9 +5,4 @@ export interface RulerThemeUpdater {
     cornerBox?: HTMLElement;
     gridOverlay?: HTMLElement;
 }
-/**
- * Updates all ruler elements with new theme colors
- * @param elements - The ruler elements to update
- * @param config - The canvas config containing theme and color settings
- */
 export declare function updateRulerTheme(elements: RulerThemeUpdater, config: Required<MarkupCanvasConfig>): void;

package/dist/markup-canvas.cjs.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 1.0.7
+ * @version 1.0.8
  */
 'use strict';
 
@@ -47,17 +47,17 @@ const EDITOR_PRESET = {
     rulerUnits: "px",
     rulerSize: 20,
     // Canvas styling
-    canvasBackgroundColor: "oklch(98.5% 0 0)",
-    canvasBackgroundColorDark: "oklch(21% 0.006 285.885)",
+    canvasBackgroundColor: "transparent",
+    canvasBackgroundColorDark: "transparent",
     // Ruler styling
     rulerBackgroundColor: "oklch(100% 0 0 / 0.4)",
-    rulerBorderColor: "oklch(98.5% 0 0)",
+    rulerBorderColor: "oklch(96.7% 0.001 286.375)",
     rulerTextColor: "oklch(70.5% 0.015 286.067)",
-    rulerTickColor: "oklch(70.5% 0.015 286.067)",
+    rulerTickColor: "oklch(92% 0.004 286.32)",
     gridColor: "rgba(232, 86, 193, 0.5)",
     // Ruler styling (dark theme)
     rulerBackgroundColorDark: "oklch(27.4% 0.006 286.033)",
-    rulerBorderColorDark: "oklch(37% 0.013 285.805)",
+    rulerBorderColorDark: "oklch(44.2% 0.017 285.786)",
     rulerTextColorDark: "oklch(55.2% 0.016 285.938)",
     rulerTickColorDark: "oklch(55.2% 0.016 285.938)",
     gridColorDark: "rgba(232, 86, 193, 0.5)",
@@ -349,7 +349,7 @@ const DEFAULT_CONFIG = {
     canvasBackgroundColorDark: "rgba(40, 40, 40, 1)",
     // Ruler styling (light theme)
     rulerBackgroundColor: "rgba(255, 255, 255, 0.95)",
-    rulerBorderColor: "rgba(221, 221, 221, 1)",
+    rulerBorderColor: "rgba(240, 240, 240, 1)",
     rulerTextColor: "rgba(102, 102, 102, 1)",
     rulerTickColor: "rgba(204, 204, 204, 1)",
     gridColor: "rgba(232, 86, 193, 0.5)",
@@ -357,7 +357,7 @@ const DEFAULT_CONFIG = {
     rulerBackgroundColorDark: "rgba(30, 30, 30, 0.95)",
     rulerBorderColorDark: "rgba(68, 68, 68, 1)",
     rulerTextColorDark: "rgba(170, 170, 170, 1)",
-    rulerTickColorDark: "rgba(56, 56, 56, 1)",
+    rulerTickColorDark: "rgba(104, 104, 104, 1)",
     gridColorDark: "rgba(232, 86, 193, 0.5)",
     // Theme
     themeMode: "light",
@@ -1380,25 +1380,22 @@ const GRID_SETTINGS = {
 function createCornerBox(config) {
     const corner = document.createElement("div");
     corner.className = "canvas-ruler corner-box";
-    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-    const borderColor = getThemeValue(config, "rulerBorderColor");
-    const textColor = getThemeValue(config, "rulerTextColor");
     corner.style.cssText = `
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: ${config.rulerSize}px;
 		height: ${config.rulerSize}px;
-		background: ${backgroundColor};
-		border-right: 1px solid ${borderColor};
-		border-bottom: 1px solid ${borderColor};
+		background: var(--ruler-background-color);
+		border-right: 1px solid var(--ruler-border-color);
+		border-bottom: 1px solid var(--ruler-border-color);
 		z-index: ${RULER_Z_INDEX.CORNER};
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-family: ${config.rulerFontFamily};
 		font-size: ${config.rulerFontSize - 2}px;
-		color: ${textColor};
+		color: var(--ruler-text-color);
 		pointer-events: none;
 	`;
     corner.textContent = config.rulerUnits;
@@ -1408,7 +1405,6 @@ function createCornerBox(config) {
 function createGridOverlay(config) {
     const grid = document.createElement("div");
     grid.className = "canvas-ruler grid-overlay";
-    const gridColor = getThemeValue(config, "gridColor");
     grid.style.cssText = `
 		position: absolute;
 		top: ${config.rulerSize}px;
@@ -1418,8 +1414,8 @@ function createGridOverlay(config) {
 		pointer-events: none;
 		z-index: ${RULER_Z_INDEX.GRID};
 		background-image: 
-			linear-gradient(${gridColor} 1px, transparent 1px),
-			linear-gradient(90deg, ${gridColor} 1px, transparent 1px);
+			linear-gradient(var(--grid-color) 1px, transparent 1px),
+			linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
 		background-size: 100px 100px;
 		opacity: 0.5;
 	`;
@@ -1429,23 +1425,20 @@ function createGridOverlay(config) {
 function createHorizontalRuler(config) {
     const ruler = document.createElement("div");
     ruler.className = "canvas-ruler horizontal-ruler";
-    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-    const borderColor = getThemeValue(config, "rulerBorderColor");
-    const textColor = getThemeValue(config, "rulerTextColor");
     ruler.style.cssText = `
 	position: absolute;
 	top: 0;
 	left: ${config.rulerSize}px;
 	right: 0;
 	height: ${config.rulerSize}px;
-	background: ${backgroundColor};
-	border-bottom: 1px solid ${borderColor};
-	border-right: 1px solid ${borderColor};
+	background: var(--ruler-background-color);
+	border-bottom: 1px solid var(--ruler-border-color);
+	border-right: 1px solid var(--ruler-border-color);
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
 	font-family: ${config.rulerFontFamily};
 	font-size: ${config.rulerFontSize}px;
-	color: ${textColor};
+	color: var(--ruler-text-color);
 	overflow: hidden;
   `;
     return ruler;
@@ -1454,23 +1447,20 @@ function createHorizontalRuler(config) {
 function createVerticalRuler(config) {
     const ruler = document.createElement("div");
     ruler.className = "canvas-ruler vertical-ruler";
-    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-    const borderColor = getThemeValue(config, "rulerBorderColor");
-    const textColor = getThemeValue(config, "rulerTextColor");
     ruler.style.cssText = `
 	position: absolute;
 	top: ${config.rulerSize}px;
 	left: 0;
 	bottom: 0;
 	width: ${config.rulerSize}px;
-	background: ${backgroundColor};
-	border-right: 1px solid ${borderColor};
-	border-bottom: 1px solid ${borderColor};
+	background: var(--ruler-background-color);
+	border-right: 1px solid var(--ruler-border-color);
+	border-bottom: 1px solid var(--ruler-border-color);
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
 	font-family: ${config.rulerFontFamily};
 	font-size: ${config.rulerFontSize}px;
-	color: ${textColor};
+	color: var(--ruler-text-color);
 	overflow: hidden;
   `;
     return ruler;
@@ -1542,27 +1532,26 @@ function calculateTickSpacing(contentSize, canvasSize) {
 
 function createHorizontalTick(container, position, pixelPos, _tickSpacing, config) {
     const tick = document.createElement("div");
-    const tickColor = getThemeValue(config, "rulerTickColor");
+    tick.className = "tick";
     tick.style.cssText = `
 		position: absolute;
 		left: ${pixelPos}px;
 		bottom: 0;
 		width: 1px;
 		height: ${TICK_SETTINGS.TICK_HEIGHT}px;
-		background: ${tickColor};
+		background: var(--ruler-tick-color);
 	`;
     container.appendChild(tick);
     const shouldShowLabel = position % TICK_SETTINGS.TICK_LABEL_INTERVAL === 0;
     if (shouldShowLabel) {
         const label = document.createElement("div");
-        const textColor = getThemeValue(config, "rulerTextColor");
         label.style.cssText = `
 			position: absolute;
 			left: ${pixelPos}px;
 			bottom: ${TICK_SETTINGS.TICK_HEIGHT + 2}px;
 			font-size: ${config.rulerFontSize}px;
 			line-height: 1;
-			color: ${textColor};
+			color: var(--ruler-text-color);
 			white-space: nowrap;
 			pointer-events: none;
 		`;
@@ -1590,27 +1579,26 @@ function updateHorizontalRuler(ruler, contentLeft, contentRight, canvasWidth, sc
 
 function createVerticalTick(container, position, pixelPos, _tickSpacing, config) {
     const tick = document.createElement("div");
-    const tickColor = getThemeValue(config, "rulerTickColor");
+    tick.className = "tick";
     tick.style.cssText = `
 		position: absolute;
 		top: ${pixelPos}px;
 		right: 0;
 		width: ${TICK_SETTINGS.TICK_WIDTH}px;
 		height: 1px;
-		background: ${tickColor};
+		background: var(--ruler-tick-color);
 	`;
     container.appendChild(tick);
     const shouldShowLabel = position % TICK_SETTINGS.TICK_LABEL_INTERVAL === 0;
     if (shouldShowLabel) {
         const label = document.createElement("div");
-        const textColor = getThemeValue(config, "rulerTextColor");
         label.style.cssText = `
 			position: absolute;
 			top: ${pixelPos - 6}px;
 			right: ${TICK_SETTINGS.TICK_WIDTH + 6}px;
 			font-size: ${config.rulerFontSize}px;
 			line-height: 1;
-			color: ${textColor};
+			color: var(--ruler-text-color);
 			white-space: nowrap;
 			pointer-events: none;
 			transform: rotate(-90deg);
@@ -1656,44 +1644,36 @@ function updateRulers(canvas, horizontalRuler, verticalRuler, gridOverlay, confi
     }
 }
 
-/**
- * Updates all ruler elements with new theme colors
- * @param elements - The ruler elements to update
- * @param config - The canvas config containing theme and color settings
- */
 function updateRulerTheme(elements, config) {
     // Get theme-aware colors
     const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
     const borderColor = getThemeValue(config, "rulerBorderColor");
     const textColor = getThemeValue(config, "rulerTextColor");
+    const tickColor = getThemeValue(config, "rulerTickColor");
     const gridColor = getThemeValue(config, "gridColor");
-    // Update horizontal ruler
+    // Update horizontal ruler with CSS variables
     if (elements.horizontalRuler) {
-        elements.horizontalRuler.style.background = backgroundColor;
-        elements.horizontalRuler.style.borderBottomColor = borderColor;
-        elements.horizontalRuler.style.borderRightColor = borderColor;
-        elements.horizontalRuler.style.color = textColor;
+        elements.horizontalRuler.style.setProperty("--ruler-background-color", backgroundColor);
+        elements.horizontalRuler.style.setProperty("--ruler-border-color", borderColor);
+        elements.horizontalRuler.style.setProperty("--ruler-text-color", textColor);
+        elements.horizontalRuler.style.setProperty("--ruler-tick-color", tickColor);
     }
-    // Update vertical ruler
+    // Update vertical ruler with CSS variables
     if (elements.verticalRuler) {
-        elements.verticalRuler.style.background = backgroundColor;
-        elements.verticalRuler.style.borderRightColor = borderColor;
-        elements.verticalRuler.style.borderBottomColor = borderColor;
-        elements.verticalRuler.style.color = textColor;
+        elements.verticalRuler.style.setProperty("--ruler-background-color", backgroundColor);
+        elements.verticalRuler.style.setProperty("--ruler-border-color", borderColor);
+        elements.verticalRuler.style.setProperty("--ruler-text-color", textColor);
+        elements.verticalRuler.style.setProperty("--ruler-tick-color", tickColor);
     }
-    // Update corner box
+    // Update corner box with CSS variables
     if (elements.cornerBox) {
-        elements.cornerBox.style.background = backgroundColor;
-        elements.cornerBox.style.borderRightColor = borderColor;
-        elements.cornerBox.style.borderBottomColor = borderColor;
-        elements.cornerBox.style.color = textColor;
+        elements.cornerBox.style.setProperty("--ruler-background-color", backgroundColor);
+        elements.cornerBox.style.setProperty("--ruler-border-color", borderColor);
+        elements.cornerBox.style.setProperty("--ruler-text-color", textColor);
     }
-    // Update grid overlay
+    // Update grid overlay with CSS variables
     if (elements.gridOverlay) {
-        elements.gridOverlay.style.backgroundImage = `
-      linear-gradient(${gridColor} 1px, transparent 1px),
-      linear-gradient(90deg, ${gridColor} 1px, transparent 1px)
-    `;
+        elements.gridOverlay.style.setProperty("--grid-color", gridColor);
     }
 }
 
@@ -1713,6 +1693,7 @@ function createRulers(canvas, config) {
     try {
         elements = createRulerElements(canvas.container, config);
         cleanupEvents = setupRulerEvents(canvas, safeUpdate);
+        updateRulerTheme(elements, config);
         safeUpdate();
         if (!config.showRulers) {
             elements.horizontalRuler.style.display = "none";
@@ -1733,8 +1714,6 @@ function createRulers(canvas, config) {
                     return;
                 // Update all ruler theme colors
                 updateRulerTheme(elements, newConfig);
-                // Re-render rulers to update tick colors
-                safeUpdate();
             },
             show: () => {
                 if (elements.horizontalRuler)

package/dist/markup-canvas.esm.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 1.0.7
+ * @version 1.0.8
  */
 const EDITOR_PRESET = {
     // Canvas dimensions
@@ -43,17 +43,17 @@ const EDITOR_PRESET = {
     rulerUnits: "px",
     rulerSize: 20,
     // Canvas styling
-    canvasBackgroundColor: "oklch(98.5% 0 0)",
-    canvasBackgroundColorDark: "oklch(21% 0.006 285.885)",
+    canvasBackgroundColor: "transparent",
+    canvasBackgroundColorDark: "transparent",
     // Ruler styling
     rulerBackgroundColor: "oklch(100% 0 0 / 0.4)",
-    rulerBorderColor: "oklch(98.5% 0 0)",
+    rulerBorderColor: "oklch(96.7% 0.001 286.375)",
     rulerTextColor: "oklch(70.5% 0.015 286.067)",
-    rulerTickColor: "oklch(70.5% 0.015 286.067)",
+    rulerTickColor: "oklch(92% 0.004 286.32)",
     gridColor: "rgba(232, 86, 193, 0.5)",
     // Ruler styling (dark theme)
     rulerBackgroundColorDark: "oklch(27.4% 0.006 286.033)",
-    rulerBorderColorDark: "oklch(37% 0.013 285.805)",
+    rulerBorderColorDark: "oklch(44.2% 0.017 285.786)",
     rulerTextColorDark: "oklch(55.2% 0.016 285.938)",
     rulerTickColorDark: "oklch(55.2% 0.016 285.938)",
     gridColorDark: "rgba(232, 86, 193, 0.5)",
@@ -345,7 +345,7 @@ const DEFAULT_CONFIG = {
     canvasBackgroundColorDark: "rgba(40, 40, 40, 1)",
     // Ruler styling (light theme)
     rulerBackgroundColor: "rgba(255, 255, 255, 0.95)",
-    rulerBorderColor: "rgba(221, 221, 221, 1)",
+    rulerBorderColor: "rgba(240, 240, 240, 1)",
     rulerTextColor: "rgba(102, 102, 102, 1)",
     rulerTickColor: "rgba(204, 204, 204, 1)",
     gridColor: "rgba(232, 86, 193, 0.5)",
@@ -353,7 +353,7 @@ const DEFAULT_CONFIG = {
     rulerBackgroundColorDark: "rgba(30, 30, 30, 0.95)",
     rulerBorderColorDark: "rgba(68, 68, 68, 1)",
     rulerTextColorDark: "rgba(170, 170, 170, 1)",
-    rulerTickColorDark: "rgba(56, 56, 56, 1)",
+    rulerTickColorDark: "rgba(104, 104, 104, 1)",
     gridColorDark: "rgba(232, 86, 193, 0.5)",
     // Theme
     themeMode: "light",
@@ -1376,25 +1376,22 @@ const GRID_SETTINGS = {
 function createCornerBox(config) {
     const corner = document.createElement("div");
     corner.className = "canvas-ruler corner-box";
-    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-    const borderColor = getThemeValue(config, "rulerBorderColor");
-    const textColor = getThemeValue(config, "rulerTextColor");
     corner.style.cssText = `
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: ${config.rulerSize}px;
 		height: ${config.rulerSize}px;
-		background: ${backgroundColor};
-		border-right: 1px solid ${borderColor};
-		border-bottom: 1px solid ${borderColor};
+		background: var(--ruler-background-color);
+		border-right: 1px solid var(--ruler-border-color);
+		border-bottom: 1px solid var(--ruler-border-color);
 		z-index: ${RULER_Z_INDEX.CORNER};
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-family: ${config.rulerFontFamily};
 		font-size: ${config.rulerFontSize - 2}px;
-		color: ${textColor};
+		color: var(--ruler-text-color);
 		pointer-events: none;
 	`;
     corner.textContent = config.rulerUnits;
@@ -1404,7 +1401,6 @@ function createCornerBox(config) {
 function createGridOverlay(config) {
     const grid = document.createElement("div");
     grid.className = "canvas-ruler grid-overlay";
-    const gridColor = getThemeValue(config, "gridColor");
     grid.style.cssText = `
 		position: absolute;
 		top: ${config.rulerSize}px;
@@ -1414,8 +1410,8 @@ function createGridOverlay(config) {
 		pointer-events: none;
 		z-index: ${RULER_Z_INDEX.GRID};
 		background-image: 
-			linear-gradient(${gridColor} 1px, transparent 1px),
-			linear-gradient(90deg, ${gridColor} 1px, transparent 1px);
+			linear-gradient(var(--grid-color) 1px, transparent 1px),
+			linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
 		background-size: 100px 100px;
 		opacity: 0.5;
 	`;
@@ -1425,23 +1421,20 @@ function createGridOverlay(config) {
 function createHorizontalRuler(config) {
     const ruler = document.createElement("div");
     ruler.className = "canvas-ruler horizontal-ruler";
-    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-    const borderColor = getThemeValue(config, "rulerBorderColor");
-    const textColor = getThemeValue(config, "rulerTextColor");
     ruler.style.cssText = `
 	position: absolute;
 	top: 0;
 	left: ${config.rulerSize}px;
 	right: 0;
 	height: ${config.rulerSize}px;
-	background: ${backgroundColor};
-	border-bottom: 1px solid ${borderColor};
-	border-right: 1px solid ${borderColor};
+	background: var(--ruler-background-color);
+	border-bottom: 1px solid var(--ruler-border-color);
+	border-right: 1px solid var(--ruler-border-color);
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
 	font-family: ${config.rulerFontFamily};
 	font-size: ${config.rulerFontSize}px;
-	color: ${textColor};
+	color: var(--ruler-text-color);
 	overflow: hidden;
   `;
     return ruler;
@@ -1450,23 +1443,20 @@ function createHorizontalRuler(config) {
 function createVerticalRuler(config) {
     const ruler = document.createElement("div");
     ruler.className = "canvas-ruler vertical-ruler";
-    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-    const borderColor = getThemeValue(config, "rulerBorderColor");
-    const textColor = getThemeValue(config, "rulerTextColor");
     ruler.style.cssText = `
 	position: absolute;
 	top: ${config.rulerSize}px;
 	left: 0;
 	bottom: 0;
 	width: ${config.rulerSize}px;
-	background: ${backgroundColor};
-	border-right: 1px solid ${borderColor};
-	border-bottom: 1px solid ${borderColor};
+	background: var(--ruler-background-color);
+	border-right: 1px solid var(--ruler-border-color);
+	border-bottom: 1px solid var(--ruler-border-color);
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
 	font-family: ${config.rulerFontFamily};
 	font-size: ${config.rulerFontSize}px;
-	color: ${textColor};
+	color: var(--ruler-text-color);
 	overflow: hidden;
   `;
     return ruler;
@@ -1538,27 +1528,26 @@ function calculateTickSpacing(contentSize, canvasSize) {
 
 function createHorizontalTick(container, position, pixelPos, _tickSpacing, config) {
     const tick = document.createElement("div");
-    const tickColor = getThemeValue(config, "rulerTickColor");
+    tick.className = "tick";
     tick.style.cssText = `
 		position: absolute;
 		left: ${pixelPos}px;
 		bottom: 0;
 		width: 1px;
 		height: ${TICK_SETTINGS.TICK_HEIGHT}px;
-		background: ${tickColor};
+		background: var(--ruler-tick-color);
 	`;
     container.appendChild(tick);
     const shouldShowLabel = position % TICK_SETTINGS.TICK_LABEL_INTERVAL === 0;
     if (shouldShowLabel) {
         const label = document.createElement("div");
-        const textColor = getThemeValue(config, "rulerTextColor");
         label.style.cssText = `
 			position: absolute;
 			left: ${pixelPos}px;
 			bottom: ${TICK_SETTINGS.TICK_HEIGHT + 2}px;
 			font-size: ${config.rulerFontSize}px;
 			line-height: 1;
-			color: ${textColor};
+			color: var(--ruler-text-color);
 			white-space: nowrap;
 			pointer-events: none;
 		`;
@@ -1586,27 +1575,26 @@ function updateHorizontalRuler(ruler, contentLeft, contentRight, canvasWidth, sc
 
 function createVerticalTick(container, position, pixelPos, _tickSpacing, config) {
     const tick = document.createElement("div");
-    const tickColor = getThemeValue(config, "rulerTickColor");
+    tick.className = "tick";
     tick.style.cssText = `
 		position: absolute;
 		top: ${pixelPos}px;
 		right: 0;
 		width: ${TICK_SETTINGS.TICK_WIDTH}px;
 		height: 1px;
-		background: ${tickColor};
+		background: var(--ruler-tick-color);
 	`;
     container.appendChild(tick);
     const shouldShowLabel = position % TICK_SETTINGS.TICK_LABEL_INTERVAL === 0;
     if (shouldShowLabel) {
         const label = document.createElement("div");
-        const textColor = getThemeValue(config, "rulerTextColor");
         label.style.cssText = `
 			position: absolute;
 			top: ${pixelPos - 6}px;
 			right: ${TICK_SETTINGS.TICK_WIDTH + 6}px;
 			font-size: ${config.rulerFontSize}px;
 			line-height: 1;
-			color: ${textColor};
+			color: var(--ruler-text-color);
 			white-space: nowrap;
 			pointer-events: none;
 			transform: rotate(-90deg);
@@ -1652,44 +1640,36 @@ function updateRulers(canvas, horizontalRuler, verticalRuler, gridOverlay, confi
     }
 }
 
-/**
- * Updates all ruler elements with new theme colors
- * @param elements - The ruler elements to update
- * @param config - The canvas config containing theme and color settings
- */
 function updateRulerTheme(elements, config) {
     // Get theme-aware colors
     const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
     const borderColor = getThemeValue(config, "rulerBorderColor");
     const textColor = getThemeValue(config, "rulerTextColor");
+    const tickColor = getThemeValue(config, "rulerTickColor");
     const gridColor = getThemeValue(config, "gridColor");
-    // Update horizontal ruler
+    // Update horizontal ruler with CSS variables
     if (elements.horizontalRuler) {
-        elements.horizontalRuler.style.background = backgroundColor;
-        elements.horizontalRuler.style.borderBottomColor = borderColor;
-        elements.horizontalRuler.style.borderRightColor = borderColor;
-        elements.horizontalRuler.style.color = textColor;
+        elements.horizontalRuler.style.setProperty("--ruler-background-color", backgroundColor);
+        elements.horizontalRuler.style.setProperty("--ruler-border-color", borderColor);
+        elements.horizontalRuler.style.setProperty("--ruler-text-color", textColor);
+        elements.horizontalRuler.style.setProperty("--ruler-tick-color", tickColor);
     }
-    // Update vertical ruler
+    // Update vertical ruler with CSS variables
     if (elements.verticalRuler) {
-        elements.verticalRuler.style.background = backgroundColor;
-        elements.verticalRuler.style.borderRightColor = borderColor;
-        elements.verticalRuler.style.borderBottomColor = borderColor;
-        elements.verticalRuler.style.color = textColor;
+        elements.verticalRuler.style.setProperty("--ruler-background-color", backgroundColor);
+        elements.verticalRuler.style.setProperty("--ruler-border-color", borderColor);
+        elements.verticalRuler.style.setProperty("--ruler-text-color", textColor);
+        elements.verticalRuler.style.setProperty("--ruler-tick-color", tickColor);
     }
-    // Update corner box
+    // Update corner box with CSS variables
     if (elements.cornerBox) {
-        elements.cornerBox.style.background = backgroundColor;
-        elements.cornerBox.style.borderRightColor = borderColor;
-        elements.cornerBox.style.borderBottomColor = borderColor;
-        elements.cornerBox.style.color = textColor;
+        elements.cornerBox.style.setProperty("--ruler-background-color", backgroundColor);
+        elements.cornerBox.style.setProperty("--ruler-border-color", borderColor);
+        elements.cornerBox.style.setProperty("--ruler-text-color", textColor);
     }
-    // Update grid overlay
+    // Update grid overlay with CSS variables
     if (elements.gridOverlay) {
-        elements.gridOverlay.style.backgroundImage = `
-      linear-gradient(${gridColor} 1px, transparent 1px),
-      linear-gradient(90deg, ${gridColor} 1px, transparent 1px)
-    `;
+        elements.gridOverlay.style.setProperty("--grid-color", gridColor);
     }
 }
 
@@ -1709,6 +1689,7 @@ function createRulers(canvas, config) {
     try {
         elements = createRulerElements(canvas.container, config);
         cleanupEvents = setupRulerEvents(canvas, safeUpdate);
+        updateRulerTheme(elements, config);
         safeUpdate();
         if (!config.showRulers) {
             elements.horizontalRuler.style.display = "none";
@@ -1729,8 +1710,6 @@ function createRulers(canvas, config) {
                     return;
                 // Update all ruler theme colors
                 updateRulerTheme(elements, newConfig);
-                // Re-render rulers to update tick colors
-                safeUpdate();
             },
             show: () => {
                 if (elements.horizontalRuler)