From 11b16c20b2a76e68318b4ebe55df80a35d1a0558 Mon Sep 17 00:00:00 2001
From: "Rene D. Obermueller" <cmdrrdo@gmail.com>
Date: Mon, 26 Jan 2026 15:45:13 +0100
Subject: [PATCH] feat: use adwaita headerbar vars for toolbar style

Closes: #213
Closes: #396

Adwaita provides [theme variables for
headerbars](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/css-variables.html#header-bar-colors), use those instead of
hardcoded values.

Also, move default css into its own file (#213).

The current implementation adds the overrides.css file to the
same provider. This clears all default settings. This commit addresses
this by adding an additional provider if the overrides file is present.

Lastly, mention override in README.
---
 README.md              | 13 +++++++++++++
 src/assets/default.css | 16 ++++++++++++++++
 src/main.rs            | 35 ++++++++++++++---------------------
 3 files changed, 43 insertions(+), 21 deletions(-)
 create mode 100644 src/assets/default.css

diff --git a/README.md b/README.md
index bfbb625b..e0d73b0b 100644
--- a/README.md
+++ b/README.md
@@ -283,6 +283,19 @@ Options:
           Print version
 ```
 
+### CSS
+
+Satty ships with [minimal builtin CSS](https://github.com/Satty-org/Satty/tree/main/assets/default.css) which can be overridden by `$XDG_CONFIG_HOME/satty/overrides.css`. Adwaita defaults for headerbar (`@headerbar_fg_color` and `@headerbar_bg_color`) which Satty uses <sup>NEXTRELEASE</sup> may lack transparency, here's an override example:
+
+```css
+.toolbar {
+    color: #000000;
+    background-color: #ddddddaa;
+}
+```
+
+You can discover styleable elements by using the GTK inspector with env variable `GTK_DEBUG=interactive`.
+
 ### IME <sup>0.20.0</sup>
 
 Satty supports IME via GTK with and without preediting. Please note, at this point Satty has no proper fallback font handling so the font used needs to contain the entered glyphs.
diff --git a/src/assets/default.css b/src/assets/default.css
new file mode 100644
index 00000000..1b6d994f
--- /dev/null
+++ b/src/assets/default.css
@@ -0,0 +1,16 @@
+.root {
+    min-width: 65rem;
+    min-height: 10rem;
+}
+.toolbar {
+    color: @headerbar_fg_color;
+    background: @headerbar_bg_color;
+}
+.toast {
+    color: #f9f9f9;
+    background-color: #00000099;
+    border-radius: 6px;
+    margin-top: 50px;
+}
+.toolbar-bottom { border-radius: 6px 6px 0px 0px; }
+.toolbar-top { border-radius: 0px 0px 6px 6px; }
diff --git a/src/main.rs b/src/main.rs
index 490cb437..bd789d24 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -143,29 +143,22 @@ impl App {
 
     fn apply_style() {
         let css_provider = CssProvider::new();
-        css_provider.load_from_data(
-            "
-            .root {
-                min-width: 65rem;
-                min-height: 10rem;
-            }
-            .toolbar {color: #f9f9f9 ; background: #00000099;}
-            .toast {
-                color: #f9f9f9;
-                background: #00000099;
-                border-radius: 6px;
-                margin-top: 50px;
-            }
-            .toolbar-bottom {border-radius: 6px 6px 0px 0px;}
-            .toolbar-top {border-radius: 0px 0px 6px 6px;}
-            ",
-        );
-        if let Some(overrides) = read_css_overrides() {
-            css_provider.load_from_data(&overrides);
-        }
+        css_provider.load_from_data(include_str!("assets/default.css"));
+
+        let css_provider_override = if let Some(overrides) = read_css_overrides() {
+            let css_provider2 = CssProvider::new();
+            css_provider2.load_from_data(&overrides);
+            Some(css_provider2)
+        } else {
+            None
+        };
+
         match DisplayManager::get().default_display() {
             Some(display) => {
-                gtk::style_context_add_provider_for_display(&display, &css_provider, 1)
+                gtk::style_context_add_provider_for_display(&display, &css_provider, 1);
+                if let Some(css_provider2) = css_provider_override {
+                    gtk::style_context_add_provider_for_display(&display, &css_provider2, 1)
+                }
             }
             None => println!("Cannot apply style"),
         }