Owlibou/owlry
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement proper GTK4 theming with CSS variables

Browse Source 
- Use system GTK theme by default instead of custom owl theme
- Add base.css with structural styles and GTK theme fallbacks
- Rename style.css to owl-theme.css (now opt-in via config)
- Add ThemeColors struct for user color customization
- Create theme module for CSS variable generation
- Apply font_size and border_radius from config

CSS loading priority:
1. base.css - structure + GTK fallbacks
2. theme CSS - optional (owl or custom)
3. user style.css - custom overrides
4. config variables - highest priority

Config example:
  [appearance]
  theme = "owl"  # or omit for GTK default
  [appearance.colors]
  accent = "#f38ba8"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
vikingowl
2025-12-28 14:24:40 +01:00
parent 2d3efcdd56
commit 00cfad6469
6 changed files with 410 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/app.rs
View File

@@ -2,9 +2,10 @@ use crate::cli::CliArgs;
use crate::config::Config;
use crate::filter::ProviderFilter;
use crate::providers::ProviderManager;
use crate::theme;
use crate::ui::MainWindow;
use gtk4::prelude::*;
use gtk4::{gio, Application};
use gtk4::{gio, Application, CssProvider};
use gtk4_layer_shell::{Edge, Layer, LayerShell};
use log::debug;
use std::cell::RefCell;
@@ -63,34 +64,77 @@ impl OwlryApp {
// Position from top
window.set_margin(Edge::Top, 200);
// Load CSS styling
Self::load_css();
// Load CSS styling with config for theming
Self::load_css(&config.borrow());
window.present();
}
fn load_css() {
let provider = gtk4::CssProvider::new();
// Try to load from config directory first, then fall back to embedded
let config_css = dirs::config_dir().map(|p| p.join("owlry").join("style.css"));
if let Some(css_path) = config_css {
if css_path.exists() {
provider.load_from_path(&css_path);
debug!("Loaded CSS from {:?}", css_path);
} else {
provider.load_from_string(include_str!("../resources/style.css"));
debug!("Loaded embedded CSS");
}
} else {
provider.load_from_string(include_str!("../resources/style.css"));
}
fn load_css(config: &Config) {
let display = gtk4::gdk::Display::default().expect("Could not get default display");
// 1. Load base structural CSS (always applied)
let base_provider = CssProvider::new();
base_provider.load_from_string(include_str!("../resources/base.css"));
gtk4::style_context_add_provider_for_display(
&gtk4::gdk::Display::default().expect("Could not get default display"),
&provider,
&display,
&base_provider,
gtk4::STYLE_PROVIDER_PRIORITY_APPLICATION,
);
debug!("Loaded base structural CSS");
// 2. Load theme if specified
if let Some(ref theme_name) = config.appearance.theme {
let theme_provider = CssProvider::new();
match theme_name.as_str() {
"owl" => {
theme_provider.load_from_string(include_str!("../resources/owl-theme.css"));
debug!("Loaded built-in owl theme");
}
_ => {
// Check for custom theme in ~/.config/owlry/themes/{name}.css
if let Some(theme_path) = dirs::config_dir()
.map(|p| p.join("owlry").join("themes").join(format!("{}.css", theme_name)))
{
if theme_path.exists() {
theme_provider.load_from_path(&theme_path);
debug!("Loaded custom theme from {:?}", theme_path);
} else {
debug!("Theme '{}' not found at {:?}", theme_name, theme_path);
}
}
}
}
gtk4::style_context_add_provider_for_display(
&display,
&theme_provider,
gtk4::STYLE_PROVIDER_PRIORITY_APPLICATION + 1,
);
}
// 3. Load user's custom stylesheet if exists
if let Some(custom_path) = dirs::config_dir().map(|p| p.join("owlry").join("style.css")) {
if custom_path.exists() {
let custom_provider = CssProvider::new();
custom_provider.load_from_path(&custom_path);
gtk4::style_context_add_provider_for_display(
&display,
&custom_provider,
gtk4::STYLE_PROVIDER_PRIORITY_USER,
);
debug!("Loaded custom CSS from {:?}", custom_path);
}
}
// 4. Inject config variables (highest priority for overrides)
let vars_css = theme::generate_variables_css(&config.appearance);
let vars_provider = CssProvider::new();
vars_provider.load_from_string(&vars_css);
gtk4::style_context_add_provider_for_display(
&display,
&vars_provider,
gtk4::STYLE_PROVIDER_PRIORITY_USER + 1,
);
debug!("Injected config CSS variables");
}
}

