forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+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
+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
+1
-1
src/components/forms/DateField/index.tsx
+2
-2
src/lib/themes.ts
+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
+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
+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]}>