status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(react): allow theme customization

This commit is contained in:
Pavel Prichodko 2022-04-18 15:48:34 +02:00
parent 7484fcf935
commit 47bee147d9
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
4 changed files with 96 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/status-react/src/contexts/theme-context.tsx Normal file
View File

@ -0,0 +1,59 @@
import React, {
createContext,
useContext,
useLayoutEffect,
useMemo,
} from 'react'
import { createTheme, darkTheme, theme as defaultTheme } from '../styles/config'
import type { Theme } from '../styles/config'
import type { Config } from '../types/config'
const ThemeContext = createContext<Theme | undefined>(undefined)
interface Props {
theme: Config['theme']
children: React.ReactNode
}
export const ThemeProvider = (props: Props) => {
const { children, theme = 'light' } = props
const appTheme = useMemo(() => {
if (!theme || theme === 'light') {
return defaultTheme
}
if (theme === 'dark') {
return darkTheme
}
return createTheme({
colors: theme.colors,
fonts: theme.fonts,
})
}, [theme])
useLayoutEffect(() => {
document.body.classList.add(appTheme)
return () => {
document.body.classList.remove(appTheme)
}
}, [appTheme])
return (
<ThemeContext.Provider value={appTheme}>{children}</ThemeContext.Provider>
)
}
export const useTheme = () => {
const context = useContext(ThemeContext)
if (!context) {
throw new Error('useTheme must be used within a ThemeProvider')
}
return context
}

51
packages/status-react/src/modules/community/index.tsx
View File

@ -10,6 +10,7 @@ import { MessengerProvider } from '~/src/contexts/messengerProvider'
import { ModalProvider } from '~/src/contexts/modalProvider'
import { NarrowProvider } from '~/src/contexts/narrowProvider'
import { ScrollProvider } from '~/src/contexts/scrollProvider'
import { ThemeProvider } from '~/src/contexts/theme-context'
import { ToastProvider } from '~/src/contexts/toastProvider'
import { styled } from '~/src/styles/config'
import { GlobalStyle } from '~/src/styles/GlobalStyle'
@ -33,30 +34,32 @@ export const Community = (props: Props) => {
return (
<Router>
<AppProvider config={props}>
<DialogProvider>
<NarrowProvider myRef={ref}>
<ModalProvider>
<ToastProvider>
<Wrapper ref={ref} className={theme}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider
publicKey={publicKey}
environment={environment}
>
<ChatStateProvider>
<ScrollProvider>
<Messenger />
<div id="portal" data-radix-portal />
</ScrollProvider>
</ChatStateProvider>
</MessengerProvider>
</IdentityProvider>
</Wrapper>
</ToastProvider>
</ModalProvider>
</NarrowProvider>
</DialogProvider>
<ThemeProvider theme={theme}>
<DialogProvider>
<NarrowProvider myRef={ref}>
<ModalProvider>
<ToastProvider>
<Wrapper ref={ref}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider
publicKey={publicKey}
environment={environment}
>
<ChatStateProvider>
<ScrollProvider>
<Messenger />
<div id="portal" data-radix-portal />
</ScrollProvider>
</ChatStateProvider>
</MessengerProvider>
</IdentityProvider>
</Wrapper>
</ToastProvider>
</ModalProvider>
</NarrowProvider>
</DialogProvider>
</ThemeProvider>
</AppProvider>
</Router>
)

75
packages/status-react/src/styles/themes.ts
View File

@ -1,75 +0,0 @@
import type { Theme } from '../types/theme'
export const lightTheme: Theme = {
primary: '#000',
secondary: '#939BA1',
tertiary: '#4360DF',
bodyBackgroundColor: '#fff',
sectionBackgroundColor: '#F6F8FA',
bodyBackgroundGradient:
'linear-gradient(0deg, #FFFFFF 50%, rgba(255, 255, 255, 0) 102.57%)',
guestNameColor: '#887AF9',
iconColor: '#D37EF4',
iconUserColor: '#717199',
iconTextColor: 'rgba(255, 255, 255, 0.7)',
logoColor: '#51D0F0',
activeChannelBackground: '#E9EDF1',
notificationColor: '#4360DF',
inputColor: '#EEF2F5',
border: '#EEF2F5',
buttonBg: 'rgba(67, 96, 223, 0.1)',
buttonBgHover: 'rgba(67, 96, 223, 0.2)',
buttonNoBg: 'rgba(255, 45, 85, 0.1)',
buttonNoBgHover: 'rgba(255, 45, 85, 0.2)',
skeletonLight: '#F6F8FA',
skeletonDark: '#E9EDF1',
redColor: '#FF2D55',
greenColor: '#4EBC60',
greenBg: 'rgba(78, 188, 96, 0.1)',
mentionColor: '#0DA4C9',
mentionHover: '#BDE7F2',
mentionBg: '#E5F8FD',
mentionBgHover: '#D4F3FA',
shadow:
'0px 2px 4px rgba(0, 34, 51, 0.16), 0px 4px 12px rgba(0, 34, 51, 0.08)',
reactionBg: '#eceffc',
blueBg: 'rgba(67, 96, 223, 0.1)',
}
export const darkTheme: Theme = {
primary: '#fff',
secondary: '#909090',
tertiary: '#88B0FF',
bodyBackgroundColor: '#000',
sectionBackgroundColor: '#252525',
bodyBackgroundGradient:
'linear-gradient(0deg, #000 50%, rgba(255, 255, 255, 0) 102.57%)',
guestNameColor: '#887AF9',
iconColor: '#D37EF4',
iconUserColor: '#717199',
logoColor: '#51D0F0',
iconTextColor: 'rgba(0, 0, 0, 0.7)',
activeChannelBackground: '#2C2C2C',
notificationColor: '#887AF9',
inputColor: '#373737',
border: '#373737',
buttonBg: 'rgba(134, 158, 255, 0.2)',
buttonBgHover: 'rgba(67, 96, 223, 0.3)',
buttonNoBg: 'rgba(255, 92, 123, 0.2)',
buttonNoBgHover: 'rgba(255, 45, 85, 0.3)',
skeletonLight: '#2E2F31',
skeletonDark: '#141414',
redColor: '#FF5C7B',
greenColor: '#60C370',
greenBg: 'rgba(96, 195, 112, 0.2)',
mentionColor: '#51D0F0',
mentionHover: '#004E60',
mentionBg: '#004050',
mentionBgHover: '#002D39',
shadow:
'0px 2px 4px rgba(0, 34, 51, 0.16), 0px 4px 12px rgba(0, 34, 51, 0.08)',
reactionBg: '#373737',
blueBg: 'rgba(134, 158, 255, 0.3)',
}
export default { lightTheme, darkTheme }

11
packages/status-react/src/types/config.tsx
View File

@ -3,10 +3,19 @@ import type { BrowserRouter, HashRouter, MemoryRouter } from 'react-router-dom'
export type Environment = 'production' | 'test'
type CustomTheme = {
colors: {
[key in keyof Theme['colors']]: string
}
fonts: {
[key in keyof Theme['colors']]: string
}
}
export interface Config {
publicKey: string
environment?: Environment
theme?: Theme
theme?: 'light' | 'dark' | CustomTheme
router?: typeof BrowserRouter | typeof MemoryRouter | typeof HashRouter
options?: {
enableSidebar: boolean