From 51157ecb23950a07c0c8ddc9445e3b9bdcf56990 Mon Sep 17 00:00:00 2001
From: nevaforget <dom@moonarch.de>
Date: Thu, 2 Apr 2026 10:12:01 +0200
Subject: [PATCH] fix: replace hardcoded CSS colors with GTK theme variables
 (v0.7.2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Greeter used hardcoded colors (#1a1a2e, white, #ff6b6b) instead of
GTK theme variables, breaking theme consistency across the ecosystem.
Now uses @theme_bg_color, @theme_fg_color, @error_color etc. —
matching moonlock and moonset.
---
 Cargo.toml          |  2 +-
 DECISIONS.md        |  7 +++++++
 resources/style.css | 26 +++++++++++++-------------
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index d27d51b..71448de 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "moongreet"
-version = "0.7.1"
+version = "0.7.2"
 edition = "2024"
 description = "A greetd greeter for Wayland with GTK4 and Layer Shell"
 license = "MIT"
diff --git a/DECISIONS.md b/DECISIONS.md
index 12e4bec..cd3bd3e 100644
--- a/DECISIONS.md
+++ b/DECISIONS.md
@@ -1,5 +1,12 @@
 # Decisions
 
+## 2026-04-02 – Replace hardcoded CSS colors with GTK theme variables
+
+- **Who**: Ragnar, Dom
+- **Why**: moongreet used hardcoded colors (#1a1a2e, white, #ff6b6b) while moonset already used @theme_bg_color, @theme_fg_color, @error_color etc. Inconsistent across the ecosystem and broke theme flexibility.
+- **Tradeoffs**: Depends on the active GTK theme defining standard color variables. Catppuccin Colloid provides all needed vars (@theme_bg_color, @theme_fg_color, @error_color, @success_color, @theme_selected_bg_color). Fallback behavior if a theme lacks vars is GTK's default colors — acceptable.
+- **How**: Replaced all hardcoded hex/named colors with GTK theme variables. Coordinated change across moongreet, moonlock, and moonset (all three now use identical pattern).
+
 ## 2026-03-31 – Fourth audit: power timeout, timing mitigation, release profile, GREETD_SOCK caching
 
 - **Who**: Ragnar, Dom
diff --git a/resources/style.css b/resources/style.css
index 614ecd0..e28d272 100644
--- a/resources/style.css
+++ b/resources/style.css
@@ -1,16 +1,16 @@
 /* ABOUTME: GTK4 CSS stylesheet for the Moongreet greeter. */
-/* ABOUTME: Defines styling for the login screen layout. */
+/* ABOUTME: Uses GTK theme colors for consistency with the active desktop theme. */
 
 /* Main window background */
 window.greeter {
-    background-color: #1a1a2e;
+    background-color: @theme_bg_color;
     background-size: cover;
     background-position: center;
 }
 
 /* Wallpaper-only window for secondary monitors */
 window.wallpaper {
-    background-color: #1a1a2e;
+    background-color: @theme_bg_color;
 }
 
 /* Central login area */
@@ -26,14 +26,14 @@ window.wallpaper {
     min-width: 128px;
     min-height: 128px;
     background-color: @theme_selected_bg_color;
-    border: 3px solid alpha(white, 0.3);
+    border: 3px solid alpha(@theme_fg_color, 0.3);
 }
 
 /* Username label */
 .username-label {
     font-size: 24px;
     font-weight: bold;
-    color: white;
+    color: @theme_fg_color;
     margin-top: 12px;
     margin-bottom: 40px;
 }
@@ -50,13 +50,13 @@ window.wallpaper {
 
 /* Error message label */
 .error-label {
-    color: #ff6b6b;
+    color: @error_color;
     font-size: 14px;
 }
 
 /* Fingerprint prompt label */
 .fingerprint-label {
-    color: alpha(white, 0.6);
+    color: alpha(@theme_fg_color, 0.6);
     font-size: 13px;
     margin-top: 8px;
 }
@@ -70,16 +70,16 @@ window.wallpaper {
 .user-list-item {
     padding: 8px 16px;
     border-radius: 8px;
-    color: white;
+    color: @theme_fg_color;
     font-size: 14px;
 }
 
 .user-list-item:hover {
-    background-color: alpha(white, 0.15);
+    background-color: alpha(@theme_fg_color, 0.15);
 }
 
 .user-list-item:selected {
-    background-color: alpha(white, 0.2);
+    background-color: alpha(@theme_fg_color, 0.2);
 }
 
 /* Power buttons on the bottom right */
@@ -88,12 +88,12 @@ window.wallpaper {
     min-height: 48px;
     padding: 0px;
     border-radius: 24px;
-    background-color: alpha(white, 0.1);
-    color: white;
+    background-color: alpha(@theme_fg_color, 0.1);
+    color: @theme_fg_color;
     border: none;
     margin: 4px;
 }
 
 .power-button:hover {
-    background-color: alpha(white, 0.25);
+    background-color: alpha(@theme_fg_color, 0.25);
 }