diff --git a/src/components/core/model/FieldMetaDataForm.css b/src/components/core/model/FieldMetaDataForm.css
index dd615bc5..7f400a98 100644
--- a/src/components/core/model/FieldMetaDataForm.css
+++ b/src/components/core/model/FieldMetaDataForm.css
@@ -26,6 +26,9 @@
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0.5rem;
+  background:
+    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 7%, transparent), transparent 32%),
+    linear-gradient(180deg, color-mix(in srgb, var(--background) 96%, transparent), color-mix(in srgb, var(--background) 92%, var(--card) 8%));
 }
 
 .solid-field-form-frame {
@@ -34,6 +37,17 @@
   width: 100%;
   flex-direction: column;
   gap: 1rem;
+  padding: 1rem;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  border-radius: 16px;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--card) 98%, var(--background) 2%),
+    color-mix(in srgb, var(--card) 92%, var(--background) 8%)
+  );
+  box-shadow:
+    0 14px 32px rgba(15, 23, 42, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
 .solid-field-form-header {
@@ -48,14 +62,30 @@
   color: var(--muted-foreground);
 }
 
+.solid-field-form-shell .creat-field-form {
+  width: 100%;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
 .solid-field-form-tabs .solid-notebook-tablist {
   width: 100% !important;
+  padding: 0 0.25rem;
+  border-bottom-color: color-mix(in srgb, var(--border) 84%, transparent);
 }
 
 .solid-field-form-tabs .solid-notebook-content {
   padding-top: 0.85rem;
 }
 
+.solid-field-form-tabs .solid-tabs-panel {
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--background) 52%, var(--card) 48%);
+  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  padding: 0.9rem;
+}
+
 .solid-field-form-actions {
   display: flex;
   align-items: center;
@@ -66,6 +96,95 @@
   border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
 }
 
