Chore: Add `colors` prop to useTheme hook (#3993)

* create react-native-appearance mock

* create base for colors theme

* mend

* export TColors prop

* update snapshot

app/constants/colors.ts

@@ -19,7 +19,7 @@ const mentions = {
 	mentionOtherColor: '#F3BE08'
 };
 
-export const themes: any = {
+export const colors = {
 	light: {
 		backgroundColor: '#ffffff',
 		focusedBackground: '#ffffff',
@@ -174,3 +174,5 @@ export const themes: any = {
 		...mentions
 	}
 };
+
+export const themes: any = colors;

app/definitions/index.ts

@@ -2,6 +2,8 @@ import { RouteProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { Dispatch } from 'redux';
 
+import { TColors } from '../theme';
+
 export * from './IAttachment';
 export * from './INotification';
 export * from './IPreferences';
@@ -32,8 +34,10 @@ export interface IBaseScreen<T extends Record<string, object | undefined>, S ext
 	navigation: StackNavigationProp<T, S>;
 	route: RouteProp<T, S>;
 	dispatch: Dispatch;
-	theme: string;
 	isMasterDetail: boolean;
+	// TODO: remove after migrating all Class components
+	theme: string;
+	colors: TColors;
 }
 
 export * from './redux';

app/index.tsx

@@ -14,7 +14,7 @@ import parseQuery from './lib/methods/helpers/parseQuery';
 import { initializePushNotifications, onNotification } from './notifications/push';
 import store from './lib/createStore';
 import { toggleAnalyticsEventsReport, toggleCrashErrorsReport } from './utils/log';
-import { ThemeContext } from './theme';
+import { ThemeContext, TSupportedThemes } from './theme';
 import { DimensionsContext } from './dimensions';
 import RocketChat from './lib/rocketchat';
 import { MIN_WIDTH_MASTER_DETAIL_LAYOUT } from './constants/tablet';
@@ -32,7 +32,7 @@ import { isFDroidBuild } from './constants/environment';
 import { IThemePreference } from './definitions/ITheme';
 import { ICommand } from './definitions/ICommand';
 import { initStore } from './lib/auxStore';
-import { themes } from './constants/colors';
+import { colors, themes } from './constants/colors';
 
 RNScreens.enableScreens();
 initStore(store);
@@ -45,7 +45,7 @@ interface IDimensions {
 }
 
 interface IState {
-	theme: string;
+	theme: TSupportedThemes;
 	themePreferences: IThemePreference;
 	width: number;
 	height: number;
@@ -215,7 +215,8 @@ export default class Root extends React.Component<{}, IState> {
 							value={{
 								theme,
 								themePreferences,
-								setTheme: this.setTheme
+								setTheme: this.setTheme,
+								colors: colors[theme]
 							}}>
 							<DimensionsContext.Provider
 								value={{

app/share.tsx

@@ -13,7 +13,7 @@ import { initStore } from './lib/auxStore';
 import { closeShareExtension, shareExtensionInit } from './lib/rocketchat/services/shareExtension';
 import { defaultHeader, getActiveRouteName, navigationTheme, themedHeader } from './utils/navigation';
 import RocketChat from './lib/rocketchat';
-import { ThemeContext } from './theme';
+import { ThemeContext, TSupportedThemes } from './theme';
 import { localAuthenticate } from './utils/localAuthentication';
 import { IThemePreference } from './definitions/ITheme';
 import ScreenLockedView from './views/ScreenLockedView';
@@ -28,6 +28,7 @@ import AuthLoadingView from './views/AuthLoadingView';
 import { DimensionsContext } from './dimensions';
 import debounce from './utils/debounce';
 import { ShareInsideStackParamList, ShareOutsideStackParamList, ShareAppStackParamList } from './definitions/navigationTypes';
+import { colors } from './constants/colors';
 
 initStore(store);
 
@@ -39,7 +40,7 @@ interface IDimensions {
 }
 
 interface IState {
-	theme: string;
+	theme: TSupportedThemes;
 	themePreferences: IThemePreference;
 	root: any;
 	width: number;
@@ -161,7 +162,7 @@ class Root extends React.Component<{}, IState> {
 		return (
 			<AppearanceProvider>
 				<Provider store={store}>
-					<ThemeContext.Provider value={{ theme }}>
+					<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
 						<DimensionsContext.Provider
 							value={{
 								width,

app/theme.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import React from 'react';
 
-import { TNavigationOptions } from './definitions/navigationTypes';
+import { colors } from './constants/colors';
 import { IThemePreference } from './definitions/ITheme';
+import { TNavigationOptions } from './definitions/navigationTypes';
+
+export type TSupportedThemes = keyof typeof colors;
+export type TColors = typeof colors[TSupportedThemes];
 
 interface IThemeContextProps {
 	theme: string;
 	themePreferences?: IThemePreference;
 	setTheme?: (newTheme?: {}) => void;
+	colors: TColors;
 }
 
-export const ThemeContext = React.createContext<IThemeContextProps>({ theme: 'light' });
+export const ThemeContext = React.createContext<IThemeContextProps>({ theme: 'light', colors: colors.light });
 
 export function withTheme<T extends object>(Component: React.ComponentType<T> & TNavigationOptions): typeof Component {
 	const ThemedComponent = (props: T) => (

app/utils/theme.ts

@@ -7,6 +7,7 @@ import { themes } from '../constants/colors';
 import { isAndroid } from './deviceInfo';
 import UserPreferences from '../lib/userPreferences';
 import { THEME_PREFERENCES_KEY } from '../lib/rocketchat';
+import { TSupportedThemes } from '../theme';
 
 let themeListener: { remove: () => void } | null;
 
@@ -27,7 +28,7 @@ export const defaultTheme = (): TThemeMode => {
 	return 'light';
 };
 
-export const getTheme = (themePreferences: IThemePreference): string => {
+export const getTheme = (themePreferences: IThemePreference): TSupportedThemes => {
 	const { darkLevel, currentTheme } = themePreferences;
 	let theme = currentTheme;
 	if (currentTheme === 'automatic') {