jsx import { jsx } from '@emotion/core' ; import React from 'react' ; import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming' ; import { COLOR } from '../Identity/colors' ; import { filterProps } from '../util' ; export enum THEME_ID { DARK = 'THEME_DARK' , LIGHT = 'THEME_LIGHT' } export interface Theme { general : { backgroundColor : string ; color : string ; } ; Input : { backgroundColor : string ; backgroundColorDisabled : string ; placeholderColor : string ; } ; } export const themes = { [ THEME_ID . LIGHT ] : { Input : { backgroundColor : COLOR . WHITE , backgroundColorDisabled : COLOR . DISABLED , placeholderColor : COLOR . GRAY_DARKEN_24 , } , general : { backgroundColor : COLOR . GRAY_LIGHTEN_88 , color : COLOR . TEXT , } , } , [ THEME_ID . DARK ] : { Input : { backgroundColor : COLOR . BLACK_LIGHTEN_24 , backgroundColorDisabled : COLOR . DISABLED , placeholderColor : COLOR . GRAY_LIGHTEN_88 , } , general : { backgroundColor : COLOR . BLACK , color : COLOR . WHITE , } , } , } ; export interface ThemeProps < T = HTMLDivElement > extends React . HTMLProps < T > { themeId : THEME_ID ; } const filterThemeProps = ( props ) => filterProps ( props , [ 'themeId' ] ) ; export const ThemeProvider = ( props ) => ( < EmotionThemeProvider theme = { themes [ props . themeId ] } { ... filterThemeProps ( props ) } />);