+.solid-field-dialog .solid-radix-dialog-body.solid-dialog-body-flush {
+  background: var(--background);
+}
+
+.solid-field-dialog .solid-radix-dialog-header {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--card) 96%, var(--background) 4%),
+    color-mix(in srgb, var(--card) 92%, var(--background) 8%)
+  );
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+}
+
+html.dark .solid-field-dialog .solid-radix-dialog-header,
+[data-theme="dark"] .solid-field-dialog .solid-radix-dialog-header {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--card) 96%, #172554 4%),
+    color-mix(in srgb, var(--card) 88%, #020617 12%)
+  );
+  border-bottom-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+}
+
+html.dark .solid-field-form-scroll,
+[data-theme="dark"] .solid-field-form-scroll {
+  background:
+    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 10%, transparent), transparent 34%),
+    linear-gradient(180deg, color-mix(in srgb, var(--background) 96%, #020617 4%), color-mix(in srgb, var(--background) 90%, #0b1220 10%));
+}
+
+html.dark .solid-field-form-frame,
+[data-theme="dark"] .solid-field-form-frame {
+  border-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--card) 96%, #172554 4%),
+    color-mix(in srgb, var(--card) 88%, #020617 12%)
+  );
+  box-shadow:
+    0 20px 44px rgba(2, 6, 23, 0.32),
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+html.dark .solid-field-form-tabs .solid-notebook-tablist,
+[data-theme="dark"] .solid-field-form-tabs .solid-notebook-tablist {
+  border-bottom-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+}
+
+html.dark .solid-field-form-tabs .solid-tabs-panel,
+[data-theme="dark"] .solid-field-form-tabs .solid-tabs-panel {
+  background: color-mix(in srgb, var(--background) 74%, var(--card) 26%);
+  border-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+html.dark .solid-field-form-actions,
+[data-theme="dark"] .solid-field-form-actions {
+  border-top-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+}
+
+html.dark .solid-field-form-shell .solid-file-icon-btn,
+[data-theme="dark"] .solid-field-form-shell .solid-file-icon-btn {
+  border-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+  background: color-mix(in srgb, var(--background) 72%, var(--card) 28%);
+  color: color-mix(in srgb, var(--foreground) 84%, transparent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+html.dark .solid-field-form-shell .solid-file-icon-btn:hover:not(:disabled),
+[data-theme="dark"] .solid-field-form-shell .solid-file-icon-btn:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 48%, #172554 22%);
+  border-color: color-mix(in srgb, var(--primary) 26%, var(--border) 74%);
+  color: var(--foreground);
+}
+
+html.dark .solid-field-form-shell .solid-file-icon-btn.is-danger,
+[data-theme="dark"] .solid-field-form-shell .solid-file-icon-btn.is-danger {
+  background: color-mix(in srgb, #7f1d1d 38%, var(--card) 62%);
+  border-color: color-mix(in srgb, #ef4444 28%, var(--border) 72%);
+  color: #fecaca;
+}
+
+html.dark .solid-field-form-shell .solid-file-icon-btn.is-danger:hover:not(:disabled),
+[data-theme="dark"] .solid-field-form-shell .solid-file-icon-btn.is-danger:hover:not(:disabled) {
+  background: color-mix(in srgb, #991b1b 44%, var(--card) 56%);
+  border-color: color-mix(in srgb, #f87171 34%, var(--border) 66%);
+  color: #fee2e2;
+}
+
 @media (max-width: 640px) {
   .solid-field-form-scroll {
     padding: 0.75rem;
diff --git a/src/components/core/module/ModuleMetadataExplorer.css b/src/components/core/module/ModuleMetadataExplorer.css
index 082b0d17..48f059fc 100644
--- a/src/components/core/module/ModuleMetadataExplorer.css
+++ b/src/components/core/module/ModuleMetadataExplorer.css
@@ -649,6 +649,70 @@
   opacity: 0.45;
 }
 
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor,
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_gutter,
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_scroller,
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_content {
+  background: color-mix(in srgb, #0f172a 92%, var(--surface-card, #111827) 8%) !important;
+  color: #e5edf8 !important;
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_gutter {
+  color: #94a3b8 !important;
+  border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_gutter-active-line,
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_active-line,
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_marker-layer .ace_active-line {
+  background: rgba(148, 163, 184, 0.12) !important;
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_marker-layer .ace_selection {
+  background: rgba(96, 165, 250, 0.22) !important;
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_marker-layer .ace_bracket {
+  border: 1px solid rgba(148, 163, 184, 0.55) !important;
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_cursor {
+  border-left-color: #f8fafc !important;
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_print-margin {
+  background: rgba(148, 163, 184, 0.12) !important;
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_constant,
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_constant.ace_numeric,
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_constant.ace_language {
+  color: #f59e0b !important;
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_string {
+  color: #86efac !important;
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_keyword,
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_meta {
+  color: #93c5fd !important;
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_variable,
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_variable.ace_parameter {
+  color: #fda4af !important;
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_comment {
+  color: #64748b !important;
+}
+
+[data-theme="dark"] .solid-module-explorer-jsoneditor .ace-jsoneditor .ace_invalid {
+  color: #fecaca !important;
+  background: rgba(220, 38, 38, 0.28) !important;
+}
+
 @media (max-width: 1200px) {
   .solid-module-explorer-workspace {
     grid-template-columns: 1fr !important;
diff --git a/src/components/core/module/ModulePackageDialog.css b/src/components/core/module/ModulePackageDialog.css
index 3ecab063..53faf3ec 100644
--- a/src/components/core/module/ModulePackageDialog.css
+++ b/src/components/core/module/ModulePackageDialog.css
@@ -26,7 +26,11 @@
   padding: 18px;
   border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
   border-radius: 18px;
-  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, white 2%), var(--card));
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--card) 97%, var(--background) 3%),
+    color-mix(in srgb, var(--card) 90%, var(--background) 10%)
+  );
 }
 
 .solid-module-package-panel--wizard {
@@ -146,7 +150,11 @@
   padding: 18px 14px 10px;
   border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
   border-radius: 22px;
-  background: color-mix(in srgb, var(--background) 72%, white 28%);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--background) 82%, var(--card) 18%),
+    color-mix(in srgb, var(--background) 70%, var(--card) 30%)
+  );
 }
 
 .solid-module-package-stepper__item {
@@ -182,7 +190,7 @@
   width: 48px;
   height: 48px;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--background) 90%, white 10%);
+  background: color-mix(in srgb, var(--background) 86%, var(--card) 14%);
   border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
   color: color-mix(in srgb, var(--foreground) 78%, transparent);
   font-size: 18px;
@@ -192,15 +200,15 @@
 
 .solid-module-package-stepper__item.is-done .solid-module-package-stepper__node,
 .solid-module-package-stepper__item.is-current .solid-module-package-stepper__node {
-  background: #05060a;
-  color: white;
-  border-color: #05060a;
+  background: color-mix(in srgb, var(--foreground) 18%, var(--background) 82%);
+  color: var(--card-foreground, white);
+  border-color: color-mix(in srgb, var(--foreground) 22%, var(--border) 78%);
 }
 
 .solid-module-package-stepper__item.is-warning .solid-module-package-stepper__node {
-  background: color-mix(in srgb, #f59e0b 18%, white 82%);
-  color: color-mix(in srgb, #92400e 92%, transparent);
-  border-color: color-mix(in srgb, #f59e0b 36%, transparent);
+  background: color-mix(in srgb, #f59e0b 18%, var(--background) 82%);
+  color: color-mix(in srgb, #fbbf24 74%, var(--foreground) 26%);
+  border-color: color-mix(in srgb, #f59e0b 36%, var(--border) 64%);
 }
 
 .solid-module-package-stepper__button {
@@ -255,7 +263,11 @@
   border-radius: 22px;
   background:
     radial-gradient(circle at top left, color-mix(in srgb, #14b8a6 7%, transparent), transparent 44%),
-    linear-gradient(180deg, color-mix(in srgb, var(--background) 60%, white 40%), white);
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--card) 94%, var(--background) 6%),
+      color-mix(in srgb, var(--background) 78%, var(--card) 22%)
+    );
 }
 
 .solid-module-package-stage__meta {
@@ -449,8 +461,9 @@
   max-height: 320px;
   overflow: auto;
   border-radius: 16px;
-  background: color-mix(in srgb, #0f172a 96%, transparent);
-  color: #e2e8f0;
+  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  background: color-mix(in srgb, var(--surface-ground, #0f172a) 86%, var(--background) 14%);
+  color: color-mix(in srgb, var(--foreground) 92%, transparent);
   font-family: var(--font-mono, "SFMono-Regular", Consolas, monospace);
   font-size: 11px;
   line-height: 1.6;
@@ -506,6 +519,98 @@
   line-height: 1.55;
 }
 
+html.dark .solid-module-package-panel,
+[data-theme="dark"] .solid-module-package-panel {
+  border-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--card) 96%, #172554 4%),
+    color-mix(in srgb, var(--card) 88%, #020617 12%)
+  );
+  box-shadow:
+    0 18px 40px rgba(2, 6, 23, 0.32),
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+html.dark .solid-module-package-dropzone,
+[data-theme="dark"] .solid-module-package-dropzone {
+  border-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+  background:
+    radial-gradient(circle at top right, color-mix(in srgb, #14b8a6 14%, transparent), transparent 48%),
+    linear-gradient(180deg, color-mix(in srgb, var(--background) 76%, #0b1220 24%), color-mix(in srgb, var(--card) 86%, #020617 14%));
+}
+
+html.dark .solid-module-package-file-card,
+html.dark .solid-module-package-metric,
+html.dark .solid-module-package-checklist__section,
+html.dark .solid-module-package-notice,
+html.dark .solid-module-package-tree,
+html.dark .solid-module-package-empty,
+[data-theme="dark"] .solid-module-package-file-card,
+[data-theme="dark"] .solid-module-package-metric,
+[data-theme="dark"] .solid-module-package-checklist__section,
+[data-theme="dark"] .solid-module-package-notice,
+[data-theme="dark"] .solid-module-package-tree,
+[data-theme="dark"] .solid-module-package-empty {
+  border-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+  background: color-mix(in srgb, var(--background) 72%, var(--card) 28%);
+}
+
+html.dark .solid-module-package-stepper,
+[data-theme="dark"] .solid-module-package-stepper {
+  border-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--background) 88%, #0b1220 12%),
+    color-mix(in srgb, var(--card) 82%, #020617 18%)
+  );
+}
+
+html.dark .solid-module-package-stepper__node,
+[data-theme="dark"] .solid-module-package-stepper__node {
+  border-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+  background: color-mix(in srgb, var(--background) 76%, var(--card) 24%);
+  color: color-mix(in srgb, var(--foreground) 82%, transparent);
+  box-shadow:
+    0 10px 24px rgba(2, 6, 23, 0.42),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+html.dark .solid-module-package-stepper__item.is-done .solid-module-package-stepper__node,
+html.dark .solid-module-package-stepper__item.is-current .solid-module-package-stepper__node,
+[data-theme="dark"] .solid-module-package-stepper__item.is-done .solid-module-package-stepper__node,
+[data-theme="dark"] .solid-module-package-stepper__item.is-current .solid-module-package-stepper__node {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--primary) 64%, #1e293b 36%),
+    color-mix(in srgb, var(--primary) 46%, #0f172a 54%)
+  );
+  color: var(--primary-foreground, #fff);
+  border-color: color-mix(in srgb, var(--primary) 56%, var(--border) 44%);
+}
+
+html.dark .solid-module-package-stage,
+[data-theme="dark"] .solid-module-package-stage {
+  border-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+  background:
+    radial-gradient(circle at top left, color-mix(in srgb, #14b8a6 10%, transparent), transparent 42%),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--card) 94%, #172554 6%),
+      color-mix(in srgb, var(--background) 90%, #020617 10%)
+    );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    0 20px 44px rgba(2, 6, 23, 0.28);
+}
+
+html.dark .solid-module-package-step__output,
+[data-theme="dark"] .solid-module-package-step__output {
+  border-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
+  background: color-mix(in srgb, var(--surface-ground, #111827) 92%, #020617 8%);
+  color: color-mix(in srgb, var(--foreground) 90%, #ffffff 10%);
+}
+
 @media (max-width: 1024px) {
   .solid-module-package-stepper {
     grid-template-columns: repeat(4, minmax(140px, 1fr));