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

1 files changed, 45 insertions, 31 deletions

diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx
index 68d0d10ce..ba628a3f7 100644
--- a/src/view/com/composer/text-input/TextInput.web.tsx
+++ b/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,41 +43,54 @@ export const TextInput = React.forwardRef(
     TextInputProps,
     ref,
   ) => {
-    const editor = useEditor({
-      extensions: [
-        Document,
-        Link.configure({
-          protocols: ['http', 'https'],
-          autolink: true,
-        }),
-        Mention.configure({
-          HTMLAttributes: {
-            class: 'mention',
+    const modeClass = useColorSchemeStyle(
+      'ProseMirror-light',
+      'ProseMirror-dark',
+    )
+
+    const editor = useEditor(
+      {
+        extensions: [
+          Document,
+          Link.configure({
+            protocols: ['http', 'https'],
+            autolink: true,
+          }),
+          Mention.configure({
+            HTMLAttributes: {
+              class: 'mention',
+            },
+            suggestion: createSuggestion({autocompleteView}),
+          }),
+          Paragraph,
+          Placeholder.configure({
+            placeholder,
+          }),
+          Text,
+        ],
+        editorProps: {
+          attributes: {
+            class: modeClass,
           },
-          suggestion: createSuggestion({autocompleteView}),
-        }),
-        Paragraph,
-        Placeholder.configure({
-          placeholder,
-        }),
-        Text,
-      ],
-      content: richtext.text.toString(),
-      autofocus: true,
-      editable: true,
-      injectCSS: true,
-      onUpdate({editor: editorProp}) {
-        const json = editorProp.getJSON()
+        },
+        content: richtext.text.toString(),
+        autofocus: true,
+        editable: true,
+        injectCSS: true,
+        onUpdate({editor: editorProp}) {
+          const json = editorProp.getJSON()
 
-        const newRt = new RichText({text: editorJsonToText(json).trim()})
-        setRichText(newRt)
+          const newRt = new RichText({text: editorJsonToText(json).trim()})
+          setRichText(newRt)
 
-        const newSuggestedLinks = new Set(editorJsonToLinks(json))
-        if (!isEqual(newSuggestedLinks, suggestedLinks)) {
-          onSuggestedLinksChanged(newSuggestedLinks)
-        }
+          const newSuggestedLinks = new Set(editorJsonToLinks(json))
+          if (!isEqual(newSuggestedLinks, suggestedLinks)) {
+            onSuggestedLinksChanged(newSuggestedLinks)
+          }
+        },
       },
-    })
+      [modeClass],
+    )
 
     React.useImperativeHandle(ref, () => ({
       focus: () => {}, // TODO