From 19f3552bfc9d7329ee5384fcfd7a7ff55da9f666 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 7 Apr 2026 18:48:32 +0300
Subject: [PATCH] fix(calendar): colors unreadable on dark theme (closes #8989)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The calendar event has a light yellow background with light yellow text in dark theme, making it nearly unreadable.

The root cause is a CSS load order issue. The :root defaults in index.css:1-10 are loaded after the dark theme's :root overrides (since component CSS loads after global CSS in Vite), so the defaults (95% lightness, 80% saturation) stomp over the dark theme values (20% lightness, 25% saturation). The background stays light, but --custom-color correctly gets the dark-adjusted (light) text color → light-on-light = bad contrast.

The fix: remove the :root block and use var() fallbacks instead, so there's no :root competition.
---
 .../widgets/collections/calendar/index.css    | 27 ++++++-------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/apps/client/src/widgets/collections/calendar/index.css b/apps/client/src/widgets/collections/calendar/index.css
index df93910b50..51ff05e032 100644
--- a/apps/client/src/widgets/collections/calendar/index.css
+++ b/apps/client/src/widgets/collections/calendar/index.css
@@ -1,20 +1,9 @@
-:root {
-    /* Default values to be overridden by themes */
-    --calendar-coll-event-background-lightness: 95%;
-    --calendar-coll-event-background-saturation: 80%;
-    --calendar-coll-event-background-color: var(--accented-background-color);
-    --calendar-coll-event-text-color: var(--main-text-color);
-    --calendar-coll-event-hover-filter: none;
-    --callendar-coll-event-archived-sripe-color: #00000013;
-    --calendar-coll-today-background-color: var(--more-accented-background-color);
-}
-
 .calendar-view {
-    --fc-event-border-color: var(--calendar-coll-event-text-color);
-    --fc-event-bg-color: var(--calendar-coll-event-background-color);
-    --fc-event-text-color: var(--calendar-coll-event-text-color);
+    --fc-event-border-color: var(--calendar-coll-event-text-color, var(--main-text-color));
+    --fc-event-bg-color: var(--calendar-coll-event-background-color, var(--accented-background-color));
+    --fc-event-text-color: var(--calendar-coll-event-text-color, var(--main-text-color));
     --fc-event-selected-overlay-color: transparent;
-    --fc-today-bg-color: var(--calendar-coll-today-background-color);
+    --fc-today-bg-color: var(--calendar-coll-today-background-color, var(--more-accented-background-color));
 
     overflow: hidden;
     position: relative;
@@ -123,7 +112,7 @@
     z-index: -1;
 
     --c1: transparent;
-    --c2: var(--callendar-coll-event-archived-sripe-color);
+    --c2: var(--callendar-coll-event-archived-sripe-color, #00000013);
 
     background: repeating-linear-gradient(45deg, var(--c1), var(--c1) 8px,
                                           var(--c2) 8px, var(--c2) 16px);
@@ -153,8 +142,8 @@
     --fc-event-text-color: var(--custom-color);
 
     --fc-event-bg-color: hsl(var(--custom-color-hue),
-                    var(--calendar-coll-event-background-saturation),
-                    var(--calendar-coll-event-background-lightness)) !important;
+                    var(--calendar-coll-event-background-saturation, 80%),
+                    var(--calendar-coll-event-background-lightness, 95%)) !important;
 }
 
 .calendar-view a.fc-timegrid-event:focus-visible,
@@ -171,7 +160,7 @@
 
 .calendar-view a.fc-timegrid-event:hover,
 .calendar-view a.fc-daygrid-event:hover {
-    filter: var(--calendar-coll-event-hover-filter);
+    filter: var(--calendar-coll-event-hover-filter, none);
     border-color: var(--fc-event-text-color);
     text-decoration: none;
     color: currentColor;