feat: use adwaita headerbar vars for toolbar style

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.

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

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"),
         }