Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

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

Make dim theme dim (#2966)

* Make dim color scheme dim

* Tweaks

* Overall tweaks

* We have to go darker

* Tweak saturation of blues in dim

* Increase contrast on dark-dark mode

* adjust dim

---------

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>
Co-authored-by: Hailey <me@haileyok.com>

authored by

dan
Eric Bailey
Paul Frazee
Hailey
and committed by
GitHub
6ae9c5d4 de9df50a

+71 -121
+50 -27
src/alf/themes.ts
··· 73 73 white: tokens.color.gray_0, 74 74 black: tokens.color.trueBlack, 75 75 76 - contrast_25: tokens.color.gray_1000, 77 - contrast_50: tokens.color.gray_975, 78 - contrast_100: tokens.color.gray_950, 79 - contrast_200: tokens.color.gray_900, 80 - contrast_300: tokens.color.gray_800, 81 - contrast_400: tokens.color.gray_700, 82 - contrast_500: tokens.color.gray_600, 83 - contrast_600: tokens.color.gray_500, 84 - contrast_700: tokens.color.gray_400, 85 - contrast_800: tokens.color.gray_300, 86 - contrast_900: tokens.color.gray_200, 87 - contrast_950: tokens.color.gray_100, 88 - contrast_975: tokens.color.gray_50, 76 + contrast_25: `hsl(211, 28%, 8%)`, 77 + contrast_50: `hsl(211, 28%, 11%)`, 78 + contrast_100: `hsl(211, 28%, 16%)`, 79 + contrast_200: `hsl(211, 28%, 24%)`, 80 + contrast_300: `hsl(211, 24%, 31%)`, 81 + contrast_400: `hsl(211, 24%, 38%)`, 82 + contrast_500: `hsl(211, 20%, 44%)`, 83 + contrast_600: `hsl(211, 20%, 55%)`, 84 + contrast_700: `hsl(211, 20%, 63%)`, 85 + contrast_800: `hsl(211, 20%, 71%)`, 86 + contrast_900: `hsl(211, 20%, 79%)`, 87 + contrast_950: `hsl(211, 20%, 87%)`, 88 + contrast_975: `hsl(211, 20%, 95%)`, 89 89 90 90 primary_25: tokens.color.blue_25, 91 91 primary_50: tokens.color.blue_50, ··· 132 132 133 133 export const dimPalette: Palette = { 134 134 ...darkPalette, 135 - black: tokens.color.gray_1000, 135 + black: `hsl(211, 28%, 12%)`, 136 136 137 - contrast_25: tokens.color.gray_975, 138 - contrast_50: tokens.color.gray_950, 139 - contrast_100: tokens.color.gray_900, 140 - contrast_200: tokens.color.gray_800, 141 - contrast_300: tokens.color.gray_700, 142 - contrast_400: tokens.color.gray_600, 143 - contrast_500: tokens.color.gray_500, 144 - contrast_600: tokens.color.gray_400, 145 - contrast_700: tokens.color.gray_300, 146 - contrast_800: tokens.color.gray_200, 147 - contrast_900: tokens.color.gray_100, 148 - contrast_950: tokens.color.gray_50, 149 - contrast_975: tokens.color.gray_25, 137 + contrast_25: `hsl(211, 28%, 15%)`, 138 + contrast_50: `hsl(211, 28%, 18%)`, 139 + contrast_100: `hsl(211, 28%, 24%)`, 140 + contrast_200: `hsl(211, 28%, 27%)`, 141 + contrast_300: `hsl(211, 24%, 34%)`, 142 + contrast_400: `hsl(211, 24%, 41%)`, 143 + contrast_500: `hsl(211, 20%, 52%)`, 144 + contrast_600: `hsl(211, 20%, 55%)`, 145 + contrast_700: `hsl(211, 20%, 67%)`, 146 + contrast_800: `hsl(211, 20%, 71%)`, 147 + contrast_900: `hsl(211, 20%, 79%)`, 148 + contrast_950: `hsl(211, 20%, 87%)`, 149 + contrast_975: `hsl(211, 20%, 95%)`, 150 + 151 + primary_600: `hsl(211, 95%, 39%)`, 152 + primary_700: `hsl(211, 90%, 30%)`, 153 + primary_800: `hsl(211, 90%, 23%)`, 154 + primary_900: `hsl(211, 80%, 16%)`, 155 + primary_950: `hsl(211, 80%, 13%)`, 156 + primary_975: `hsl(211, 80%, 10%)`, 150 157 } as const 151 158 152 159 export const light = { ··· 325 332 export const dim: Theme = { 326 333 ...dark, 327 334 name: 'dim', 335 + palette: dimPalette, 328 336 atoms: { 329 337 ...dark.atoms, 330 338 text: { ··· 392 400 }, 393 401 border_contrast_high: { 394 402 borderColor: dimPalette.contrast_300, 403 + }, 404 + shadow_sm: { 405 + ...atoms.shadow_sm, 406 + shadowOpacity: 0.7, 407 + shadowColor: `hsl(211, 28%, 3%)`, 408 + }, 409 + shadow_md: { 410 + ...atoms.shadow_md, 411 + shadowOpacity: 0.7, 412 + shadowColor: `hsl(211, 28%, 3%)`, 413 + }, 414 + shadow_lg: { 415 + ...atoms.shadow_lg, 416 + shadowOpacity: 0.7, 417 + shadowColor: `hsl(211, 28%, 3%)`, 395 418 }, 396 419 }, 397 420 }
+1 -1
src/components/forms/DateField/index.android.tsx
··· 98 98 timeZoneName={'Etc/UTC'} 99 99 display="spinner" 100 100 // @ts-ignore applies in iOS only -prf 101 - themeVariant={t.name === 'dark' ? 'dark' : 'light'} 101 + themeVariant={t.name === 'light' ? 'light' : 'dark'} 102 102 value={new Date(value)} 103 103 onChange={onChangeInternal} 104 104 />
+1 -1
src/components/forms/DateField/index.tsx
··· 47 47 mode="date" 48 48 timeZoneName={'Etc/UTC'} 49 49 display="spinner" 50 - themeVariant={t.name === 'dark' ? 'dark' : 'light'} 50 + themeVariant={t.name === 'light' ? 'light' : 'dark'} 51 51 value={new Date(value)} 52 52 onChange={onChangeInternal} 53 53 />
+2 -2
src/lib/themes.ts
··· 306 306 307 307 // non-standard 308 308 textVeryLight: darkPalette.contrast_400, 309 - replyLine: darkPalette.contrast_100, 309 + replyLine: darkPalette.contrast_200, 310 310 replyLineDot: darkPalette.contrast_200, 311 311 unreadNotifBg: darkPalette.primary_975, 312 312 unreadNotifBorder: darkPalette.primary_900, ··· 355 355 356 356 // non-standard 357 357 textVeryLight: dimPalette.contrast_400, 358 - replyLine: dimPalette.contrast_100, 358 + replyLine: dimPalette.contrast_200, 359 359 replyLineDot: dimPalette.contrast_200, 360 360 unreadNotifBg: dimPalette.primary_975, 361 361 unreadNotifBorder: dimPalette.primary_900,
+2 -2
src/view/com/post-thread/PostThreadItem.tsx
··· 449 449 styles.replyLine, 450 450 { 451 451 flexGrow: 1, 452 - backgroundColor: pal.colors.border, 452 + backgroundColor: pal.colors.replyLine, 453 453 marginBottom: 4, 454 454 }, 455 455 ]} ··· 487 487 styles.replyLine, 488 488 { 489 489 flexGrow: 1, 490 - backgroundColor: pal.colors.border, 490 + backgroundColor: pal.colors.replyLine, 491 491 marginTop: 4, 492 492 }, 493 493 ]}
+15 -88
src/view/screens/Storybook/Palette.tsx
··· 2 2 import {View} from 'react-native' 3 3 4 4 import * as tokens from '#/alf/tokens' 5 - import {atoms as a} from '#/alf' 5 + import {atoms as a, useTheme} from '#/alf' 6 6 7 7 export function Palette() { 8 + const t = useTheme() 8 9 return ( 9 10 <View style={[a.gap_md]}> 10 11 <View style={[a.flex_row, a.gap_md]}> 11 - <View 12 - style={[a.flex_1, {height: 60, backgroundColor: tokens.color.gray_0}]} 13 - /> 14 - <View 15 - style={[ 16 - a.flex_1, 17 - {height: 60, backgroundColor: tokens.color.gray_25}, 18 - ]} 19 - /> 20 - <View 21 - style={[ 22 - a.flex_1, 23 - {height: 60, backgroundColor: tokens.color.gray_50}, 24 - ]} 25 - /> 26 - <View 27 - style={[ 28 - a.flex_1, 29 - {height: 60, backgroundColor: tokens.color.gray_100}, 30 - ]} 31 - /> 32 - <View 33 - style={[ 34 - a.flex_1, 35 - {height: 60, backgroundColor: tokens.color.gray_200}, 36 - ]} 37 - /> 38 - <View 39 - style={[ 40 - a.flex_1, 41 - {height: 60, backgroundColor: tokens.color.gray_300}, 42 - ]} 43 - /> 44 - <View 45 - style={[ 46 - a.flex_1, 47 - {height: 60, backgroundColor: tokens.color.gray_400}, 48 - ]} 49 - /> 50 - <View 51 - style={[ 52 - a.flex_1, 53 - {height: 60, backgroundColor: tokens.color.gray_500}, 54 - ]} 55 - /> 56 - <View 57 - style={[ 58 - a.flex_1, 59 - {height: 60, backgroundColor: tokens.color.gray_600}, 60 - ]} 61 - /> 62 - <View 63 - style={[ 64 - a.flex_1, 65 - {height: 60, backgroundColor: tokens.color.gray_700}, 66 - ]} 67 - /> 68 - <View 69 - style={[ 70 - a.flex_1, 71 - {height: 60, backgroundColor: tokens.color.gray_800}, 72 - ]} 73 - /> 74 - <View 75 - style={[ 76 - a.flex_1, 77 - {height: 60, backgroundColor: tokens.color.gray_900}, 78 - ]} 79 - /> 80 - <View 81 - style={[ 82 - a.flex_1, 83 - {height: 60, backgroundColor: tokens.color.gray_950}, 84 - ]} 85 - /> 86 - <View 87 - style={[ 88 - a.flex_1, 89 - {height: 60, backgroundColor: tokens.color.gray_975}, 90 - ]} 91 - /> 92 - <View 93 - style={[ 94 - a.flex_1, 95 - {height: 60, backgroundColor: tokens.color.gray_1000}, 96 - ]} 97 - /> 12 + <View style={[a.flex_1, t.atoms.bg_contrast_25, {height: 60}]} /> 13 + <View style={[a.flex_1, t.atoms.bg_contrast_50, {height: 60}]} /> 14 + <View style={[a.flex_1, t.atoms.bg_contrast_100, {height: 60}]} /> 15 + <View style={[a.flex_1, t.atoms.bg_contrast_200, {height: 60}]} /> 16 + <View style={[a.flex_1, t.atoms.bg_contrast_300, {height: 60}]} /> 17 + <View style={[a.flex_1, t.atoms.bg_contrast_400, {height: 60}]} /> 18 + <View style={[a.flex_1, t.atoms.bg_contrast_500, {height: 60}]} /> 19 + <View style={[a.flex_1, t.atoms.bg_contrast_600, {height: 60}]} /> 20 + <View style={[a.flex_1, t.atoms.bg_contrast_700, {height: 60}]} /> 21 + <View style={[a.flex_1, t.atoms.bg_contrast_800, {height: 60}]} /> 22 + <View style={[a.flex_1, t.atoms.bg_contrast_900, {height: 60}]} /> 23 + <View style={[a.flex_1, t.atoms.bg_contrast_950, {height: 60}]} /> 24 + <View style={[a.flex_1, t.atoms.bg_contrast_975, {height: 60}]} /> 98 25 </View> 99 26 100 27 <View style={[a.flex_row, a.gap_md]}>