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