feat(ott-36): added app theming

src/features/App/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 
+import { Theme } from 'features/Theme'
+
 export const App = () => (
-  <div>
+  <Theme>
     Instat TV
-  </div>
+  </Theme>
 )

src/features/Theme/config.tsx

@@ -0,0 +1,40 @@
+export const lightTheme = {
+  colors: {
+    background: '',
+    primary: '',
+    secondary: '',
+    text: '',
+  },
+  name: 'light' as TName,
+  switchTheme: () => {},
+}
+
+export const darkTheme = {
+  colors: {
+    background: `
+      radial-gradient(
+        49.07% 49.07% at 50% 29.54%,
+        rgba(255, 255, 255, 0.14) 0%,
+        rgba(255, 255, 255, 0) 100%
+      ),
+      rgba(0, 0, 0, 0.95)
+    `,
+    primary: `
+      linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.1) 0.01%,
+        rgba(0, 0, 0, 0.1) 99.99%
+      ),
+      #0033CC
+    `,
+    secondary: '#999999',
+    text: '#fff',
+  },
+  name: 'dark' as TName,
+  switchTheme: () => {},
+}
+
+type TName = 'light' | 'dark'
+
+export type TCustomTheme = typeof lightTheme

src/features/Theme/index.tsx

@@ -0,0 +1,39 @@
+import React, {
+  useState,
+  ReactNode,
+  useCallback,
+  useMemo,
+} from 'react'
+import { ThemeProvider } from 'styled-components'
+
+import {
+  TCustomTheme,
+  lightTheme,
+  darkTheme,
+} from './config'
+
+type TThemeProps = {
+  children: ReactNode,
+}
+
+export const Theme = ({ children }: TThemeProps) => {
+  const [theme, setTheme] = useState<TCustomTheme>(darkTheme)
+
+  const switchTheme = useCallback(
+    () => {
+      setTheme(theme.name === 'light' ? darkTheme : lightTheme)
+    },
+    [theme],
+  )
+
+  const memoTheme = useMemo(() => ({
+    ...theme,
+    switchTheme,
+  }), [theme, switchTheme])
+
+  return (
+    <ThemeProvider theme={memoTheme}>
+      {children}
+    </ThemeProvider>
+  )
+}

src/types/styled-components.d.ts

@@ -0,0 +1,5 @@
+import { TCustomTheme } from '../features/Theme/config'
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends TCustomTheme {}
+}