wip darkmode

packages/webapp/src/containers/Import/ImportDropzone.module.css

@@ -1,32 +1,35 @@
 
 .root {
-  
+  --color-import-dropzone-title-text: #5F6B7C;
+  --color-import-dropzone-subtitle-text: #8F99A8;
+  --color-import-dropzone-hint-text: #8F99A8;
+
+  --color-import-dropzone-title-text: var(--color-light-gray2);
+  --color-import-dropzone-subtitle-text: var(--color-light-gray1);
+  --color-import-dropzone-hint-text: rgba(255, 255, 255, 0.4);
 }
 
 .title{
-  color: #5F6B7C;
+  color: var(--color-import-dropzone-title-text);
   font-weight: 600;
 }
-
 .iconWrap{
   color: #8F99A8;
 }
 .subtitle {
-  color: #8F99A8;
+  color: var(--color-import-dropzone-subtitle-text);
 }
 .dropzoneContent{
   text-align: center;
   margin: auto;  
 }
-
 .buttons-wrap {
   margin-top: 12px;
 }
-
 .dropzoneHint{
   display: flex;
   font-size: 12px;
   margin-top: 6px;
-  color: #8F99A8;
+  color: var(--color-import-dropzone-hint-text);
   justify-content: space-between;
 }

packages/webapp/src/containers/Import/ImportDropzone.tsx

@@ -9,7 +9,7 @@ export function ImportDropzone() {
   const { hideAlerts } = useAlertsManager();
 
   return (
-    <Stack spacing={0}>
+    <Stack spacing={0} className={styles.root}>
       <Field id={'file'} name={'file'} type="file">
         {({ form }) => (
           <ImportDropzoneField

packages/webapp/src/containers/Import/ImportFileFooterActions.tsx

@@ -4,8 +4,8 @@ import { Group } from '@/components';
 import { CLASSES } from '@/constants';
 import { Button, Intent } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import styles from './ImportFileActions.module.scss';
 import { useImportFileContext } from './ImportFileProvider';
+import styles from './ImportFileActions.module.scss';
 
 export function ImportFileUploadFooterActions() {
   const { isSubmitting } = useFormikContext();

packages/webapp/src/containers/Import/ImportSampleDownload.module.scss

@@ -1,23 +1,31 @@
+.root {
+  --color-sample-download-background: #fff;
+  --color-sample-download-border: #d3d8de;
+  --color-sample-download-title-text: #5f6b7c;
+  --color-sample-download-desc-text: #8f99a8;
 
+  --color-sample-download-background: var(--color-dark-gray3);
+  --color-sample-download-border: var(--color-dark-gray5);
+  --color-sample-download-title-text: var(--color-light-gray1);
+  --color-sample-download-desc-text: var(--color-light-gray1);
 
-.root{
-  background: #fff;
-  border: 1px solid #D3D8DE;
+  background: var(--color-sample-download-background);
+  border: 1px solid var(--color-sample-download-border);
   border-radius: 5px;
-  padding: 16px; 
+  padding: 16px;
 }
-.description{
+.description {
   margin: 0;
   margin-top: 6px;
-  color: #8F99A8;
+  color: var(--color-sample-download-desc-text);
 }
-.title{
-  color: #5F6B7C;
+.title {
+  color: var(--color-sample-download-title-text);
   font-weight: 600;
   font-size: 14px;
 }
 
-.buttonWrap{
+.buttonWrap {
   flex: 25% 0;
   text-align: right;
-}
+}

packages/webapp/src/containers/Import/ImportStepper.module.scss

@@ -1,7 +1,10 @@
 .content {
+  --border-color: #DCE0E5;
+  --border-color: var(--color-dark-gray5);
+
   margin-top: 0;
   margin-bottom: 0;
-  border-top: 1px solid #DCE0E5;
+  border-top: 1px solid var(--border-color);
 }
 
 .root {