Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-07 05:47:26 +02:00
Code Issues Packages Projects Releases Activity

fix(calendar): colors unreadable on dark theme (closes #8989)

Browse Source 
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.
This commit is contained in:
Elian Doran
2026-04-07 18:48:32 +03:00
parent cedce6cf32
commit 19f3552bfc
1 changed files with 8 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/client/src/widgets/collections/calendar/index.css
View File

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