zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Use new palette values for main palette (#2566) 

* Use new palette values for main palette

* Drawer bg in dark mode
zio/stable
Eric Bailey 2024-01-18 22:54:20 -06:00 committed by GitHub
parent 95f70a9a6a
commit 9803e17449
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 74 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bskyweb/templates/base.html
View File

@ -62,26 +62,26 @@
:root {
--text: black;
--background: white;
--backgroundLight: #F3F3F8;
--backgroundLight: hsl(211, 20%, 95%);
}
html.colorMode--dark {
--text: white;
--background: black;
--backgroundLight: #26272D;
--background: hsl(211, 20%, 4%);
--backgroundLight: hsl(211, 20%, 20%);
color-scheme: dark;
}
@media (prefers-color-scheme: light) {
html.colorMode--system {
--text: black;
--background: white;
--backgroundLight: #F3F3F8;
--backgroundLight: hsl(211, 20%, 95%);
}
}
@media (prefers-color-scheme: dark) {
html.colorMode--system {
--text: white;
--background: black;
--backgroundLight: #26272D;
--background: hsl(211, 20%, 4%);
--backgroundLight: hsl(211, 20%, 20%);
color-scheme: dark;
}
}

4
src/alf/themes.ts
View File

@ -171,7 +171,7 @@ export const light = {
backgroundColor: lightPalette.contrast_300,
},
border: {
borderColor: lightPalette.contrast_200,
borderColor: lightPalette.contrast_100,
},
border_contrast: {
borderColor: lightPalette.contrast_400,
@ -278,7 +278,7 @@ export const dark: Theme = {
color: darkPalette.black,
},
bg: {
backgroundColor: darkPalette.contrast_25,
backgroundColor: darkPalette.black,
},
bg_contrast_25: {
backgroundColor: darkPalette.contrast_50,

110
src/lib/themes.ts
View File

@ -2,30 +2,32 @@ import {Platform} from 'react-native'
import type {Theme} from './ThemeContext'
import {colors} from './styles'
import {darkPalette, lightPalette} from '#/alf/themes'
export const defaultTheme: Theme = {
colorScheme: 'light',
palette: {
default: {
background: colors.white,
backgroundLight: colors.gray1,
text: colors.black,
textLight: colors.gray5,
textInverted: colors.white,
link: colors.blue3,
border: '#f0e9e9',
borderDark: '#e0d9d9',
icon: colors.gray4,
background: lightPalette.white,
backgroundLight: lightPalette.contrast_50,
text: lightPalette.black,
textLight: lightPalette.contrast_700,
textInverted: lightPalette.white,
link: lightPalette.primary_500,
border: lightPalette.contrast_100,
borderDark: lightPalette.contrast_200,
icon: lightPalette.contrast_500,
// non-standard
textVeryLight: colors.gray4,
replyLine: colors.gray2,
replyLineDot: colors.gray3,
unreadNotifBg: '#ebf6ff',
unreadNotifBorder: colors.blue1,
postCtrl: '#71768A',
brandText: '#0066FF',
emptyStateIcon: '#B6B6C9',
borderLinkHover: '#cac1c1',
textVeryLight: lightPalette.contrast_400,
replyLine: lightPalette.contrast_100,
replyLineDot: lightPalette.contrast_200,
unreadNotifBg: lightPalette.primary_25,
unreadNotifBorder: lightPalette.primary_100,
postCtrl: lightPalette.contrast_500,
brandText: lightPalette.primary_500,
emptyStateIcon: lightPalette.contrast_300,
borderLinkHover: lightPalette.contrast_300,
},
primary: {
background: colors.blue3,
@ -50,15 +52,15 @@ export const defaultTheme: Theme = {
icon: colors.green4,
},
inverted: {
background: colors.black,
backgroundLight: colors.gray6,
text: colors.white,
textLight: colors.gray3,
textInverted: colors.black,
link: colors.blue2,
border: colors.gray3,
borderDark: colors.gray2,
icon: colors.gray5,
background: darkPalette.black,
backgroundLight: darkPalette.contrast_50,
text: darkPalette.white,
textLight: darkPalette.contrast_700,
textInverted: darkPalette.black,
link: darkPalette.primary_500,
border: darkPalette.contrast_100,
borderDark: darkPalette.contrast_200,
icon: darkPalette.contrast_500,
},
error: {
background: colors.red3,
@ -292,26 +294,26 @@ export const darkTheme: Theme = {
palette: {
...defaultTheme.palette,
default: {
background: colors.black,
backgroundLight: colors.gray7,
text: colors.white,
textLight: colors.gray3,
textInverted: colors.black,
link: colors.blue3,
border: colors.gray7,
borderDark: colors.gray6,
icon: colors.gray4,
background: darkPalette.black,
backgroundLight: darkPalette.contrast_50,
text: darkPalette.white,
textLight: darkPalette.contrast_700,
textInverted: darkPalette.black,
link: darkPalette.primary_500,
border: darkPalette.contrast_100,
borderDark: darkPalette.contrast_200,
icon: darkPalette.contrast_500,
// non-standard
textVeryLight: colors.gray4,
replyLine: colors.gray5,
replyLineDot: colors.gray6,
unreadNotifBg: colors.blue7,
unreadNotifBorder: colors.blue6,
postCtrl: '#707489',
brandText: '#0085ff',
emptyStateIcon: colors.gray4,
borderLinkHover: colors.gray5,
textVeryLight: darkPalette.contrast_400,
replyLine: darkPalette.contrast_100,
replyLineDot: darkPalette.contrast_200,
unreadNotifBg: darkPalette.primary_975,
unreadNotifBorder: darkPalette.primary_900,
postCtrl: darkPalette.contrast_500,
brandText: darkPalette.primary_500,
emptyStateIcon: darkPalette.contrast_300,
borderLinkHover: darkPalette.contrast_300,
},
primary: {
...defaultTheme.palette.primary,
@ -322,15 +324,15 @@ export const darkTheme: Theme = {
textInverted: colors.green2,
},
inverted: {
background: colors.white,
backgroundLight: colors.gray2,
text: colors.black,
textLight: colors.gray5,
textInverted: colors.white,
link: colors.blue3,
border: colors.gray3,
borderDark: colors.gray4,
icon: colors.gray1,
background: lightPalette.white,
backgroundLight: lightPalette.contrast_50,
text: lightPalette.black,
textLight: lightPalette.contrast_700,
textInverted: lightPalette.white,
link: lightPalette.primary_500,
border: lightPalette.contrast_100,
borderDark: lightPalette.contrast_200,
icon: lightPalette.contrast_500,
},
},
}

5
src/view/shell/Drawer.tsx
View File

@ -53,6 +53,8 @@ import {useInviteCodesQuery} from '#/state/queries/invites'
import {NavSignupCard} from '#/view/shell/NavSignupCard'
import {TextLink} from '../com/util/Link'
import {useTheme as useAlfTheme} from '#/alf'
let DrawerProfileCard = ({
account,
onPressProfile,
@ -106,6 +108,7 @@ export {DrawerProfileCard}
let DrawerContent = ({}: {}): React.ReactNode => {
const theme = useTheme()
const t = useAlfTheme()
const pal = usePalette('default')
const {_} = useLingui()
const setDrawerOpen = useSetDrawerOpen()
@ -208,7 +211,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
testID="drawer"
style={[
styles.view,
theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode,
theme.colorScheme === 'light' ? pal.view : t.atoms.bg_contrast_25,
]}>
<SafeAreaView style={s.flex1}>
<ScrollView style={styles.main}>

12
web/index.html
View File

@ -66,26 +66,26 @@
:root {
--text: black;
--background: white;
--backgroundLight: #F3F3F8;
--backgroundLight: hsl(211, 20%, 95%);
}
html.colorMode--dark {
--text: white;
--background: black;
--backgroundLight: #26272D;
--background: hsl(211, 20%, 4%);
--backgroundLight: hsl(211, 20%, 10%);
color-scheme: dark;
}
@media (prefers-color-scheme: light) {
html.colorMode--system {
--text: black;
--background: white;
--backgroundLight: #F3F3F8;
--backgroundLight: hsl(211, 20%, 95%);
}
}
@media (prefers-color-scheme: dark) {
html.colorMode--system {
--text: white;
--background: black;
--backgroundLight: #26272D;
--background: hsl(211, 20%, 4%);
--backgroundLight: hsl(211, 20%, 10%);
color-scheme: dark;
}
}