Force dark styles for calendar

regalijan · Dec 3, 2024 · 3d316e5 · 3d316e5
1 parent 38f9b39
commit 3d316e5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/app/routes/events-calendar.tsx b/app/routes/events-calendar.tsx
@@ -1,4 +1,5 @@
 import calendarStyles from "react-big-calendar/lib/css/react-big-calendar.css";
+import calendarOverrides from "../styles/calendar.css";
 import eventStyles from "../styles/events-team.css";
 import { Calendar, dayjsLocalizer } from "react-big-calendar";
 import dayjs from "dayjs";
@@ -29,6 +30,7 @@ export const links: LinksFunction = () => {
   return [
     { href: calendarStyles, rel: "stylesheet" },
     { href: eventStyles, rel: "stylesheet" },
+    { href: calendarOverrides, rel: "stylesheet" },
   ];
 };
 

diff --git a/app/styles/calendar.css b/app/styles/calendar.css
@@ -0,0 +1,17 @@
+.rbc-show-more {
+  background-color: unset;
+}
+
+@media (prefers-color-scheme: dark) {
+  .rbc-off-range-bg {
+    background: #12161f;
+  }
+
+  .rbc-overlay-header {
+    color: #2d3748;
+  }
+
+  .rbc-today {
+    background-color: #747bff;
+  }
+}