Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

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

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
··· 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
··· 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
··· 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
··· 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
··· 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 }