26
src/config/mod.rs
View File

@@ -17,12 +17,36 @@ pub struct GeneralConfig {
pub terminal_command: String,
}
/// User-customizable theme colors
/// All fields are optional - unset values inherit from GTK theme
#[derive(Debug, Clone, Serialize, Deserialize, Default)]
pub struct ThemeColors {
pub background: Option<String>,
pub background_secondary: Option<String>,
pub border: Option<String>,
pub text: Option<String>,
pub text_secondary: Option<String>,
pub accent: Option<String>,
pub accent_bright: Option<String>,
// Provider badge colors
pub badge_app: Option<String>,
pub badge_cmd: Option<String>,
pub badge_dmenu: Option<String>,
pub badge_uuctl: Option<String>,
}
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct AppearanceConfig {
pub width: i32,
pub height: i32,
pub font_size: u32,
pub border_radius: u32,
/// Theme name: None = GTK default, "owl" = built-in owl theme
#[serde(default)]
pub theme: Option<String>,
/// Individual color overrides
#[serde(default)]
pub colors: ThemeColors,
}
#[derive(Debug, Clone, Serialize, Deserialize)]
@@ -109,6 +133,8 @@ impl Default for Config {
height: 400,
font_size: 14,
border_radius: 12,
theme: None,
colors: ThemeColors::default(),
},
providers: ProvidersConfig {
applications: true,

1
src/main.rs
View File

@@ -3,6 +3,7 @@ mod cli;
mod config;
mod filter;
mod providers;
mod theme;
mod ui;
use app::OwlryApp;

50
src/theme.rs Normal file
View File

@@ -0,0 +1,50 @@
use crate::config::AppearanceConfig;
/// Generate CSS with :root variables from config settings
pub fn generate_variables_css(config: &AppearanceConfig) -> String {
let mut css = String::from(":root {\n");
// Always inject layout config values
css.push_str(&format!(" --owlry-font-size: {}px;\n", config.font_size));
css.push_str(&format!(" --owlry-border-radius: {}px;\n", config.border_radius));
// Only inject colors if user specified them
if let Some(ref bg) = config.colors.background {
css.push_str(&format!(" --owlry-bg: {};\n", bg));
}
if let Some(ref bg_secondary) = config.colors.background_secondary {
css.push_str(&format!(" --owlry-bg-secondary: {};\n", bg_secondary));
}
if let Some(ref border) = config.colors.border {
css.push_str(&format!(" --owlry-border: {};\n", border));
}
if let Some(ref text) = config.colors.text {
css.push_str(&format!(" --owlry-text: {};\n", text));
}
if let Some(ref text_secondary) = config.colors.text_secondary {
css.push_str(&format!(" --owlry-text-secondary: {};\n", text_secondary));
}
if let Some(ref accent) = config.colors.accent {
css.push_str(&format!(" --owlry-accent: {};\n", accent));
}
if let Some(ref accent_bright) = config.colors.accent_bright {
css.push_str(&format!(" --owlry-accent-bright: {};\n", accent_bright));
}
// Provider badge colors
if let Some(ref badge_app) = config.colors.badge_app {
css.push_str(&format!(" --owlry-badge-app: {};\n", badge_app));
}
if let Some(ref badge_cmd) = config.colors.badge_cmd {
css.push_str(&format!(" --owlry-badge-cmd: {};\n", badge_cmd));
}
if let Some(ref badge_dmenu) = config.colors.badge_dmenu {
css.push_str(&format!(" --owlry-badge-dmenu: {};\n", badge_dmenu));
}
if let Some(ref badge_uuctl) = config.colors.badge_uuctl {
css.push_str(&format!(" --owlry-badge-uuctl: {};\n", badge_uuctl));
}
css.push_str("}\n");
css
}