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;
 };