Configure darkmode with props (#28)

* wip: configure darkmode with props

* chore: memoize context value + rename files & variablse

* Rename prop to `calendarColorScheme` and avoid leaking context

* Forward colorScheme to Calendar instead of using context in CalendarList

* add docs and changeset

---------

Co-authored-by: Marcelo T Prado <[email protected]>

.changeset/eighty-papayas-bathe.md

@@ -0,0 +1,5 @@
+---
+"@marceloterreiro/flash-calendar": patch
+---
+
+- Add an optional `calendarColorScheme` prop that enables overriding the color scheme used by Flash Calendar.

apps/docs/docs/fundamentals/tips-and-tricks.mdx

@@ -109,7 +109,9 @@ export function ImperativeScrolling() {
 
 ## Setting Border Radius to `Calendar.Item.Day`
 
-To apply a border radius to the `Calendar.Item.Day` component, it's necessary to specify the radius for all four corners. Here's an example of how to achieve this:
+To apply a border radius to the `Calendar.Item.Day` component, it's necessary to
+specify the radius for all four corners. Here's an example of how to achieve
+this:
 
 ```tsx
 itemDay: {
@@ -123,3 +125,33 @@ itemDay: {
   }),
 }
 ```
+
+## Avoiding dark mode
+
+If your app doesn't support dynamic themes, you can override Flash Calendar's
+color scheme by passing a `calendarColorScheme` prop:
+
+```tsx
+export const LightModeOnly = () => {
+  const { calendarActiveDateRanges, onCalendarDayPress } = useDateRange({
+    startId: "2024-02-04",
+    endId: "2024-02-09",
+  });
+
+  return (
+    <Calendar
+      calendarActiveDateRanges={calendarActiveDateRanges}
+      calendarColorScheme="light"
+      calendarMonthId={toDateId(startOfThisMonth)}
+      onCalendarDayPress={onCalendarDayPress}
+    />
+  );
+};
+```
+
+When set, Flash Calendar's theming system will use this scheme instead of the
+user system's theme.
+
+**Note**: you should avoid using this prop. Instead, your app should
+support dynamic themes that react to the user's system preferences. The prop is
+provided as an escape hatch for apps that doesn't support dynamic themes yet.

apps/example/src/components/PerfTestCalendar/PerfTestCalendar.tsx

@@ -8,8 +8,8 @@ import { memo, useEffect } from "react";
 import { Text } from "react-native";
 import { uppercaseFirstLetter } from "@/helpers/strings";
 
-import { useRenderCount } from "./useRenderCount";
 import { PerfTestCalendarItemDayWithContainer } from "./PerfTestCalendarItemDay";
+import { useRenderCount } from "./useRenderCount";
 
 const BasePerfTestCalendar = memo(
   ({

packages/flash-calendar/src/components/Calendar.stories.tsx

@@ -159,3 +159,25 @@ export const DateRangePicker = (args: typeof KichenSink.args) => {
     />
   );
 };
+
+export const ControlledColorScheme: StoryObj<typeof Calendar> = {
+  args: {
+    calendarColorScheme: "dark",
+  },
+};
+
+export const LightModeOnly = () => {
+  const { calendarActiveDateRanges, onCalendarDayPress } = useDateRange({
+    startId: "2024-02-04",
+    endId: "2024-02-09",
+  });
+
+  return (
+    <Calendar
+      calendarActiveDateRanges={calendarActiveDateRanges}
+      calendarColorScheme="light"
+      calendarMonthId={toDateId(startOfThisMonth)}
+      onCalendarDayPress={onCalendarDayPress}
+    />
+  );
+};

packages/flash-calendar/src/components/Calendar.tsx

@@ -1,4 +1,5 @@
 import { memo, useEffect } from "react";
+import type { ColorSchemeName } from "react-native";
 
 import type {
   CalendarItemDayContainerProps,
@@ -22,6 +23,7 @@ import type { BaseTheme } from "@/helpers/tokens";
 import type { UseCalendarParams } from "@/hooks/useCalendar";
 import { useCalendar } from "@/hooks/useCalendar";
 import { activeDateRangesEmitter } from "@/hooks/useOptimizedDayMetadata";
+import { CalendarThemeProvider } from "@/components/CalendarThemeProvider";
 
 export interface CalendarTheme {
   rowMonth?: CalendarRowMonthProps["theme"];
@@ -66,6 +68,16 @@ export interface CalendarProps extends UseCalendarParams {
    * @defaultValue 20
    */
   calendarMonthHeaderHeight?: number;
+  /**
+   * When set, Flash Calendar will use this color scheme instead of the system's
+   * value (`light|dark`). This is useful if your app doesn't support dark-mode,
+   * for example.
+   *
+   * We don't advise using this prop - ideally, your app should reflect the
+   * user's preferences.
+   * @defaultValue undefined
+   */
+  calendarColorScheme?: ColorSchemeName;
   /** Theme to customize the calendar component. */
   theme?: CalendarTheme;
 }
@@ -150,7 +162,12 @@ const BaseCalendar = memo(
 BaseCalendar.displayName = "BaseCalendar";
 
 export const Calendar = memo(
-  ({ calendarActiveDateRanges, calendarMonthId, ...props }: CalendarProps) => {
+  ({
+    calendarActiveDateRanges,
+    calendarMonthId,
+    calendarColorScheme,
+    ...props
+  }: CalendarProps) => {
     useEffect(() => {
       activeDateRangesEmitter.emit(
         "onSetActiveDateRanges",
@@ -168,7 +185,11 @@ export const Calendar = memo(
        */
     }, [calendarActiveDateRanges, calendarMonthId]);
 
-    return <BaseCalendar {...props} calendarMonthId={calendarMonthId} />;
+    return (
+      <CalendarThemeProvider colorScheme={calendarColorScheme}>
+        <BaseCalendar {...props} calendarMonthId={calendarMonthId} />
+      </CalendarThemeProvider>
+    );
   }
 );
 

packages/flash-calendar/src/components/CalendarList.tsx

@@ -117,6 +117,7 @@ export const CalendarList = memo(
         calendarAdditionalHeight = 0,
 
         // Other props
+        calendarColorScheme,
         theme,
         onEndReached,
         ...props
@@ -137,20 +138,21 @@ export const CalendarList = memo(
 
       const calendarProps = useMemo(
         (): CalendarMonthEnhanced["calendarProps"] => ({
+          calendarColorScheme,
           calendarActiveDateRanges,
           calendarDayHeight,
+          calendarDisabledDateIds,
           calendarFirstDayOfWeek,
-          getCalendarDayFormat,
-          getCalendarWeekDayFormat,
+          calendarFormatLocale,
           calendarMaxDateId,
           calendarMinDateId,
-          calendarFormatLocale,
           calendarMonthHeaderHeight,
           calendarRowHorizontalSpacing,
-          getCalendarMonthFormat,
           calendarRowVerticalSpacing,
           calendarWeekHeaderHeight,
-          calendarDisabledDateIds,
+          getCalendarDayFormat,
+          getCalendarMonthFormat,
+          getCalendarWeekDayFormat,
           onCalendarDayPress,
           theme,
         }),
@@ -169,6 +171,7 @@ export const CalendarList = memo(
           calendarRowVerticalSpacing,
           calendarWeekHeaderHeight,
           calendarDisabledDateIds,
+          calendarColorScheme,
           onCalendarDayPress,
           theme,
         ]

packages/flash-calendar/src/components/CalendarThemeProvider.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import { createContext, useContext, useMemo } from "react";
+import type { ColorSchemeName } from "react-native";
+
+export interface CalendarThemeContextType {
+  colorScheme?: ColorSchemeName;
+}
+
+const CalendarThemeContext = createContext<CalendarThemeContextType>({
+  colorScheme: undefined,
+});
+
+export const CalendarThemeProvider = ({
+  children,
+  colorScheme,
+}: {
+  children: ReactNode;
+  /**
+   * When set, Flash Calendar will use this color scheme instead of the system's
+   * value (`light|dark`). This is useful if your app doesn't support dark-mode,
+   * for example.
+   *
+   * We don't advise using this prop - ideally, your app should reflect the
+   * user's preferences.
+   */
+  colorScheme?: ColorSchemeName;
+}) => {
+  const calendarThemeContextValue = useMemo<CalendarThemeContextType>(
+    () => ({ colorScheme }),
+    [colorScheme]
+  );
+
+  return (
+    <CalendarThemeContext.Provider value={calendarThemeContextValue}>
+      {children}
+    </CalendarThemeContext.Provider>
+  );
+};
+
+export const useCalendarTheme = () => {
+  const context = useContext(CalendarThemeContext);
+  return context;
+};

packages/flash-calendar/src/hooks/useTheme.ts

@@ -2,8 +2,13 @@ import { useColorScheme } from "react-native";
 
 import type { BaseTheme } from "@/helpers/tokens";
 import { darkTheme, lightTheme } from "@/helpers/tokens";
+import { useCalendarTheme } from "@/components/CalendarThemeProvider";
 
 export const useTheme = (): BaseTheme => {
   const appearance = useColorScheme();
-  return appearance === "dark" ? darkTheme : lightTheme;
+  const { colorScheme } = useCalendarTheme();
+
+  const theme = colorScheme ?? appearance;
+
+  return theme === "dark" ? darkTheme : lightTheme;
 };