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 { :root {
--text: black; --text: black;
--background: white; --background: white;
--backgroundLight: #F3F3F8; --backgroundLight: hsl(211, 20%, 95%);
} }
html.colorMode--dark { html.colorMode--dark {
--text: white; --text: white;
--background: black; --background: hsl(211, 20%, 4%);
--backgroundLight: #26272D; --backgroundLight: hsl(211, 20%, 20%);
color-scheme: dark; color-scheme: dark;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html.colorMode--system { html.colorMode--system {
--text: black; --text: black;
--background: white; --background: white;
--backgroundLight: #F3F3F8; --backgroundLight: hsl(211, 20%, 95%);
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html.colorMode--system { html.colorMode--system {
--text: white; --text: white;
--background: black; --background: hsl(211, 20%, 4%);
--backgroundLight: #26272D; --backgroundLight: hsl(211, 20%, 20%);
color-scheme: dark; color-scheme: dark;
} }
} }

4
src/alf/themes.ts
View File

@ -171,7 +171,7 @@ export const light = {
backgroundColor: lightPalette.contrast_300, backgroundColor: lightPalette.contrast_300,
}, },
border: { border: {
borderColor: lightPalette.contrast_200, borderColor: lightPalette.contrast_100,
}, },
border_contrast: { border_contrast: {
borderColor: lightPalette.contrast_400, borderColor: lightPalette.contrast_400,
@ -278,7 +278,7 @@ export const dark: Theme = {
color: darkPalette.black, color: darkPalette.black,
}, },
bg: { bg: {
backgroundColor: darkPalette.contrast_25, backgroundColor: darkPalette.black,
}, },
bg_contrast_25: { bg_contrast_25: {
backgroundColor: darkPalette.contrast_50, 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 type {Theme} from './ThemeContext'
import {colors} from './styles' import {colors} from './styles'
import {darkPalette, lightPalette} from '#/alf/themes'
export const defaultTheme: Theme = { export const defaultTheme: Theme = {
colorScheme: 'light', colorScheme: 'light',
palette: { palette: {
default: { default: {
background: colors.white, background: lightPalette.white,
backgroundLight: colors.gray1, backgroundLight: lightPalette.contrast_50,
text: colors.black, text: lightPalette.black,
textLight: colors.gray5, textLight: lightPalette.contrast_700,
textInverted: colors.white, textInverted: lightPalette.white,
link: colors.blue3, link: lightPalette.primary_500,
border: '#f0e9e9', border: lightPalette.contrast_100,
borderDark: '#e0d9d9', borderDark: lightPalette.contrast_200,
icon: colors.gray4, icon: lightPalette.contrast_500,
// non-standard // non-standard
textVeryLight: colors.gray4, textVeryLight: lightPalette.contrast_400,
replyLine: colors.gray2, replyLine: lightPalette.contrast_100,
replyLineDot: colors.gray3, replyLineDot: lightPalette.contrast_200,
unreadNotifBg: '#ebf6ff', unreadNotifBg: lightPalette.primary_25,
unreadNotifBorder: colors.blue1, unreadNotifBorder: lightPalette.primary_100,
postCtrl: '#71768A', postCtrl: lightPalette.contrast_500,
brandText: '#0066FF', brandText: lightPalette.primary_500,
emptyStateIcon: '#B6B6C9', emptyStateIcon: lightPalette.contrast_300,
borderLinkHover: '#cac1c1', borderLinkHover: lightPalette.contrast_300,
}, },
primary: { primary: {
background: colors.blue3, background: colors.blue3,
@ -50,15 +52,15 @@ export const defaultTheme: Theme = {
icon: colors.green4, icon: colors.green4,
}, },
inverted: { inverted: {
background: colors.black, background: darkPalette.black,
backgroundLight: colors.gray6, backgroundLight: darkPalette.contrast_50,
text: colors.white, text: darkPalette.white,
textLight: colors.gray3, textLight: darkPalette.contrast_700,
textInverted: colors.black, textInverted: darkPalette.black,
link: colors.blue2, link: darkPalette.primary_500,
border: colors.gray3, border: darkPalette.contrast_100,
borderDark: colors.gray2, borderDark: darkPalette.contrast_200,
icon: colors.gray5, icon: darkPalette.contrast_500,
}, },
error: { error: {
background: colors.red3, background: colors.red3,
@ -292,26 +294,26 @@ export const darkTheme: Theme = {
palette: { palette: {
...defaultTheme.palette, ...defaultTheme.palette,
default: { default: {
background: colors.black, background: darkPalette.black,
backgroundLight: colors.gray7, backgroundLight: darkPalette.contrast_50,
text: colors.white, text: darkPalette.white,
textLight: colors.gray3, textLight: darkPalette.contrast_700,
textInverted: colors.black, textInverted: darkPalette.black,
link: colors.blue3, link: darkPalette.primary_500,
border: colors.gray7, border: darkPalette.contrast_100,
borderDark: colors.gray6, borderDark: darkPalette.contrast_200,
icon: colors.gray4, icon: darkPalette.contrast_500,
// non-standard // non-standard
textVeryLight: colors.gray4, textVeryLight: darkPalette.contrast_400,
replyLine: colors.gray5, replyLine: darkPalette.contrast_100,
replyLineDot: colors.gray6, replyLineDot: darkPalette.contrast_200,
unreadNotifBg: colors.blue7, unreadNotifBg: darkPalette.primary_975,
unreadNotifBorder: colors.blue6, unreadNotifBorder: darkPalette.primary_900,
postCtrl: '#707489', postCtrl: darkPalette.contrast_500,
brandText: '#0085ff', brandText: darkPalette.primary_500,
emptyStateIcon: colors.gray4, emptyStateIcon: darkPalette.contrast_300,
borderLinkHover: colors.gray5, borderLinkHover: darkPalette.contrast_300,
}, },
primary: { primary: {
...defaultTheme.palette.primary, ...defaultTheme.palette.primary,
@ -322,15 +324,15 @@ export const darkTheme: Theme = {
textInverted: colors.green2, textInverted: colors.green2,
}, },
inverted: { inverted: {
background: colors.white, background: lightPalette.white,
backgroundLight: colors.gray2, backgroundLight: lightPalette.contrast_50,
text: colors.black, text: lightPalette.black,
textLight: colors.gray5, textLight: lightPalette.contrast_700,
textInverted: colors.white, textInverted: lightPalette.white,
link: colors.blue3, link: lightPalette.primary_500,
border: colors.gray3, border: lightPalette.contrast_100,
borderDark: colors.gray4, borderDark: lightPalette.contrast_200,
icon: colors.gray1, 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 {NavSignupCard} from '#/view/shell/NavSignupCard'
import {TextLink} from '../com/util/Link' import {TextLink} from '../com/util/Link'
import {useTheme as useAlfTheme} from '#/alf'
let DrawerProfileCard = ({ let DrawerProfileCard = ({
account, account,
onPressProfile, onPressProfile,
@ -106,6 +108,7 @@ export {DrawerProfileCard}
let DrawerContent = ({}: {}): React.ReactNode => { let DrawerContent = ({}: {}): React.ReactNode => {
const theme = useTheme() const theme = useTheme()
const t = useAlfTheme()
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
const setDrawerOpen = useSetDrawerOpen() const setDrawerOpen = useSetDrawerOpen()
@ -208,7 +211,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
testID="drawer" testID="drawer"
style={[ style={[
styles.view, styles.view,
theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode, theme.colorScheme === 'light' ? pal.view : t.atoms.bg_contrast_25,
]}> ]}>
<SafeAreaView style={s.flex1}> <SafeAreaView style={s.flex1}>
<ScrollView style={styles.main}> <ScrollView style={styles.main}>

12
web/index.html
View File

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