From 0effbebbb6be109afc32f198544343af9992e05e Mon Sep 17 00:00:00 2001 From: bbedward Date: Sun, 21 Dec 2025 12:52:01 -0500 Subject: [PATCH] matugen: fix GTK4 light mode fixes #1110 fixes #1056 --- .../Overview/CalendarOverviewCard.qml | 143 +++++++++--------- quickshell/matugen/configs/gtk3-light.toml | 2 +- quickshell/matugen/templates/gtk-colors.css | 10 ++ 3 files changed, 81 insertions(+), 74 deletions(-) diff --git a/quickshell/Modules/DankDash/Overview/CalendarOverviewCard.qml b/quickshell/Modules/DankDash/Overview/CalendarOverviewCard.qml index f486091c..6a2800a0 100644 --- a/quickshell/Modules/DankDash/Overview/CalendarOverviewCard.qml +++ b/quickshell/Modules/DankDash/Overview/CalendarOverviewCard.qml @@ -1,5 +1,4 @@ import QtQuick -import QtQuick.Effects import Quickshell import qs.Common import qs.Services @@ -13,72 +12,70 @@ Rectangle { property var selectedDateEvents: [] property bool hasEvents: selectedDateEvents && selectedDateEvents.length > 0 - signal closeDash() + signal closeDash function weekStartJs() { - return Qt.locale().firstDayOfWeek % 7 + return Qt.locale().firstDayOfWeek % 7; } function startOfWeek(dateObj) { - const d = new Date(dateObj) - const jsDow = d.getDay() - const diff = (jsDow - weekStartJs() + 7) % 7 - d.setDate(d.getDate() - diff) - return d + const d = new Date(dateObj); + const jsDow = d.getDay(); + const diff = (jsDow - weekStartJs() + 7) % 7; + d.setDate(d.getDate() - diff); + return d; } function endOfWeek(dateObj) { - const d = new Date(dateObj) - const jsDow = d.getDay() - const add = (weekStartJs() + 6 - jsDow + 7) % 7 - d.setDate(d.getDate() + add) - return d + const d = new Date(dateObj); + const jsDow = d.getDay(); + const add = (weekStartJs() + 6 - jsDow + 7) % 7; + d.setDate(d.getDate() + add); + return d; } function updateSelectedDateEvents() { if (CalendarService && CalendarService.khalAvailable) { - const events = CalendarService.getEventsForDate(selectedDate) - selectedDateEvents = events + const events = CalendarService.getEventsForDate(selectedDate); + selectedDateEvents = events; } else { - selectedDateEvents = [] + selectedDateEvents = []; } } function loadEventsForMonth() { if (!CalendarService || !CalendarService.khalAvailable) { - return + return; } - const firstOfMonth = new Date(calendarGrid.displayDate.getFullYear(), - calendarGrid.displayDate.getMonth(), 1) - const lastOfMonth = new Date(calendarGrid.displayDate.getFullYear(), - calendarGrid.displayDate.getMonth() + 1, 0) + const firstOfMonth = new Date(calendarGrid.displayDate.getFullYear(), calendarGrid.displayDate.getMonth(), 1); + const lastOfMonth = new Date(calendarGrid.displayDate.getFullYear(), calendarGrid.displayDate.getMonth() + 1, 0); - const startDate = startOfWeek(firstOfMonth) - startDate.setDate(startDate.getDate() - 7) + const startDate = startOfWeek(firstOfMonth); + startDate.setDate(startDate.getDate() - 7); - const endDate = endOfWeek(lastOfMonth) - endDate.setDate(endDate.getDate() + 7) + const endDate = endOfWeek(lastOfMonth); + endDate.setDate(endDate.getDate() + 7); - CalendarService.loadEvents(startDate, endDate) + CalendarService.loadEvents(startDate, endDate); } onSelectedDateChanged: updateSelectedDateEvents() Component.onCompleted: { - loadEventsForMonth() - updateSelectedDateEvents() + loadEventsForMonth(); + updateSelectedDateEvents(); } Connections { function onEventsByDateChanged() { - updateSelectedDateEvents() + updateSelectedDateEvents(); } function onKhalAvailableChanged() { if (CalendarService && CalendarService.khalAvailable) { - loadEventsForMonth() + loadEventsForMonth(); } - updateSelectedDateEvents() + updateSelectedDateEvents(); } target: CalendarService @@ -133,12 +130,12 @@ Rectangle { height: 40 anchors.verticalCenter: parent.verticalCenter text: { - const dateStr = Qt.formatDate(selectedDate, "MMM d") + const dateStr = Qt.formatDate(selectedDate, "MMM d"); if (selectedDateEvents && selectedDateEvents.length > 0) { - const eventCount = selectedDateEvents.length === 1 ? I18n.tr("1 event") : selectedDateEvents.length + " " + I18n.tr("events") - return dateStr + " • " + eventCount + const eventCount = selectedDateEvents.length === 1 ? I18n.tr("1 event") : selectedDateEvents.length + " " + I18n.tr("events"); + return dateStr + " • " + eventCount; } - return dateStr + return dateStr; } font.pixelSize: Theme.fontSizeMedium color: Theme.surfaceText @@ -171,10 +168,10 @@ Rectangle { hoverEnabled: true cursorShape: Qt.PointingHandCursor onClicked: { - let newDate = new Date(calendarGrid.displayDate) - newDate.setMonth(newDate.getMonth() - 1) - calendarGrid.displayDate = newDate - loadEventsForMonth() + let newDate = new Date(calendarGrid.displayDate); + newDate.setMonth(newDate.getMonth() - 1); + calendarGrid.displayDate = newDate; + loadEventsForMonth(); } } } @@ -209,10 +206,10 @@ Rectangle { hoverEnabled: true cursorShape: Qt.PointingHandCursor onClicked: { - let newDate = new Date(calendarGrid.displayDate) - newDate.setMonth(newDate.getMonth() + 1) - calendarGrid.displayDate = newDate - loadEventsForMonth() + let newDate = new Date(calendarGrid.displayDate); + newDate.setMonth(newDate.getMonth() + 1); + calendarGrid.displayDate = newDate; + loadEventsForMonth(); } } } @@ -225,14 +222,14 @@ Rectangle { Repeater { model: { - const days = [] - const loc = Qt.locale() - const qtFirst = loc.firstDayOfWeek + const days = []; + const loc = Qt.locale(); + const qtFirst = loc.firstDayOfWeek; for (let i = 0; i < 7; ++i) { - const qtDay = ((qtFirst - 1 + i) % 7) + 1 - days.push(loc.dayName(qtDay, Locale.ShortFormat)) + const qtDay = ((qtFirst - 1 + i) % 7) + 1; + days.push(loc.dayName(qtDay, Locale.ShortFormat)); } - return days + return days; } Rectangle { @@ -259,8 +256,8 @@ Rectangle { property date selectedDate: systemClock.date readonly property date firstDay: { - const firstOfMonth = new Date(displayDate.getFullYear(), displayDate.getMonth(), 1) - return startOfWeek(firstOfMonth) + const firstOfMonth = new Date(displayDate.getFullYear(), displayDate.getMonth(), 1); + return startOfWeek(firstOfMonth); } width: parent.width @@ -273,9 +270,9 @@ Rectangle { Rectangle { readonly property date dayDate: { - const date = new Date(parent.firstDay) - date.setDate(date.getDate() + index) - return date + const date = new Date(parent.firstDay); + date.setDate(date.getDate() + index); + return date; } readonly property bool isCurrentMonth: dayDate.getMonth() === calendarGrid.displayDate.getMonth() readonly property bool isToday: dayDate.toDateString() === new Date().toDateString() @@ -290,7 +287,7 @@ Rectangle { width: Math.min(parent.width - 4, parent.height - 4, 32) height: width color: isToday ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : dayArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent" - radius: width / 2 + radius: Theme.cornerRadius StyledText { anchors.centerIn: parent @@ -306,7 +303,7 @@ Rectangle { anchors.bottomMargin: 4 width: 12 height: 2 - radius: 1 + radius: Theme.cornerRadius visible: CalendarService && CalendarService.khalAvailable && CalendarService.hasEventsForDate(dayDate) color: isToday ? Qt.lighter(Theme.primary, 1.3) : Theme.primary opacity: isToday ? 0.9 : 0.7 @@ -327,8 +324,8 @@ Rectangle { cursorShape: Qt.PointingHandCursor onClicked: { if (CalendarService && CalendarService.khalAvailable && CalendarService.hasEventsForDate(dayDate)) { - root.selectedDate = dayDate - root.showEventDetails = true + root.selectedDate = dayDate; + root.showEventDetails = true; } } } @@ -350,19 +347,19 @@ Rectangle { radius: Theme.cornerRadius color: { if (modelData.url && eventMouseArea.containsMouse) { - return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) + return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12); } else if (eventMouseArea.containsMouse) { - return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.06) + return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.06); } - return Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) + return Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency); } border.color: { if (modelData.url && eventMouseArea.containsMouse) { - return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) + return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3); } else if (eventMouseArea.containsMouse) { - return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.15) + return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.15); } - return "transparent" + return "transparent"; } border.width: 1 @@ -372,7 +369,7 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: 3 anchors.verticalCenter: parent.verticalCenter - radius: 2 + radius: Theme.cornerRadius color: Theme.primary opacity: 0.8 } @@ -401,16 +398,16 @@ Rectangle { width: parent.width text: { if (!modelData || modelData.allDay) { - return I18n.tr("All day") + return I18n.tr("All day"); } else if (modelData.start && modelData.end) { - const timeFormat = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP" - const startTime = Qt.formatTime(modelData.start, timeFormat) + const timeFormat = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP"; + const startTime = Qt.formatTime(modelData.start, timeFormat); if (modelData.start.toDateString() !== modelData.end.toDateString() || modelData.start.getTime() !== modelData.end.getTime()) { - return startTime + " – " + Qt.formatTime(modelData.end, timeFormat) + return startTime + " – " + Qt.formatTime(modelData.end, timeFormat); } - return startTime + return startTime; } - return "" + return ""; } font.pixelSize: Theme.fontSizeSmall color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7) @@ -429,9 +426,9 @@ Rectangle { onClicked: { if (modelData.url && modelData.url !== "") { if (Qt.openUrlExternally(modelData.url) === false) { - console.warn("Failed to open URL: " + modelData.url) + console.warn("Failed to open URL: " + modelData.url); } else { - root.closeDash() + root.closeDash(); } } } diff --git a/quickshell/matugen/configs/gtk3-light.toml b/quickshell/matugen/configs/gtk3-light.toml index 855c363f..4fe2cee4 100644 --- a/quickshell/matugen/configs/gtk3-light.toml +++ b/quickshell/matugen/configs/gtk3-light.toml @@ -3,5 +3,5 @@ input_path = 'SHELL_DIR/matugen/templates/gtk-light-colors.css' output_path = '~/.config/gtk-3.0/dank-colors.css' [templates.dmsgtk4] -input_path = 'SHELL_DIR/matugen/templates/gtk-light-colors.css' +input_path = 'SHELL_DIR/matugen/templates/gtk-colors.css' output_path = '~/.config/gtk-4.0/dank-colors.css' diff --git a/quickshell/matugen/templates/gtk-colors.css b/quickshell/matugen/templates/gtk-colors.css index 133f0a3c..25e3b2a7 100644 --- a/quickshell/matugen/templates/gtk-colors.css +++ b/quickshell/matugen/templates/gtk-colors.css @@ -36,3 +36,13 @@ a color between surface and surface container so I think just giving this surfac @define-color popover_fg_color {{colors.on_surface.default.hex}}; @define-color dialog_bg_color {{colors.surface_container_lowest.default.hex}}; @define-color dialog_fg_color {{colors.on_surface.default.hex}}; + +/* Backdrop/unfocused states - prevents white flash on window unfocus */ +@define-color headerbar_backdrop_color @window_bg_color; +@define-color sidebar_backdrop_color @sidebar_bg_color; +@define-color theme_unfocused_fg_color @window_fg_color; +@define-color theme_unfocused_text_color @view_fg_color; +@define-color theme_unfocused_bg_color @window_bg_color; +@define-color theme_unfocused_base_color @window_bg_color; +@define-color theme_unfocused_selected_bg_color @accent_bg_color; +@define-color theme_unfocused_selected_fg_color @accent_fg_color;