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

223
resources/base.css Normal file
View File

@@ -0,0 +1,223 @@
/*
* Owlry Base Styles
* Provides sensible defaults that work with GTK theme
* Colors can be overridden via theme or config
*/
/* Main window - transparent for layer shell */
.owlry-window {
background-color: transparent;
}
/* Main container - needs explicit background for overlay */
.owlry-main {
background-color: var(--owlry-bg, @theme_bg_color);
border-radius: var(--owlry-border-radius, 12px);
border: 1px solid var(--owlry-border, @borders);
padding: 16px;
}
/* Search entry */
.owlry-search {
background-color: var(--owlry-bg-secondary, @theme_base_color);
border: 2px solid var(--owlry-border, @borders);
border-radius: calc(var(--owlry-border-radius, 12px) - 4px);
padding: 12px 16px;
font-size: var(--owlry-font-size, 14px);
color: var(--owlry-text, @theme_fg_color);
min-height: 24px;
}
.owlry-search:focus {
border-color: var(--owlry-accent, @theme_selected_bg_color);
outline: none;
}
/* Results list */
.owlry-results {
background-color: transparent;
border-radius: calc(var(--owlry-border-radius, 12px) - 4px);
}
/* Individual result row */
.owlry-result-row {
background-color: transparent;
border-radius: calc(var(--owlry-border-radius, 12px) - 4px);
margin: 2px 0;
padding: 8px 12px;
}
.owlry-result-row:hover {
background-color: var(--owlry-bg-secondary, alpha(@theme_fg_color, 0.1));
}
.owlry-result-row:selected {
background-color: var(--owlry-accent, @theme_selected_bg_color);
color: var(--owlry-accent-bright, @theme_selected_fg_color);
}
/* Result icon */
.owlry-result-icon {
color: var(--owlry-text, @theme_fg_color);
opacity: 0.9;
}
.owlry-result-row:selected .owlry-result-icon {
color: var(--owlry-accent-bright, @theme_selected_fg_color);
opacity: 1;
}
/* Result name */
.owlry-result-name {
font-size: var(--owlry-font-size, 14px);
font-weight: 500;
color: var(--owlry-text, @theme_fg_color);
}
.owlry-result-row:selected .owlry-result-name {
color: var(--owlry-accent-bright, @theme_selected_fg_color);
}
/* Result description */
.owlry-result-description {
font-size: calc(var(--owlry-font-size, 14px) - 2px);
color: var(--owlry-text-secondary, alpha(@theme_fg_color, 0.7));
margin-top: 2px;
}
.owlry-result-row:selected .owlry-result-description {
color: var(--owlry-accent-bright, @theme_selected_fg_color);
}
/* Provider badges */
.owlry-result-badge {
font-size: calc(var(--owlry-font-size, 14px) - 4px);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 8px;
border-radius: 6px;
background-color: var(--owlry-bg-secondary, alpha(@theme_fg_color, 0.1));
color: var(--owlry-text-secondary, alpha(@theme_fg_color, 0.7));
}
.owlry-badge-app {
background-color: alpha(var(--owlry-badge-app, @blue_3), 0.2);
color: var(--owlry-badge-app, @blue_3);
}
.owlry-badge-cmd {
background-color: alpha(var(--owlry-badge-cmd, @purple_3), 0.2);
color: var(--owlry-badge-cmd, @purple_3);
}
.owlry-badge-dmenu {
background-color: alpha(var(--owlry-badge-dmenu, @green_3), 0.2);
color: var(--owlry-badge-dmenu, @green_3);
}
.owlry-badge-uuctl {
background-color: alpha(var(--owlry-badge-uuctl, @orange_3), 0.2);
color: var(--owlry-badge-uuctl, @orange_3);
}
/* Header bar */
.owlry-header {
margin-bottom: 4px;
}
/* Mode indicator */
.owlry-mode-indicator {
font-size: calc(var(--owlry-font-size, 14px) - 2px);
font-weight: 600;
padding: 4px 12px;
border-radius: 6px;
background-color: alpha(var(--owlry-accent, @theme_selected_bg_color), 0.2);
color: var(--owlry-accent, @theme_selected_bg_color);
}
/* Filter buttons */
.owlry-filter-button {
font-size: calc(var(--owlry-font-size, 14px) - 3px);
font-weight: 500;
padding: 4px 10px;
border-radius: 6px;
background-color: alpha(var(--owlry-border, @borders), 0.3);
color: var(--owlry-text-secondary, alpha(@theme_fg_color, 0.7));
border: 1px solid transparent;
min-height: 20px;
}
.owlry-filter-button:hover {
background-color: alpha(var(--owlry-border, @borders), 0.5);
color: var(--owlry-text, @theme_fg_color);
}
.owlry-filter-button:checked {
background-color: alpha(var(--owlry-accent, @theme_selected_bg_color), 0.2);
color: var(--owlry-accent, @theme_selected_bg_color);
border-color: alpha(var(--owlry-accent, @theme_selected_bg_color), 0.4);
}
/* Provider-specific filter button colors */
.owlry-filter-app:checked {
background-color: alpha(var(--owlry-badge-app, @blue_3), 0.2);
color: var(--owlry-badge-app, @blue_3);
border-color: alpha(var(--owlry-badge-app, @blue_3), 0.4);
}
.owlry-filter-cmd:checked {
background-color: alpha(var(--owlry-badge-cmd, @purple_3), 0.2);
color: var(--owlry-badge-cmd, @purple_3);
border-color: alpha(var(--owlry-badge-cmd, @purple_3), 0.4);
}
.owlry-filter-uuctl:checked {
background-color: alpha(var(--owlry-badge-uuctl, @orange_3), 0.2);
color: var(--owlry-badge-uuctl, @orange_3);
border-color: alpha(var(--owlry-badge-uuctl, @orange_3), 0.4);
}
.owlry-filter-dmenu:checked {
background-color: alpha(var(--owlry-badge-dmenu, @green_3), 0.2);
color: var(--owlry-badge-dmenu, @green_3);
border-color: alpha(var(--owlry-badge-dmenu, @green_3), 0.4);
}
/* Hints bar at bottom */
.owlry-hints {
padding-top: 8px;
border-top: 1px solid var(--owlry-border, @borders);
}
.owlry-hints-label {
font-size: calc(var(--owlry-font-size, 14px) - 4px);
color: var(--owlry-text-secondary, alpha(@theme_fg_color, 0.7));
letter-spacing: 0.5px;
}
/* Scrollbar styling */
scrollbar {
background-color: transparent;
}
scrollbar slider {
background-color: alpha(var(--owlry-border, @borders), 0.5);
border-radius: 4px;
min-width: 6px;
min-height: 40px;
}
scrollbar slider:hover {
background-color: alpha(var(--owlry-border, @borders), 0.7);
}
scrollbar slider:active {
background-color: var(--owlry-accent, @theme_selected_bg_color);
}
/* Text selection */
selection {
background-color: alpha(var(--owlry-accent, @theme_selected_bg_color), 0.3);
color: var(--owlry-text, @theme_fg_color);
}

