diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-30 23:25:37 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-30 23:25:54 +0800 |
commit | 5c12e664a96296dae720433deb8bf98b10a5fbcb (patch) | |
tree | 4affdf2110d3d5df49f4d4710081ca068893aaeb /packages/website/ts/@next/components/siteWrap.tsx | |
parent | 46422ff78302a410178b42947e1b483b712c920f (diff) | |
download | dexon-0x-contracts-5c12e664a96296dae720433deb8bf98b10a5fbcb.tar.gz dexon-0x-contracts-5c12e664a96296dae720433deb8bf98b10a5fbcb.tar.zst dexon-0x-contracts-5c12e664a96296dae720433deb8bf98b10a5fbcb.zip |
WIP themeprovider
Diffstat (limited to 'packages/website/ts/@next/components/siteWrap.tsx')
-rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 63 |
1 files changed, 47 insertions, 16 deletions
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index a175c6901..6c29b3c43 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import styled from 'styled-components'; +import styled, { ThemeProvider } from 'styled-components'; import { Footer } from 'ts/@next/components/footer'; import { Header } from 'ts/@next/components/header'; @@ -9,23 +9,54 @@ import { GlobalStyles } from 'ts/@next/constants/globalStyle'; // Note(ez): We'll define the theme and provide it via a prop // e.g. theme dark/light/etc. interface Props { + theme?: 'dark' | 'light' | 'gray'; + children: any; +} + +interface GlobalThemes { + [key: string]: { + bgColor: string; + textColor: string; + } +} +const GLOBAL_THEMES: GlobalThemes = { + dark: { + bgColor: '#000000', + textColor: '#FFFFFF', + }, + light: { + bgColor: '#FFFFFF', + textColor: '#FFFFFF', + }, + gray: { + bgColor: '#e0e0e0', + textColor: '#FFFFFF', + }, } export const SiteWrap: React.StatelessComponent<Props> = props => { - const { children } = props; - - return ( - <> - {/* GlobalStyles will be exposed the theme via provider, - same is true for all children of SiteWrap - */} - <GlobalStyles /> - <Header /> - <Main> - {children} - </Main> - <Footer/> - </> - ); + const { + children, + theme = 'dark', + } = props; + const currentTheme = GLOBAL_THEMES[theme]; + + return ( + <> + <ThemeProvider theme={currentTheme}> + <> + <GlobalStyles /> + + <Header /> + + <Main> + { children } + </Main> + + <Footer/> + </> + </ThemeProvider> + </> + ); }; |