Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

authored by

Paul Frazee and committed by
GitHub
f917c426 5caa6a5e

+51 -40
+1 -1
src/lib/themes.ts
··· 297 297 textLight: colors.gray3, 298 298 textInverted: colors.black, 299 299 link: colors.blue3, 300 - border: colors.black, 300 + border: colors.gray7, 301 301 borderDark: colors.gray6, 302 302 icon: colors.gray4, 303 303
+45 -31
src/view/com/composer/text-input/TextInput.web.tsx
··· 11 11 import isEqual from 'lodash.isequal' 12 12 import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete' 13 13 import {createSuggestion} from './web/Autocomplete' 14 + import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' 14 15 15 16 export interface TextInputRef { 16 17 focus: () => void ··· 42 43 TextInputProps, 43 44 ref, 44 45 ) => { 45 - const editor = useEditor({ 46 - extensions: [ 47 - Document, 48 - Link.configure({ 49 - protocols: ['http', 'https'], 50 - autolink: true, 51 - }), 52 - Mention.configure({ 53 - HTMLAttributes: { 54 - class: 'mention', 46 + const modeClass = useColorSchemeStyle( 47 + 'ProseMirror-light', 48 + 'ProseMirror-dark', 49 + ) 50 + 51 + const editor = useEditor( 52 + { 53 + extensions: [ 54 + Document, 55 + Link.configure({ 56 + protocols: ['http', 'https'], 57 + autolink: true, 58 + }), 59 + Mention.configure({ 60 + HTMLAttributes: { 61 + class: 'mention', 62 + }, 63 + suggestion: createSuggestion({autocompleteView}), 64 + }), 65 + Paragraph, 66 + Placeholder.configure({ 67 + placeholder, 68 + }), 69 + Text, 70 + ], 71 + editorProps: { 72 + attributes: { 73 + class: modeClass, 55 74 }, 56 - suggestion: createSuggestion({autocompleteView}), 57 - }), 58 - Paragraph, 59 - Placeholder.configure({ 60 - placeholder, 61 - }), 62 - Text, 63 - ], 64 - content: richtext.text.toString(), 65 - autofocus: true, 66 - editable: true, 67 - injectCSS: true, 68 - onUpdate({editor: editorProp}) { 69 - const json = editorProp.getJSON() 75 + }, 76 + content: richtext.text.toString(), 77 + autofocus: true, 78 + editable: true, 79 + injectCSS: true, 80 + onUpdate({editor: editorProp}) { 81 + const json = editorProp.getJSON() 70 82 71 - const newRt = new RichText({text: editorJsonToText(json).trim()}) 72 - setRichText(newRt) 83 + const newRt = new RichText({text: editorJsonToText(json).trim()}) 84 + setRichText(newRt) 73 85 74 - const newSuggestedLinks = new Set(editorJsonToLinks(json)) 75 - if (!isEqual(newSuggestedLinks, suggestedLinks)) { 76 - onSuggestedLinksChanged(newSuggestedLinks) 77 - } 86 + const newSuggestedLinks = new Set(editorJsonToLinks(json)) 87 + if (!isEqual(newSuggestedLinks, suggestedLinks)) { 88 + onSuggestedLinksChanged(newSuggestedLinks) 89 + } 90 + }, 78 91 }, 79 - }) 92 + [modeClass], 93 + ) 80 94 81 95 React.useImperativeHandle(ref, () => ({ 82 96 focus: () => {}, // TODO
+2 -8
src/view/com/modals/EditProfile.tsx
··· 148 148 <Text style={[styles.label, pal.text]}>Display Name</Text> 149 149 <TextInput 150 150 testID="editProfileDisplayNameInput" 151 - style={[styles.textInput, pal.text]} 151 + style={[styles.textInput, pal.border, pal.text]} 152 152 placeholder="e.g. Alice Roberts" 153 153 placeholderTextColor={colors.gray4} 154 154 value={displayName} ··· 159 159 <Text style={[styles.label, pal.text]}>Description</Text> 160 160 <TextInput 161 161 testID="editProfileDescriptionInput" 162 - style={[styles.textArea, pal.text]} 162 + style={[styles.textArea, pal.border, pal.text]} 163 163 placeholder="e.g. Artist, dog-lover, and memelord." 164 164 placeholderTextColor={colors.gray4} 165 165 keyboardAppearance={theme.colorScheme} ··· 217 217 }, 218 218 textInput: { 219 219 borderWidth: 1, 220 - borderColor: colors.gray3, 221 220 borderRadius: 6, 222 221 paddingHorizontal: 14, 223 222 paddingVertical: 10, 224 223 fontSize: 16, 225 - color: colors.black, 226 224 }, 227 225 textArea: { 228 226 borderWidth: 1, 229 - borderColor: colors.gray3, 230 227 borderRadius: 6, 231 228 paddingHorizontal: 12, 232 229 paddingTop: 10, 233 230 fontSize: 16, 234 - color: colors.black, 235 231 height: 100, 236 232 textAlignVertical: 'top', 237 233 }, ··· 252 248 height: 84, 253 249 borderWidth: 2, 254 250 borderRadius: 42, 255 - borderColor: colors.white, 256 - backgroundColor: colors.white, 257 251 }, 258 252 photos: { 259 253 marginBottom: 36,
+3
web/index.html
··· 82 82 font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 83 83 min-height: 140px; 84 84 } 85 + .ProseMirror-dark { 86 + color: white; 87 + } 85 88 .ProseMirror p { 86 89 margin: 0; 87 90 }