diff --git a/.changeset/eighty-papayas-bathe.md b/.changeset/eighty-papayas-bathe.md new file mode 100644 index 0000000..36e3298 --- /dev/null +++ b/.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. diff --git a/apps/docs/docs/fundamentals/tips-and-tricks.mdx b/apps/docs/docs/fundamentals/tips-and-tricks.mdx index feaefc3..7c41c13 100644 --- a/apps/docs/docs/fundamentals/tips-and-tricks.mdx +++ b/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 ( + + ); +}; +``` + +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. diff --git a/packages/flash-calendar/src/components/Calendar.stories.tsx b/packages/flash-calendar/src/components/Calendar.stories.tsx index a4f6f57..5328c55 100644 --- a/packages/flash-calendar/src/components/Calendar.stories.tsx +++ b/packages/flash-calendar/src/components/Calendar.stories.tsx @@ -165,3 +165,19 @@ export const ControlledColorScheme: StoryObj = { calendarColorScheme: "dark", }, }; + +export const LightModeOnly = () => { + const { calendarActiveDateRanges, onCalendarDayPress } = useDateRange({ + startId: "2024-02-04", + endId: "2024-02-09", + }); + + return ( + + ); +};