robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {type ReactNode} from 'react'
2import {createContext, useContext} from 'react'
3import {type TextStyle, type ViewStyle} from 'react-native'
4import {type ThemeName} from '@bsky.app/alf'
5
6import {darkTheme, defaultTheme, dimTheme} from './themes'
7
8export type ColorScheme = 'light' | 'dark'
9
10export type PaletteColorName =
11 | 'default'
12 | 'primary'
13 | 'secondary'
14 | 'inverted'
15 | 'error'
16export type PaletteColor = {
17 background: string
18 backgroundLight: string
19 text: string
20 textLight: string
21 textInverted: string
22 link: string
23 border: string
24 borderDark: string
25 icon: string
26 [k: string]: string
27}
28export type Palette = Record<PaletteColorName, PaletteColor>
29
30export type ShapeName = 'button' | 'bigButton' | 'smallButton'
31export type Shapes = Record<ShapeName, ViewStyle>
32
33/**
34 * @deprecated use typography atoms from `#/alf`
35 */
36export type TypographyVariant =
37 | '2xl-thin'
38 | '2xl'
39 | '2xl-medium'
40 | '2xl-bold'
41 | '2xl-heavy'
42 | 'xl-thin'
43 | 'xl'
44 | 'xl-medium'
45 | 'xl-bold'
46 | 'xl-heavy'
47 | 'lg-thin'
48 | 'lg'
49 | 'lg-medium'
50 | 'lg-bold'
51 | 'lg-heavy'
52 | 'md-thin'
53 | 'md'
54 | 'md-medium'
55 | 'md-bold'
56 | 'md-heavy'
57 | 'sm-thin'
58 | 'sm'
59 | 'sm-medium'
60 | 'sm-bold'
61 | 'sm-heavy'
62 | 'xs-thin'
63 | 'xs'
64 | 'xs-medium'
65 | 'xs-bold'
66 | 'xs-heavy'
67 | 'title-2xl'
68 | 'title-xl'
69 | 'title-lg'
70 | 'title'
71 | 'title-sm'
72 | 'post-text-lg'
73 | 'post-text'
74 | 'button'
75 | 'button-lg'
76 | 'mono'
77export type Typography = Record<TypographyVariant, TextStyle>
78
79export interface Theme {
80 colorScheme: ColorScheme
81 palette: Palette
82 shapes: Shapes
83 typography: Typography
84}
85
86export interface ThemeProviderProps {
87 children?: ReactNode
88 theme: ThemeName
89}
90
91export const ThemeContext = createContext<Theme>(defaultTheme)
92ThemeContext.displayName = 'ThemeContext'
93
94export const useTheme = () => useContext(ThemeContext)
95
96function getTheme(theme: ThemeName) {
97 switch (theme) {
98 case 'light':
99 return defaultTheme
100 case 'dim':
101 return dimTheme
102 case 'dark':
103 return darkTheme
104 default:
105 return defaultTheme
106 }
107}
108
109export const ThemeProvider: React.FC<ThemeProviderProps> = ({
110 theme,
111 children,
112}) => {
113 const themeValue = getTheme(theme)
114
115 return (
116 <ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>
117 )
118}