feat: Add ability to set custom theme (#60)

* chore: added capability to change theme completely and tintColor for share button on header

* Fix lint and types

Co-authored-by: lazerblasters <[email protected]>
Co-authored-by: Alex Brazier <[email protected]>

Author: 3 people

src/components/Header.tsx

@@ -56,7 +56,12 @@ const themedStyles = (theme: Theme) =>
       marginHorizontal: 10,
       color: theme.colors.text,
     },
-    shareIcon: { width: 24, height: 24, marginRight: 10 },
+    shareIcon: {
+      width: 24,
+      height: 24,
+      marginRight: 10,
+      tintColor: theme.colors.text,
+    },
     container: {
       justifyContent: 'space-between',
       flexDirection: 'row',

src/components/NetworkLogger.tsx

@@ -2,14 +2,14 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { Alert, View, StyleSheet, BackHandler } from 'react-native';
 import logger from '../loggerSingleton';
 import NetworkRequestInfo from '../NetworkRequestInfo';
-import { ThemeContext, ThemeName } from '../theme';
+import { Theme, ThemeContext, ThemeName } from '../theme';
 import RequestList from './RequestList';
 import RequestDetails from './RequestDetails';
 import { setBackHandler } from '../backHandler';
 import Unmounted from './Unmounted';
 
 interface Props {
-  theme?: ThemeName;
+  theme?: ThemeName | Partial<Theme>;
   sort?: 'asc' | 'desc';
 }
 

src/index.tsx

@@ -13,4 +13,4 @@ export const clearRequests = () => logger.clearRequests();
 
 export { getBackHandler } from './backHandler';
 
-export { ThemeName } from './theme';
+export { ThemeName, Theme } from './theme';

src/theme.ts

@@ -1,7 +1,9 @@
 import React, { useContext } from 'react';
 
 export type ThemeName = 'light' | 'dark';
-export const ThemeContext = React.createContext<ThemeName>('light');
+export const ThemeContext = React.createContext<ThemeName | Partial<Theme>>(
+  'light'
+);
 type Themes = { [key in ThemeName]: Theme };
 
 export type Theme = {
@@ -54,9 +56,11 @@ const themes: Themes = {
 };
 
 export const useTheme = () => {
-  const themeName = useContext(ThemeContext);
+  const themeValue = useContext(ThemeContext);
 
-  return themes[themeName];
+  return typeof themeValue === 'string'
+    ? themes[themeValue]
+    : { ...lightTheme, ...themeValue };
 };
 
 export const useThemedStyles = <T>(styles: (theme: Theme) => T) => {