diff --git a/src/components/CanvasTemplatePreviewModal.tsx b/src/components/CanvasTemplatePreviewModal.tsx
index 686ead8f..835b55e4 100644
--- a/src/components/CanvasTemplatePreviewModal.tsx
+++ b/src/components/CanvasTemplatePreviewModal.tsx
@@ -121,7 +121,7 @@ function CanvasTemplatePreviewFlow({ workflow }: { workflow: WorkflowFile }) {
         zoomOnPinch
         onMoveEnd={syncZoomPercent}
         proOptions={{ hideAttribution: true }}
-        className="bg-[var(--canvas-bg,#171717)]"
+        className="canvas-background"
       >
         <SharedEdgeGradients />
         <Background color="var(--border-subtle,#404040)" gap={20} size={1} />
@@ -250,21 +250,21 @@ export function CanvasTemplatePreviewModal({
       role="dialog"
       aria-modal="true"
       aria-label={displayTitle}
-      className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/75 p-10 backdrop-blur-sm"
+      className="fixed inset-0 z-[1000] flex items-center justify-center bg-[var(--surface-overlay)] p-10 backdrop-blur-sm"
       onClick={onClose}
     >
       <section
-        className="relative h-[min(900px,90vh)] w-[90vw] overflow-hidden rounded-2xl border border-white/20 bg-[#101010] text-[var(--text-primary,#fafafa)] shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
+        className="relative h-[min(900px,90vh)] w-[90vw] overflow-hidden rounded-2xl border border-[var(--border-strong)] bg-[var(--surface-1)] text-[var(--text-primary)] shadow-[var(--shadow-panel)]"
         onClick={(event) => event.stopPropagation()}
       >
-        <header className="absolute left-[10%] right-[10%] top-4 z-20 flex h-12 items-center justify-between gap-4 rounded-xl border border-white/10 bg-[#262626]/95 px-4 shadow-[0_12px_36px_rgba(0,0,0,0.35)]">
+        <header className="absolute left-[10%] right-[10%] top-4 z-20 flex h-12 items-center justify-between gap-4 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] px-4 shadow-[var(--shadow-panel)]">
           <div className="flex min-w-0 items-center gap-3">
             <h2 className="truncate text-sm font-medium">
               {displayTitle}
             </h2>
           </div>
           <Space size={8}>
-            <span className="hidden text-sm text-[var(--text-primary,#fafafa)] sm:inline">
+            <span className="hidden text-sm text-[var(--text-secondary)] sm:inline">
               {t("templatePreview.readOnly")}
             </span>
             <Tooltip title={t("templatePreview.copyProject")}>
@@ -287,12 +287,12 @@ export function CanvasTemplatePreviewModal({
           type="button"
           aria-label={t("common.close")}
           onClick={onClose}
-          className="absolute right-4 top-4 z-30 flex h-10 w-10 items-center justify-center rounded-full text-white/80 transition-colors hover:bg-white/10 hover:text-white"
+          className="absolute right-4 top-4 z-30 flex h-10 w-10 items-center justify-center rounded-full text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-hover)] hover:text-[var(--text-primary)]"
         >
           <CloseOutlined />
         </button>
 
-        <div className="absolute inset-0 bg-[var(--canvas-bg,#171717)]">
+        <div className="canvas-background absolute inset-0">
           {isLoadingDetail ? (
             <div className="flex h-full items-center justify-center">
               <Spin tip={t("home.loading")} />