CSS change to improve GUI night mode

qim3d/css/gradio.css

@@ -58,14 +58,14 @@
   --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
   --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
   --body-background-fill: var(--background-fill-primary);
-  --body-text-color: var(--neutral-800);
+  --body-text-color: var(--neutral-300); /*Headers*/
   --body-text-size: var(--text-md);
   --body-text-weight: 400;
   --embed-radius: var(--radius-lg);
   --color-accent: var(--primary-500);
   --color-accent-soft: var(--primary-50);
-  --background-fill-primary: white;
-  --background-fill-secondary: var(--neutral-50);
+  --background-fill-primary: var(--neutral-900); /*File explorer background*/
+  --background-fill-secondary: var(--neutral-500); /*Dropdown hover*/
   --border-color-accent: var(--primary-300);
   --border-color-primary: var(--neutral-200);
   --link-text-color: var(--secondary-600);
@@ -87,7 +87,7 @@
   --block-label-border-color: var(--border-color-primary);
   --block-label-border-width: 1px;
   --block-label-shadow: var(--block-shadow);
-  --block-label-text-color: var(--neutral-500);
+  --block-label-text-color: var(--neutral-50); /*the small labels in corners*/
   --block-label-margin: 0;
   --block-label-padding: var(--spacing-sm) var(--spacing-lg);
   --block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
@@ -100,7 +100,7 @@
   --block-title-background-fill: none;
   --block-title-border-color: none;
   --block-title-border-width: 0px;
-  --block-title-text-color: var(--neutral-500);
+  --block-title-text-color: var(--neutral-50);
   --block-title-padding: 0;
   --block-title-radius: none;
   --block-title-text-size: var(--text-md);
@@ -115,7 +115,7 @@
   --section-header-text-weight: 400;
   --border-color-accent-subdued: var(--primary-200);
   --chatbot-code-background-color: var(--neutral-100);
-  --checkbox-background-color: var(--background-fill-primary);
+  --checkbox-background-color: white;
   --checkbox-background-color-focus: var(--checkbox-background-color);
   --checkbox-background-color-hover: var(--checkbox-background-color);
   --checkbox-background-color-selected: var(--secondary-600);
@@ -125,8 +125,8 @@
   --checkbox-border-color-selected: var(--secondary-600);
   --checkbox-border-radius: var(--radius-sm);
   --checkbox-border-width: var(--input-border-width);
-  --checkbox-label-background-fill: linear-gradient(to top, var(--neutral-50), white);
-  --checkbox-label-background-fill-hover: linear-gradient(to top, var(--neutral-100), white);
+  --checkbox-label-background-fill: var(--background-fill-primary);/*linear-gradient(to top, var(--neutral-50), white);*/
+  --checkbox-label-background-fill-hover: var(--neutral-500);/*linear-gradient(to top, var(--neutral-100), white);*/
   --checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
   --checkbox-label-border-color: var(--border-color-primary);
   --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
@@ -146,7 +146,7 @@
   --error-border-width: 1px;
   --error-text-color: #b91c1c;
   --error-icon-color: #b91c1c;
-  --input-background-fill: white;
+  --input-background-fill: var(--background-fill-primary);
   --input-background-fill-focus: var(--secondary-500);
   --input-background-fill-hover: var(--input-background-fill);
   --input-border-color: var(--border-color-primary);
@@ -158,7 +158,7 @@
   --input-radius: var(--radius-lg);
   --input-shadow: 0 0 0 var(--shadow-spread) transparent, var(--shadow-inset);
   --input-shadow-focus: 0 0 0 var(--shadow-spread) var(--secondary-50), var(--shadow-inset);
-  --input-text-size: var(--text-md);
+  --input-text-size: var(--text-lg);
   --input-text-weight: 400;
   --loader-color: var(--color-accent);
   --prose-text-size: var(--text-md);