wip darkmode

packages/webapp/src/components/Forms/BlueprintFormik.tsx

@@ -9,6 +9,7 @@ import {
   Switch,
   EditableText,
   TextArea,
+  HTMLSelect,
 } from '@blueprintjs-formik/core';
 import { MultiSelect, SuggestField } from '@blueprintjs-formik/select';
 import { DateInput } from '@blueprintjs-formik/datetime';
@@ -27,4 +28,5 @@ export {
   SuggestField as FSuggest,
   TextArea as FTextArea,
   DateInput as FDateInput,
+  HTMLSelect as FHTMLSelect,
 };

packages/webapp/src/components/Forms/Select.tsx

@@ -18,16 +18,23 @@ export function FSelect({ ...props }) {
 }
 
 const SelectButton = styled(Button)`
+  --x-color-select-background: #fff;
+  --x-color-select-border: #ced4da;
+  --x-color-select-caret: #8d8d8d;
+
+  --x-color-select-background: rgba(17, 20, 24, 0.3);
+  --x-color-select-border: rgba(255, 255, 255, 0.15);
+  --x-color-select-caret: rgba(255, 255, 255, 0.25);
+  
   outline: none;
   box-shadow: 0 0 0 transparent;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--x-color-select-border);
   position: relative;
   padding-right: 30px;
 
   &.bp4-small {
     padding-right: 24px;
   }
-
   &:not(.is-selected):not([class*='bp4-intent-']):not(.bp4-minimal) {
     color: #8f99a8;
   }
@@ -36,10 +43,9 @@ const SelectButton = styled(Button)`
     display: inline-block;
     width: 0;
     height: 0;
-
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
-    border-top: 5px solid #8d8d8d;
+    border-top: 5px solid var(--x-color-select-caret);
 
     position: absolute;
     right: 0;
@@ -51,7 +57,7 @@ const SelectButton = styled(Button)`
   &:not([class*='bp4-intent-']):not(.bp4-disabled) {
     &,
     &:hover {
-      background: #fff;
+      background: var(--x-color-select-background);
     }
   }
   .bp4-intent-danger & {