Keep Parse interface readable in dark mode

style.css

@@ -1048,6 +1048,204 @@ body,
   border-radius: 0 !important;
 }
 
+/*
+ * The Parse interface has an intentionally light visual design. Gradio's
+ * dark theme otherwise leaks dark-mode text and component colors into these
+ * fixed light surfaces, which can leave text with insufficient contrast.
+ */
+body.dark,
+body.dark .gradio-container {
+  color-scheme: light;
+}
+
+body.dark .gradio-container {
+  --body-background-fill: var(--white);
+  --background-fill-primary: var(--white);
+  --background-fill-secondary: var(--marble-100);
+  --block-background-fill: var(--white);
+  --block-border-color: var(--marble-300);
+  --block-label-background-fill: var(--white);
+  --block-label-text-color: var(--volcanic-700);
+  --body-text-color: var(--volcanic-900);
+  --body-text-color-subdued: var(--volcanic-600);
+  --border-color-primary: var(--marble-300);
+  --button-secondary-background-fill: var(--white);
+  --button-secondary-background-fill-hover: var(--marble-100);
+  --button-secondary-text-color: var(--volcanic-900);
+  --code-background-fill: var(--white);
+  --code-foreground: var(--result-text);
+  --input-background-fill: var(--white);
+  --input-border-color: var(--marble-300);
+  --input-placeholder-color: var(--marble-500);
+  color: var(--volcanic-900);
+  background: var(--white);
+}
+
+body.dark .gradio-container .main.app,
+body.dark .gradio-container main > .column,
+body.dark #header-shell,
+body.dark #upload-screen,
+body.dark #workspace,
+body.dark #workspace-grid,
+body.dark #document-pane,
+body.dark #result-pane,
+body.dark .settings-heading,
+body.dark #parse-controls,
+body.dark #workspace-actions,
+body.dark #output-tabs,
+body.dark #output-tabs .tab-wrapper,
+body.dark #output-tabs .tab-container[role="tablist"],
+body.dark #output-tabs .tabitem,
+body.dark .text-output.block,
+body.dark .visual-output.block {
+  color: var(--volcanic-900) !important;
+  background: var(--white) !important;
+}
+
+body.dark .upload-intro h1,
+body.dark .eyebrow,
+body.dark .file-name > span:last-child,
+body.dark .settings-heading,
+body.dark .settings-heading h2,
+body.dark #parse-controls label {
+  color: var(--volcanic-900) !important;
+}
+
+body.dark .upload-subtitle,
+body.dark .privacy-note,
+body.dark .privacy-note a {
+  color: var(--volcanic-600) !important;
+}
+
+body.dark .upload-limits {
+  color: var(--marble-500) !important;
+}
+
+body.dark #document-upload,
+body.dark #document-upload .file-preview-holder,
+body.dark #document-upload .file-preview,
+body.dark #document-upload .file,
+body.dark #document-upload .filename,
+body.dark #document-upload .download {
+  color: var(--volcanic-900) !important;
+  background: var(--white) !important;
+}
+
+body.dark #document-upload .download > a,
+body.dark #document-upload .label-clear-button {
+  color: var(--volcanic-700) !important;
+}
+
+body.dark .file-strip,
+body.dark .file-name,
+body.dark .file-metrics {
+  color: var(--volcanic-900) !important;
+  background: var(--white) !important;
+}
+
+body.dark #parse-controls > .form,
+body.dark #parse-controls > .form > .block {
+  color: var(--volcanic-900) !important;
+  background: var(--white) !important;
+}
+
+body.dark #output-tabs .tab-container[role="tablist"] button {
+  color: #77758b !important;
+  background: transparent !important;
+}
+
+body.dark #output-tabs .tab-container[role="tablist"] button[aria-selected="true"] {
+  color: var(--volcanic-900) !important;
+}
+
+body.dark .text-output.prose,
+body.dark .visual-output.prose {
+  color: var(--result-text) !important;
+  background: var(--white) !important;
+}
+
+body.dark .text-output.prose :where(p, li, strong, em, blockquote, code, pre),
+body.dark .visual-output.prose :where(p, li, strong, em, blockquote, code, pre) {
+  color: inherit !important;
+}
+
+body.dark .text-output h1,
+body.dark .text-output h2,
+body.dark .text-output h3,
+body.dark .text-output h4 {
+  color: var(--result-text) !important;
+}
+
+body.dark .empty-result {
+  color: var(--marble-500) !important;
+}
+
+body.dark .empty-result strong {
+  color: var(--volcanic-700) !important;
+}
+
+body.dark .output-progress {
+  color: var(--volcanic-600) !important;
+  background: var(--white) !important;
+}
+
+body.dark .output-progress strong {
+  color: var(--volcanic-900) !important;
+}
+
+body.dark .table-output table,
+body.dark .table-output th,
+body.dark .table-output td {
+  border-color: var(--marble-300) !important;
+  color: var(--volcanic-900) !important;
+  background: var(--white) !important;
+}
+
+body.dark .table-output th {
+  background: var(--marble-100) !important;
+}
+
+body.dark .raw-output,
+body.dark .raw-output .wrap,
+body.dark .raw-output .codemirror-wrapper,
+body.dark .raw-output .cm-editor,
+body.dark .raw-output .cm-scroller,
+body.dark .raw-output .cm-content,
+body.dark .raw-output .cm-line {
+  color: var(--result-text) !important;
+  background: var(--white) !important;
+}
+
+body.dark .raw-output .cm-content * {
+  color: var(--result-text) !important;
+}
+
+body.dark .raw-output .cm-gutters {
+  border-color: var(--marble-300) !important;
+  color: var(--marble-500) !important;
+  background: var(--marble-50) !important;
+}
+
+body.dark .raw-output .cm-activeLine,
+body.dark .raw-output .cm-activeLineGutter {
+  background: var(--marble-100) !important;
+}
+
+body.dark .raw-output .cm-selectionBackground {
+  background: #dbe8ff !important;
+}
+
+body.dark .raw-output .cm-cursor {
+  border-left-color: var(--volcanic-900) !important;
+}
+
+body.dark .configuration-required > *,
+body.dark .page-limit-alert > *,
+body.dark .upload-progress > *,
+body.dark .run-status > * {
+  color: inherit !important;
+}
+
 @media (max-width: 900px) {
   .product-header {
     padding: 0 15px;