ferns-ui 0.37.0 → 0.37.2

package/dist/Utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"Utilities.js","sourceRoot":"","sources":["../src/Utilities.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Utilities.js","sourceRoot":"","sources":["../src/Utilities.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -57,6 +57,7 @@ export * from "./Table";
 export * from "./TableHeader";
 export * from "./TableHeaderCell";
 export * from "./TableRow";
+export * from "./Theme";
 export * from "./useStoredState";
 type ImageRequireSource = number;
 interface Insets {

package/dist/index.js

@@ -60,5 +60,6 @@ export * from "./Table";
 export * from "./TableHeader";
 export * from "./TableHeaderCell";
 export * from "./TableRow";
+export * from "./Theme";
 export * from "./useStoredState";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.37.0",
+  "version": "0.37.2",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {

package/src/Avatar.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable no-console */
 import {ImageResult, manipulateAsync, SaveFormat} from "expo-image-manipulator";
 import {launchImageLibraryAsync, MediaTypeOptions} from "expo-image-picker";
-import React, {useEffect, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {Image, ImageResizeMode, Platform, Text, View} from "react-native";
 
 import {Box} from "./Box";
 import {AllColors, IconName, UnsignedUpTo12} from "./Common";
 import {Icon} from "./Icon";
 import {isMobileDevice} from "./MediaQuery";
+import {ThemeContext} from "./Theme";
 import {Tooltip} from "./Tooltip";
-import {Unifier} from "./Unifier";
 
 const sizes = {
   xs: 24,
@@ -116,6 +116,8 @@ interface AvatarProps {
 }
 
 export const Avatar = (props: AvatarProps): React.ReactElement => {
+  const {theme} = useContext(ThemeContext);
+
   const [isImageLoaded, setIsImageLoaded] = useState(true);
   const [hovered, setHovered] = useState(false);
   const [src, setSrc] = useState(props.src ?? undefined);
@@ -279,12 +281,10 @@ export const Avatar = (props: AvatarProps): React.ReactElement => {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              backgroundColor: props.backgroundColor
-                ? Unifier.theme[props.backgroundColor]
-                : Unifier.theme.gray,
+              backgroundColor: props.backgroundColor ? theme[props.backgroundColor] : theme.gray,
             }}
           >
-            <Text style={{fontSize, color: props.textColor ?? Unifier.theme.darkGray}}>
+            <Text style={{fontSize, color: props.textColor ?? theme.darkGray}}>
               {computedInitials}
             </Text>
           </View>

package/src/Badge.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, {useContext} from "react";
 import {Text, View} from "react-native";
 
 import {AllColors} from "./Common";
-import {Unifier} from "./Unifier";
+import {ThemeContext} from "./Theme";
 
 interface BadgeProps {
   // The text to display inside the badge.
@@ -29,6 +29,8 @@ export function Badge({
   type = "info",
   color,
 }: BadgeProps): React.ReactElement {
+  const {theme} = useContext(ThemeContext);
+
   if (color && type !== "custom") {
     console.warn('Badge color only supported when `type` is set to "custom".');
   }
@@ -37,7 +39,7 @@ export function Badge({
   return (
     <View
       style={{
-        backgroundColor: Unifier.theme[badgeColor],
+        backgroundColor: theme[badgeColor],
         borderRadius: 2,
         height: 14,
         paddingTop: 2,

package/src/Body.tsx

@@ -1,32 +1,43 @@
-import React from "react";
+import React, {ReactNode, useContext} from "react";
 import {ActivityIndicator, KeyboardAvoidingView} from "react-native";
 
 import {Box} from "./Box";
-import {BodyProps} from "./Common";
-import {Unifier} from "./Unifier";
+import {UnsignedUpTo12} from "./Common";
+import {ThemeContext} from "./Theme";
 
-export class Body extends React.Component<BodyProps, {}> {
-  renderBody() {
+export interface BodyProps {
+  scroll?: boolean;
+  loading?: boolean;
+  padding?: UnsignedUpTo12;
+  height?: number | string;
+  avoidKeyboard?: boolean; // default true
+  children?: ReactNode;
+}
+
+export function Body({
+  scroll,
+  loading,
+  padding,
+  height,
+  avoidKeyboard,
+  children,
+}: BodyProps): React.ReactElement {
+  const {theme} = useContext(ThemeContext);
+
+  const renderBody = () => {
     return (
-      <Box avoidKeyboard height="100%" scroll={this.props.scroll}>
-        <Box
-          height={this.props.height || "100%"}
-          padding={this.props.padding !== undefined ? this.props.padding : 5}
-        >
-          {this.props.loading === true && (
-            <ActivityIndicator color={Unifier.theme.darkGray} size="large" />
-          )}
-          {this.props.children}
+      <Box avoidKeyboard height="100%" scroll={scroll}>
+        <Box height={height || "100%"} padding={padding !== undefined ? padding : 5}>
+          {loading === true && <ActivityIndicator color={theme.darkGray} size="large" />}
+          {children}
         </Box>
       </Box>
     );
-  }
+  };
 
-  render() {
-    if (this.props.avoidKeyboard === false) {
-      return this.renderBody();
-    } else {
-      return <KeyboardAvoidingView behavior="position">{this.renderBody()}</KeyboardAvoidingView>;
-    }
+  if (avoidKeyboard === false) {
+    return renderBody();
+  } else {
+    return <KeyboardAvoidingView behavior="position">{renderBody()}</KeyboardAvoidingView>;
   }
 }

package/src/Box.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, {useImperativeHandle} from "react";
+import React, {useContext, useImperativeHandle} from "react";
 import {
   KeyboardAvoidingView,
   Platform,
@@ -9,7 +9,7 @@ import {
   View,
 } from "react-native";
 
-import {UnifiedTheme} from ".";
+import {ThemeContext, UnifiedTheme} from ".";
 import {AlignContent, AlignItems, AlignSelf, BoxProps, JustifyContent, SPACING} from "./Common";
 import {mediaQueryLargerThan} from "./MediaQuery";
 import {Unifier} from "./Unifier";
@@ -46,6 +46,8 @@ const BORDER_WIDTH = 1;
 
 // eslint-disable-next-line react/display-name
 export const Box = React.forwardRef((props: BoxProps, ref) => {
+  const {theme} = useContext(ThemeContext);
+
   useImperativeHandle(ref, () => ({
     scrollToEnd: () => {
       if (scrollRef && scrollRef.current) {
@@ -77,7 +79,7 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
     alignItems: (value: AlignItems) => ({alignItems: ALIGN_ITEMS[value]}),
     alignContent: (value: AlignContent) => ({alignContent: ALIGN_CONTENT[value]}),
     alignSelf: (value: AlignSelf) => ({alignSelf: ALIGN_SELF[value]}),
-    color: (value: keyof UnifiedTheme) => ({backgroundColor: Unifier.theme[value]}),
+    color: (value: keyof UnifiedTheme) => ({backgroundColor: theme[value]}),
     direction: (value: any) => ({flexDirection: value, display: "flex"}),
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     smDirection: (value: any) =>
@@ -177,31 +179,31 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
       if (!value) {
         return {};
       }
-      return {borderColor: Unifier.theme[value], borderWidth: BORDER_WIDTH};
+      return {borderColor: theme[value], borderWidth: BORDER_WIDTH};
     },
     borderBottom: (value: keyof UnifiedTheme) => {
       if (!value) {
         return {};
       }
-      return {borderBottomColor: Unifier.theme[value], borderBottomWidth: BORDER_WIDTH};
+      return {borderBottomColor: theme[value], borderBottomWidth: BORDER_WIDTH};
     },
     borderTop: (value: keyof UnifiedTheme) => {
       if (!value) {
         return {};
       }
-      return {borderTopColor: Unifier.theme[value], borderTopWidth: BORDER_WIDTH};
+      return {borderTopColor: theme[value], borderTopWidth: BORDER_WIDTH};
     },
     borderRight: (value: keyof UnifiedTheme) => {
       if (!value) {
         return {};
       }
-      return {borderRightColor: Unifier.theme[value], borderRightWidth: BORDER_WIDTH};
+      return {borderRightColor: theme[value], borderRightWidth: BORDER_WIDTH};
     },
     borderLeft: (value: keyof UnifiedTheme) => {
       if (!value) {
         return {};
       }
-      return {borderLeftColor: Unifier.theme[value], borderLeftWidth: BORDER_WIDTH};
+      return {borderLeftColor: theme[value], borderLeftWidth: BORDER_WIDTH};
     },
   };
 

package/src/Button.tsx

@@ -1,5 +1,5 @@
 import debounce from "lodash/debounce";
-import React, {useState} from "react";
+import React, {useContext, useState} from "react";
 import {ActivityIndicator, Pressable, View} from "react-native";
 
 import {Box} from "./Box";
@@ -7,6 +7,7 @@ import {ButtonColor, Color, IconName, IconPrefix, TooltipDirection, UnifiedTheme
 import {Icon} from "./Icon";
 import {Modal} from "./Modal";
 import {Text} from "./Text";
+import {ThemeContext} from "./Theme";
 import {Tooltip} from "./Tooltip";
 import {Unifier} from "./Unifier";
 
@@ -78,12 +79,13 @@ export function Button({
 }: ButtonProps) {
   const [loading, setLoading] = useState(propsLoading);
   const [showConfirmation, setShowConfirmation] = useState(false);
+  const {theme} = useContext(ThemeContext);
 
   const getBackgroundColor = (backgroundColor: string): string => {
     if (type === "ghost" || type === "outline") {
       return "transparent";
     } else {
-      return Unifier.theme[backgroundColor as keyof UnifiedTheme];
+      return theme[backgroundColor as keyof UnifiedTheme];
     }
   };
 
@@ -99,7 +101,7 @@ export function Button({
 
   const getBorderColor = (borderColor: string): string => {
     if (type === "outline") {
-      return Unifier.theme[getTextColor(borderColor as Color)];
+      return theme[getTextColor(borderColor as Color)];
     } else {
       return "transparent";
     }

package/src/Common.ts

@@ -120,6 +120,14 @@ export interface UnifiedTheme {
   tertiaryDark: string;
   tertiaryDarker: string;
 
+  // Support for light and dark mode.
+  background: string;
+  backgroundSecondary: string;
+  textPrimary: string;
+  textSecondary: string;
+  textDisabled: string;
+  divider: string;
+
   neutral900: string;
   neutral800: string;
   neutral700: string;
@@ -202,7 +210,9 @@ export type ThemeColor =
   | "accentLight"
   | "accent"
   | "accentDark"
-  | "accentDarker";
+  | "accentDarker"
+  | "background"
+  | "backgroundSecondary";
 export type NeutralColor =
   | "neutral900"
   | "neutral800"
@@ -2092,11 +2102,6 @@ export interface SwitchProps extends FieldWithLabelsProps {
   label?: string;
 }
 
-export interface SpinnerProps {
-  size?: "sm" | "md";
-  color?: Color;
-}
-
 export interface MaskProps {
   children?: ReactChildren;
   shape?: "circle" | "rounded" | "square";
@@ -2188,17 +2193,6 @@ export interface CheckBoxProps {
   labelColor?: AllColors;
 }
 
-export interface BodyProps {
-  scroll?: boolean;
-  loading?: boolean;
-  useBox?: boolean; // defaults false
-  style?: any;
-  padding?: UnsignedUpTo12;
-  height?: number | string;
-  avoidKeyboard?: boolean; // default true
-  children?: ReactNode;
-}
-
 export interface ChatPaneProps {
   messagesView: any;
   textFormView: any;
@@ -2723,11 +2717,6 @@ export interface NavConfig {
   provider?: any;
 }
 
-export interface ProgressBarProps {
-  color: Color;
-  completed: number;
-}
-
 export interface AddressInterface {
   address1: string;
   address2?: string;

package/src/DateTimeActionSheet.tsx

@@ -1,6 +1,6 @@
 import {Picker} from "@react-native-picker/picker";
 import range from "lodash/range";
-import React, {useEffect, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {Platform, StyleProp, TextInput, TextStyle, View} from "react-native";
 import {Calendar} from "react-native-calendars";
 
@@ -12,7 +12,7 @@ import {IconButton} from "./IconButton";
 import {isMobileDevice} from "./MediaQuery";
 import {Modal} from "./Modal";
 import {SelectList} from "./SelectList";
-import {Unifier} from "./Unifier";
+import {ThemeContext} from "./Theme";
 
 const TIME_PICKER_HEIGHT = 104;
 const INPUT_HEIGHT = 40;
@@ -31,6 +31,8 @@ function TimeInput({
   value: number;
   onChange: (value: number) => void;
 }): React.ReactElement {
+  const {theme} = useContext(ThemeContext);
+
   const defaultText = type === "minute" ? String(value).padStart(2, "0") : String(value);
   const [text, setText] = useState(defaultText);
   const [focused, setFocused] = useState(false);
@@ -50,8 +52,8 @@ function TimeInput({
     paddingLeft: 0,
     height: INPUT_HEIGHT,
     width: "100%",
-    color: Unifier.theme.darkGray,
-    fontFamily: Unifier.theme.primaryFont,
+    color: theme.darkGray,
+    fontFamily: theme.primaryFont,
   };
 
   return (
@@ -65,10 +67,10 @@ function TimeInput({
         // Add padding so the border doesn't mess up layouts
         paddingHorizontal: focused ? 10 : 14,
         paddingVertical: focused ? 0 : 4,
-        borderColor: error ? Unifier.theme.red : Unifier.theme.blue,
+        borderColor: error ? theme.red : theme.blue,
         borderWidth: focused ? 5 : 1,
         borderRadius: 5,
-        backgroundColor: Unifier.theme.white,
+        backgroundColor: theme.white,
       }}
     >
       <TextInput
@@ -179,6 +181,8 @@ export function DateTimeActionSheet({
   visible,
   onDismiss,
 }: DateTimeActionSheetProps) {
+  const {theme} = useContext(ThemeContext);
+
   // Accept ISO 8601, HH:mm, or hh:mm A formats. We may want only HH:mm or hh:mm A for mode=time
   let m;
   if (value) {
@@ -352,7 +356,7 @@ export function DateTimeActionSheet({
     if (date) {
       markedDates[dayjs(date).format("YYYY-MM-DD")] = {
         selected: true,
-        selectedColor: Unifier.theme.primary,
+        selectedColor: theme.primary,
       };
     }
     return (

package/src/DateTimeField.android.tsx

@@ -1,10 +1,10 @@
 import DateTimePicker from "@react-native-community/datetimepicker";
-import React, {ReactElement, useMemo, useState} from "react";
+import React, {ReactElement, useContext, useMemo, useState} from "react";
 import {TextInput} from "react-native";
 
 import {DateTimeFieldProps} from "./Common";
 import dayjs from "./dayjsExtended";
-import {Unifier} from "./Unifier";
+import {ThemeContext} from "./Theme";
 import {WithLabel} from "./WithLabel";
 
 export const DateTimeField = ({
@@ -21,6 +21,7 @@ export const DateTimeField = ({
   // const [tempDate, setTempDate] = useState<Date>();
   const [pickerMode, setPickerMode] = useState(mode);
   const [showPicker, setShowPicker] = useState(false);
+  const {theme} = useContext(ThemeContext);
 
   const showCalendarFirst = mode === "datetime" || mode === "date";
 
@@ -69,8 +70,8 @@ export const DateTimeField = ({
             paddingLeft: 10,
             height: 40,
             width: "100%",
-            color: Unifier.theme.darkGray,
-            fontFamily: Unifier.theme.primaryFont,
+            color: theme.darkGray,
+            fontFamily: theme.primaryFont,
             borderWidth: 1,
           }}
           value={dayjs(value).format(defaultFormat)}

package/src/DateTimeField.ios.tsx

@@ -1,10 +1,10 @@
 import DateTimePicker from "@react-native-community/datetimepicker";
-import React, {ReactElement, useMemo, useState} from "react";
+import React, {ReactElement, useContext, useMemo, useState} from "react";
 import {TextInput} from "react-native";
 
 import {DateTimeFieldProps} from "./Common";
 import dayjs from "./dayjsExtended";
-import {Unifier} from "./Unifier";
+import {ThemeContext} from "./Theme";
 import {WithLabel} from "./WithLabel";
 
 export const DateTimeField = ({
@@ -18,6 +18,7 @@ export const DateTimeField = ({
   label,
 }: DateTimeFieldProps): ReactElement => {
   const [showPicker, setShowPicker] = useState(false);
+  const {theme} = useContext(ThemeContext);
 
   const defaultFormat = useMemo(() => {
     if (dateFormat) {
@@ -51,8 +52,8 @@ export const DateTimeField = ({
             paddingLeft: 10,
             height: 40,
             width: "100%",
-            color: Unifier.theme.darkGray,
-            fontFamily: Unifier.theme.primaryFont,
+            color: theme.darkGray,
+            fontFamily: theme.primaryFont,
             borderWidth: 1,
           }}
           value={dayjs(value).format(defaultFormat)}
@@ -63,7 +64,7 @@ export const DateTimeField = ({
 
         {showPicker && (
           <DateTimePicker
-            accentColor={Unifier.theme.primary}
+            accentColor={theme.primary}
             display={pickerType}
             mode={mode}
             style={{alignSelf: "flex-start"}}

package/src/FernsProvider.tsx

@@ -2,20 +2,23 @@ import React from "react";
 import {Host} from "react-native-portalize";
 import {ToastProvider} from "react-native-toast-notifications";
 
+import {ThemeProvider} from "./Theme";
 import {Toast} from "./Toast";
 
 export function FernsProvider({children}: {children: React.ReactNode}): React.ReactElement {
   return (
-    <ToastProvider
-      animationDuration={250}
-      animationType="slide-in"
-      duration={50000}
-      offset={50}
-      placement="bottom"
-      renderToast={(toastOptions) => <Toast {...(toastOptions as any)} />}
-      swipeEnabled
-    >
-      <Host>{children}</Host>
-    </ToastProvider>
+    <ThemeProvider>
+      <ToastProvider
+        animationDuration={250}
+        animationType="slide-in"
+        duration={50000}
+        offset={50}
+        placement="bottom"
+        renderToast={(toastOptions) => <Toast {...(toastOptions as any)} />}
+        swipeEnabled
+      >
+        <Host>{children}</Host>
+      </ToastProvider>
+    </ThemeProvider>
   );
 }

package/src/Heading.tsx

@@ -1,53 +1,36 @@
-import React from "react";
-import {Text as NativeText} from "react-native";
+import React, {useContext} from "react";
+import {StyleProp, Text as NativeText, TextStyle} from "react-native";
 
 import {HeadingProps} from "./Common";
-import {Unifier} from "./Unifier";
+import {ThemeContext} from "./Theme";
 
-export class Heading extends React.Component<HeadingProps, {}> {
-  fontSizes = {
-    sm: 20,
-    md: 28,
-    lg: 36,
-  };
+const fontSizes = {
+  sm: 20,
+  md: 28,
+  lg: 36,
+};
 
-  propsToStyle(): any {
-    const style: any = {};
+export const Heading = ({align, children, color, size}: HeadingProps): React.ReactElement => {
+  const {theme} = useContext(ThemeContext);
 
-    // let font = this.props.font || "primary";
-    // if (this.props.bold) {
-    //   font += "Bold";
-    // }
-    style.fontFamily = Unifier.theme.titleFont;
+  const style: StyleProp<TextStyle> = {};
 
-    style.fontSize = this.fontSizes[this.props.size || "md"];
-    if (this.props.align) {
-      style.textAlign = this.props.align;
-    }
-    if (this.props.color) {
-      style.color = Unifier.theme[this.props.color];
-    } else {
-      style.color = Unifier.theme.darkGray;
-    }
-    // TODO: might be useful for wrapping/truncating
-    // if (this.props.numberOfLines !== 1 && !this.props.inline) {
-    //   style.flexWrap = "wrap";
-    // }
+  style.fontFamily = theme.titleFont;
 
-    return style;
+  style.fontSize = fontSizes[size || "md"];
+  if (align) {
+    style.textAlign = align;
   }
+  style.color = theme[color ?? "darkGray"];
+  // TODO: might be useful for wrapping/truncating
+  // if (numberOfLines !== 1 && !inline) {
+  //   style.flexWrap = "wrap";
+  // }
 
-  render() {
-    const lines = 0;
-    // if (this.props.numberOfLines) {
-    //   lines = this.props.numberOfLines;
-    // } else if (this.props.inline) {
-    //   lines = 1;
-    // }
-    return (
-      <NativeText numberOfLines={lines} style={this.propsToStyle()}>
-        {this.props.children}
-      </NativeText>
-    );
-  }
-}
+  const lines = 0;
+  return (
+    <NativeText numberOfLines={lines} style={style}>
+      {children}
+    </NativeText>
+  );
+};

package/src/Icon.tsx

@@ -1,8 +1,8 @@
 import {FontAwesome5} from "@expo/vector-icons";
-import React from "react";
+import React, {useContext} from "react";
 
 import {IconProps, iconSizeToNumber} from "./Common";
-import {Unifier} from "./Unifier";
+import {ThemeContext} from "./Theme";
 
 export function initIcons() {
   console.debug("Initializing icons");
@@ -10,7 +10,8 @@ export function initIcons() {
 
 // TODO: Update <Icon /> to be closer to Expo's Vector Icon, letting multiple icon packs be used, etc.
 export function Icon({color, size, name, prefix}: IconProps): React.ReactElement {
-  const iconColor = Unifier.theme[color || "primary"];
+  const {theme} = useContext(ThemeContext);
+  const iconColor = theme[color || "primary"];
   const iconSize = iconSizeToNumber(size);
   return (
     <FontAwesome5