126
resources/style.css → resources/owl-theme.css
View File

@@ -1,7 +1,8 @@
/*
* Owlry - Owl-themed Application Launcher
* Owlry - Owl Theme
* An owl-inspired dark theme with amber accents
*
* Color Palette (Owl-inspired):
* Color Palette:
* - Deep night sky: #1a1b26 (background)
* - Twilight: #24283b (secondary bg)
* - Owl feathers: #414868 (borders/muted)
@@ -11,14 +12,24 @@
* - Barn owl cream: #f5e0dc (bright accent)
*/
/* Main window */
.owlry-window {
background-color: transparent;
/* Define CSS variables with owl theme defaults */
:root {
--owlry-bg: #1a1b26;
--owlry-bg-secondary: #24283b;
--owlry-border: #414868;
--owlry-text: #c0caf5;
--owlry-text-secondary: #565f89;
--owlry-accent: #e0af68;
--owlry-accent-bright: #f5e0dc;
--owlry-badge-app: #7aa2f7;
--owlry-badge-cmd: #bb9af7;
--owlry-badge-dmenu: #9ece6a;
--owlry-badge-uuctl: #e0af68;
}
/* Main container */
.owlry-main {
background-color: rgba(26, 27, 38, 0.95);
border-radius: 16px;
border: 1px solid rgba(65, 72, 104, 0.6);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(224, 175, 104, 0.1);
@@ -28,35 +39,27 @@
.owlry-search {
background-color: rgba(36, 40, 59, 0.8);
border: 2px solid rgba(65, 72, 104, 0.5);
border-radius: 12px;
padding: 12px 16px;
font-size: 16px;
color: #c0caf5;
caret-color: #e0af68;
min-height: 24px;
color: var(--owlry-text);
caret-color: var(--owlry-accent);
}
.owlry-search:focus {
border-color: #e0af68;
border-color: var(--owlry-accent);
box-shadow: 0 0 0 2px rgba(224, 175, 104, 0.2);
outline: none;
}
.owlry-search placeholder {
color: #565f89;
color: var(--owlry-text-secondary);
}
/* Results list */
.owlry-results {
background-color: transparent;
border-radius: 8px;
}
/* Individual result row */
.owlry-result-row {
background-color: transparent;
border-radius: 8px;
margin: 2px 0;
transition: background-color 150ms ease;
}
@@ -66,7 +69,7 @@
.owlry-result-row:selected {
background-color: rgba(224, 175, 104, 0.15);
border-left: 3px solid #e0af68;
border-left: 3px solid var(--owlry-accent);
}
.owlry-result-row:selected:hover {
@@ -75,79 +78,60 @@
/* Result icon */
.owlry-result-icon {
color: #c0caf5;
opacity: 0.9;
color: var(--owlry-text);
}
.owlry-result-row:selected .owlry-result-icon {
color: #e0af68;
opacity: 1;
color: var(--owlry-accent);
}
/* Result name */
.owlry-result-name {
font-size: 14px;
font-weight: 500;
color: #c0caf5;
color: var(--owlry-text);
}
.owlry-result-row:selected .owlry-result-name {
color: #f5e0dc;
color: var(--owlry-accent-bright);
}
/* Result description */
.owlry-result-description {
font-size: 12px;
color: #565f89;
margin-top: 2px;
color: var(--owlry-text-secondary);
}
.owlry-result-row:selected .owlry-result-description {
color: #7aa2f7;
color: var(--owlry-badge-app);
}
/* Provider badges */
.owlry-result-badge {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 8px;
border-radius: 6px;
background-color: rgba(65, 72, 104, 0.4);
color: #565f89;
color: var(--owlry-text-secondary);
}
.owlry-badge-app {
background-color: rgba(122, 162, 247, 0.2);
color: #7aa2f7;
color: var(--owlry-badge-app);
}
.owlry-badge-cmd {
background-color: rgba(187, 154, 247, 0.2);
color: #bb9af7;
color: var(--owlry-badge-cmd);
}
.owlry-badge-dmenu {
background-color: rgba(158, 206, 106, 0.2);
color: #9ece6a;
color: var(--owlry-badge-dmenu);
}
.owlry-badge-uuctl {
background-color: rgba(224, 175, 104, 0.2);
color: #e0af68;
color: var(--owlry-badge-uuctl);
}
/* Scrollbar styling */
scrollbar {
background-color: transparent;
}
scrollbar slider {
background-color: rgba(65, 72, 104, 0.5);
border-radius: 4px;
min-width: 6px;
min-height: 40px;
}
scrollbar slider:hover {
@@ -155,92 +139,70 @@ scrollbar slider:hover {
}
scrollbar slider:active {
background-color: #e0af68;
background-color: var(--owlry-accent);
}
/* Selection highlighting */
selection {
background-color: rgba(224, 175, 104, 0.3);
color: #f5e0dc;
}
/* Header bar with mode indicator and filter tabs */
.owlry-header {
margin-bottom: 4px;
color: var(--owlry-accent-bright);
}
/* Mode indicator */
.owlry-mode-indicator {
font-size: 12px;
font-weight: 600;
color: #e0af68;
padding: 4px 12px;
color: var(--owlry-accent);
background-color: rgba(224, 175, 104, 0.15);
border-radius: 6px;
}
/* Filter tabs container */
.owlry-filter-tabs {
/* Container spacing handled by GtkBox */
}
/* Filter toggle buttons */
.owlry-filter-button {
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 6px;
background-color: rgba(65, 72, 104, 0.3);
color: #565f89;
color: var(--owlry-text-secondary);
border: 1px solid transparent;
min-height: 20px;
transition: all 150ms ease;
}
.owlry-filter-button:hover {
background-color: rgba(65, 72, 104, 0.5);
color: #c0caf5;
color: var(--owlry-text);
}
.owlry-filter-button:checked {
background-color: rgba(224, 175, 104, 0.2);
color: #e0af68;
color: var(--owlry-accent);
border-color: rgba(224, 175, 104, 0.4);
}
/* Provider-specific filter button colors when active */
.owlry-filter-app:checked {
background-color: rgba(122, 162, 247, 0.2);
color: #7aa2f7;
color: var(--owlry-badge-app);
border-color: rgba(122, 162, 247, 0.4);
}
.owlry-filter-cmd:checked {
background-color: rgba(187, 154, 247, 0.2);
color: #bb9af7;
color: var(--owlry-badge-cmd);
border-color: rgba(187, 154, 247, 0.4);
}
.owlry-filter-uuctl:checked {
background-color: rgba(224, 175, 104, 0.2);
color: #e0af68;
color: var(--owlry-badge-uuctl);
border-color: rgba(224, 175, 104, 0.4);
}
.owlry-filter-dmenu:checked {
background-color: rgba(158, 206, 106, 0.2);
color: #9ece6a;
color: var(--owlry-badge-dmenu);
border-color: rgba(158, 206, 106, 0.4);
}
/* Hints bar at bottom */
.owlry-hints {
padding-top: 8px;
border-top: 1px solid rgba(65, 72, 104, 0.3);
}
.owlry-hints-label {
font-size: 10px;
color: #565f89;
letter-spacing: 0.5px;
color: var(--owlry-text-secondary);
}