Web darkmode fixes (#474)

* Change dark mode borders to be slightly lighter than the bg rather than slightly darker

* Add dark mode styling to web composer

* Fix editprofile darkmode

src/lib/themes.ts

@@ -297,7 +297,7 @@ export const darkTheme: Theme = {
       textLight: colors.gray3,
       textInverted: colors.black,
       link: colors.blue3,
-      border: colors.black,
+      border: colors.gray7,
       borderDark: colors.gray6,
       icon: colors.gray4,
 

src/view/com/composer/text-input/TextInput.web.tsx

@@ -11,6 +11,7 @@ import {Text} from '@tiptap/extension-text'
 import isEqual from 'lodash.isequal'
 import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
 import {createSuggestion} from './web/Autocomplete'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 
 export interface TextInputRef {
   focus: () => void
@@ -42,7 +43,13 @@ export const TextInput = React.forwardRef(
     TextInputProps,
     ref,
   ) => {
-    const editor = useEditor({
+    const modeClass = useColorSchemeStyle(
+      'ProseMirror-light',
+      'ProseMirror-dark',
+    )
+
+    const editor = useEditor(
+      {
         extensions: [
           Document,
           Link.configure({
@@ -61,6 +68,11 @@ export const TextInput = React.forwardRef(
           }),
           Text,
         ],
+        editorProps: {
+          attributes: {
+            class: modeClass,
+          },
+        },
         content: richtext.text.toString(),
         autofocus: true,
         editable: true,
@@ -76,7 +88,9 @@ export const TextInput = React.forwardRef(
             onSuggestedLinksChanged(newSuggestedLinks)
           }
         },
-    })
+      },
+      [modeClass],
+    )
 
     React.useImperativeHandle(ref, () => ({
       focus: () => {}, // TODO

src/view/com/modals/EditProfile.tsx

@@ -148,7 +148,7 @@ export function Component({
           <Text style={[styles.label, pal.text]}>Display Name</Text>
           <TextInput
             testID="editProfileDisplayNameInput"
-            style={[styles.textInput, pal.text]}
+            style={[styles.textInput, pal.border, pal.text]}
             placeholder="e.g. Alice Roberts"
             placeholderTextColor={colors.gray4}
             value={displayName}
@@ -159,7 +159,7 @@ export function Component({
           <Text style={[styles.label, pal.text]}>Description</Text>
           <TextInput
             testID="editProfileDescriptionInput"
-            style={[styles.textArea, pal.text]}
+            style={[styles.textArea, pal.border, pal.text]}
             placeholder="e.g. Artist, dog-lover, and memelord."
             placeholderTextColor={colors.gray4}
             keyboardAppearance={theme.colorScheme}
@@ -217,21 +217,17 @@ const styles = StyleSheet.create({
   },
   textInput: {
     borderWidth: 1,
-    borderColor: colors.gray3,
     borderRadius: 6,
     paddingHorizontal: 14,
     paddingVertical: 10,
     fontSize: 16,
-    color: colors.black,
   },
   textArea: {
     borderWidth: 1,
-    borderColor: colors.gray3,
     borderRadius: 6,
     paddingHorizontal: 12,
     paddingTop: 10,
     fontSize: 16,
-    color: colors.black,
     height: 100,
     textAlignVertical: 'top',
   },
@@ -252,8 +248,6 @@ const styles = StyleSheet.create({
     height: 84,
     borderWidth: 2,
     borderRadius: 42,
-    borderColor: colors.white,
-    backgroundColor: colors.white,
   },
   photos: {
     marginBottom: 36,

web/index.html

@@ -82,6 +82,9 @@
         font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         min-height: 140px;
       }
+      .ProseMirror-dark {
+        color: white;
+      }
       .ProseMirror p {
         margin: 0;
       }