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 (
+
+ );
+};