Bluesky app fork with some witchin' additions 💫
Use new palette values for main palette (#2566)
* Use new palette values for main palette
* Drawer bg in dark mode
authored by
Eric Bailey
and committed by
GitHub
9803e174
95f70a9a
+74
-69
+6
-6
bskyweb/templates/base.html
+6
-6
bskyweb/templates/base.html
···
62
62
:root {
63
63
--text: black;
64
64
--background: white;
65
-
--backgroundLight: #F3F3F8;
65
+
--backgroundLight: hsl(211, 20%, 95%);
66
66
}
67
67
html.colorMode--dark {
68
68
--text: white;
69
-
--background: black;
70
-
--backgroundLight: #26272D;
69
+
--background: hsl(211, 20%, 4%);
70
+
--backgroundLight: hsl(211, 20%, 20%);
71
71
color-scheme: dark;
72
72
}
73
73
@media (prefers-color-scheme: light) {
74
74
html.colorMode--system {
75
75
--text: black;
76
76
--background: white;
77
-
--backgroundLight: #F3F3F8;
77
+
--backgroundLight: hsl(211, 20%, 95%);
78
78
}
79
79
}
80
80
@media (prefers-color-scheme: dark) {
81
81
html.colorMode--system {
82
82
--text: white;
83
-
--background: black;
84
-
--backgroundLight: #26272D;
83
+
--background: hsl(211, 20%, 4%);
84
+
--backgroundLight: hsl(211, 20%, 20%);
85
85
color-scheme: dark;
86
86
}
87
87
}
+2
-2
src/alf/themes.ts
+2
-2
src/alf/themes.ts
···
171
171
backgroundColor: lightPalette.contrast_300,
172
172
},
173
173
border: {
174
-
borderColor: lightPalette.contrast_200,
174
+
borderColor: lightPalette.contrast_100,
175
175
},
176
176
border_contrast: {
177
177
borderColor: lightPalette.contrast_400,
···
278
278
color: darkPalette.black,
279
279
},
280
280
bg: {
281
-
backgroundColor: darkPalette.contrast_25,
281
+
backgroundColor: darkPalette.black,
282
282
},
283
283
bg_contrast_25: {
284
284
backgroundColor: darkPalette.contrast_50,
+56
-54
src/lib/themes.ts
+56
-54
src/lib/themes.ts
···
2
2
import type {Theme} from './ThemeContext'
3
3
import {colors} from './styles'
4
4
5
+
import {darkPalette, lightPalette} from '#/alf/themes'
6
+
5
7
export const defaultTheme: Theme = {
6
8
colorScheme: 'light',
7
9
palette: {
8
10
default: {
9
-
background: colors.white,
10
-
backgroundLight: colors.gray1,
11
-
text: colors.black,
12
-
textLight: colors.gray5,
13
-
textInverted: colors.white,
14
-
link: colors.blue3,
15
-
border: '#f0e9e9',
16
-
borderDark: '#e0d9d9',
17
-
icon: colors.gray4,
11
+
background: lightPalette.white,
12
+
backgroundLight: lightPalette.contrast_50,
13
+
text: lightPalette.black,
14
+
textLight: lightPalette.contrast_700,
15
+
textInverted: lightPalette.white,
16
+
link: lightPalette.primary_500,
17
+
border: lightPalette.contrast_100,
18
+
borderDark: lightPalette.contrast_200,
19
+
icon: lightPalette.contrast_500,
18
20
19
21
// non-standard
20
-
textVeryLight: colors.gray4,
21
-
replyLine: colors.gray2,
22
-
replyLineDot: colors.gray3,
23
-
unreadNotifBg: '#ebf6ff',
24
-
unreadNotifBorder: colors.blue1,
25
-
postCtrl: '#71768A',
26
-
brandText: '#0066FF',
27
-
emptyStateIcon: '#B6B6C9',
28
-
borderLinkHover: '#cac1c1',
22
+
textVeryLight: lightPalette.contrast_400,
23
+
replyLine: lightPalette.contrast_100,
24
+
replyLineDot: lightPalette.contrast_200,
25
+
unreadNotifBg: lightPalette.primary_25,
26
+
unreadNotifBorder: lightPalette.primary_100,
27
+
postCtrl: lightPalette.contrast_500,
28
+
brandText: lightPalette.primary_500,
29
+
emptyStateIcon: lightPalette.contrast_300,
30
+
borderLinkHover: lightPalette.contrast_300,
29
31
},
30
32
primary: {
31
33
background: colors.blue3,
···
50
52
icon: colors.green4,
51
53
},
52
54
inverted: {
53
-
background: colors.black,
54
-
backgroundLight: colors.gray6,
55
-
text: colors.white,
56
-
textLight: colors.gray3,
57
-
textInverted: colors.black,
58
-
link: colors.blue2,
59
-
border: colors.gray3,
60
-
borderDark: colors.gray2,
61
-
icon: colors.gray5,
55
+
background: darkPalette.black,
56
+
backgroundLight: darkPalette.contrast_50,
57
+
text: darkPalette.white,
58
+
textLight: darkPalette.contrast_700,
59
+
textInverted: darkPalette.black,
60
+
link: darkPalette.primary_500,
61
+
border: darkPalette.contrast_100,
62
+
borderDark: darkPalette.contrast_200,
63
+
icon: darkPalette.contrast_500,
62
64
},
63
65
error: {
64
66
background: colors.red3,
···
292
294
palette: {
293
295
...defaultTheme.palette,
294
296
default: {
295
-
background: colors.black,
296
-
backgroundLight: colors.gray7,
297
-
text: colors.white,
298
-
textLight: colors.gray3,
299
-
textInverted: colors.black,
300
-
link: colors.blue3,
301
-
border: colors.gray7,
302
-
borderDark: colors.gray6,
303
-
icon: colors.gray4,
297
+
background: darkPalette.black,
298
+
backgroundLight: darkPalette.contrast_50,
299
+
text: darkPalette.white,
300
+
textLight: darkPalette.contrast_700,
301
+
textInverted: darkPalette.black,
302
+
link: darkPalette.primary_500,
303
+
border: darkPalette.contrast_100,
304
+
borderDark: darkPalette.contrast_200,
305
+
icon: darkPalette.contrast_500,
304
306
305
307
// non-standard
306
-
textVeryLight: colors.gray4,
307
-
replyLine: colors.gray5,
308
-
replyLineDot: colors.gray6,
309
-
unreadNotifBg: colors.blue7,
310
-
unreadNotifBorder: colors.blue6,
311
-
postCtrl: '#707489',
312
-
brandText: '#0085ff',
313
-
emptyStateIcon: colors.gray4,
314
-
borderLinkHover: colors.gray5,
308
+
textVeryLight: darkPalette.contrast_400,
309
+
replyLine: darkPalette.contrast_100,
310
+
replyLineDot: darkPalette.contrast_200,
311
+
unreadNotifBg: darkPalette.primary_975,
312
+
unreadNotifBorder: darkPalette.primary_900,
313
+
postCtrl: darkPalette.contrast_500,
314
+
brandText: darkPalette.primary_500,
315
+
emptyStateIcon: darkPalette.contrast_300,
316
+
borderLinkHover: darkPalette.contrast_300,
315
317
},
316
318
primary: {
317
319
...defaultTheme.palette.primary,
···
322
324
textInverted: colors.green2,
323
325
},
324
326
inverted: {
325
-
background: colors.white,
326
-
backgroundLight: colors.gray2,
327
-
text: colors.black,
328
-
textLight: colors.gray5,
329
-
textInverted: colors.white,
330
-
link: colors.blue3,
331
-
border: colors.gray3,
332
-
borderDark: colors.gray4,
333
-
icon: colors.gray1,
327
+
background: lightPalette.white,
328
+
backgroundLight: lightPalette.contrast_50,
329
+
text: lightPalette.black,
330
+
textLight: lightPalette.contrast_700,
331
+
textInverted: lightPalette.white,
332
+
link: lightPalette.primary_500,
333
+
border: lightPalette.contrast_100,
334
+
borderDark: lightPalette.contrast_200,
335
+
icon: lightPalette.contrast_500,
334
336
},
335
337
},
336
338
}
+4
-1
src/view/shell/Drawer.tsx
+4
-1
src/view/shell/Drawer.tsx
···
53
53
import {NavSignupCard} from '#/view/shell/NavSignupCard'
54
54
import {TextLink} from '../com/util/Link'
55
55
56
+
import {useTheme as useAlfTheme} from '#/alf'
57
+
56
58
let DrawerProfileCard = ({
57
59
account,
58
60
onPressProfile,
···
106
108
107
109
let DrawerContent = ({}: {}): React.ReactNode => {
108
110
const theme = useTheme()
111
+
const t = useAlfTheme()
109
112
const pal = usePalette('default')
110
113
const {_} = useLingui()
111
114
const setDrawerOpen = useSetDrawerOpen()
···
208
211
testID="drawer"
209
212
style={[
210
213
styles.view,
211
-
theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode,
214
+
theme.colorScheme === 'light' ? pal.view : t.atoms.bg_contrast_25,
212
215
]}>
213
216
<SafeAreaView style={s.flex1}>
214
217
<ScrollView style={styles.main}>
+6
-6
web/index.html
+6
-6
web/index.html
···
66
66
:root {
67
67
--text: black;
68
68
--background: white;
69
-
--backgroundLight: #F3F3F8;
69
+
--backgroundLight: hsl(211, 20%, 95%);
70
70
}
71
71
html.colorMode--dark {
72
72
--text: white;
73
-
--background: black;
74
-
--backgroundLight: #26272D;
73
+
--background: hsl(211, 20%, 4%);
74
+
--backgroundLight: hsl(211, 20%, 10%);
75
75
color-scheme: dark;
76
76
}
77
77
@media (prefers-color-scheme: light) {
78
78
html.colorMode--system {
79
79
--text: black;
80
80
--background: white;
81
-
--backgroundLight: #F3F3F8;
81
+
--backgroundLight: hsl(211, 20%, 95%);
82
82
}
83
83
}
84
84
@media (prefers-color-scheme: dark) {
85
85
html.colorMode--system {
86
86
--text: white;
87
-
--background: black;
88
-
--backgroundLight: #26272D;
87
+
--background: hsl(211, 20%, 4%);
88
+
--backgroundLight: hsl(211, 20%, 10%);
89
89
color-scheme: dark;
90
90
}
91
91
}