diff --git a/README.md b/README.md index 6decf2b..32c7ee9 100644 --- a/README.md +++ b/README.md @@ -164,15 +164,37 @@ You can override this with `launch_wrapper` in config, or set to empty string `" By default, Owlry inherits colors from your system GTK4 theme (Adwaita, Breeze, etc.). -### Owl Theme +### Built-in Themes -Enable the built-in owl-inspired dark theme: +Owlry includes an owl-inspired dark theme: ```toml [appearance] theme = "owl" ``` +### Included Example Themes + +Example themes are installed to `/usr/share/owlry/themes/`: + +- `owl.css` - Owl-inspired dark theme with amber accents +- `catppuccin-mocha.css` - Soothing pastel theme +- `nord.css` - Arctic, north-bluish palette + +To use an example theme: + +```bash +mkdir -p ~/.config/owlry/themes +cp /usr/share/owlry/themes/catppuccin-mocha.css ~/.config/owlry/themes/ +``` + +Then set in config: + +```toml +[appearance] +theme = "catppuccin-mocha" +``` + ### Custom Theme Create a custom theme file at `~/.config/owlry/themes/mytheme.css`: diff --git a/themes/catppuccin-mocha.css b/themes/catppuccin-mocha.css new file mode 100644 index 0000000..4d0defd --- /dev/null +++ b/themes/catppuccin-mocha.css @@ -0,0 +1,114 @@ +/* + * Owlry - Catppuccin Mocha Theme + * A soothing pastel theme based on Catppuccin Mocha palette + * https://catppuccin.com/ + * + * Usage: Copy to ~/.config/owlry/themes/catppuccin-mocha.css + * Set theme = "catppuccin-mocha" in config.toml + */ + +:root { + --owlry-bg: #1e1e2e; + --owlry-bg-secondary: #313244; + --owlry-border: #45475a; + --owlry-text: #cdd6f4; + --owlry-text-secondary: #a6adc8; + --owlry-accent: #cba6f7; + --owlry-accent-bright: #f5c2e7; + --owlry-badge-app: #a6e3a1; + --owlry-badge-cmd: #89b4fa; + --owlry-badge-dmenu: #f9e2af; + --owlry-badge-uuctl: #fab387; +} + +.owlry-main { + background-color: rgba(30, 30, 46, 0.95); + border: 1px solid rgba(69, 71, 90, 0.6); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), + 0 0 0 1px rgba(203, 166, 247, 0.1); +} + +.owlry-search { + background-color: rgba(49, 50, 68, 0.8); + border: 2px solid rgba(69, 71, 90, 0.5); + color: var(--owlry-text); + caret-color: var(--owlry-accent); +} + +.owlry-search:focus { + border-color: var(--owlry-accent); + box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.2); +} + +.owlry-result-row:hover { + background-color: rgba(49, 50, 68, 0.6); +} + +.owlry-result-row:selected { + background-color: rgba(203, 166, 247, 0.15); + border-left: 3px solid var(--owlry-accent); +} + +.owlry-result-row:selected .owlry-result-name { + color: var(--owlry-accent-bright); +} + +.owlry-result-row:selected .owlry-result-icon { + color: var(--owlry-accent); +} + +.owlry-badge-app { + background-color: rgba(166, 227, 161, 0.2); + color: var(--owlry-badge-app); +} + +.owlry-badge-cmd { + background-color: rgba(137, 180, 250, 0.2); + color: var(--owlry-badge-cmd); +} + +.owlry-badge-dmenu { + background-color: rgba(249, 226, 175, 0.2); + color: var(--owlry-badge-dmenu); +} + +.owlry-badge-uuctl { + background-color: rgba(250, 179, 135, 0.2); + color: var(--owlry-badge-uuctl); +} + +.owlry-filter-button:checked { + background-color: rgba(203, 166, 247, 0.2); + color: var(--owlry-accent); + border-color: rgba(203, 166, 247, 0.4); +} + +.owlry-filter-app:checked { + background-color: rgba(166, 227, 161, 0.2); + color: var(--owlry-badge-app); + border-color: rgba(166, 227, 161, 0.4); +} + +.owlry-filter-cmd:checked { + background-color: rgba(137, 180, 250, 0.2); + color: var(--owlry-badge-cmd); + border-color: rgba(137, 180, 250, 0.4); +} + +.owlry-filter-uuctl:checked { + background-color: rgba(250, 179, 135, 0.2); + color: var(--owlry-badge-uuctl); + border-color: rgba(250, 179, 135, 0.4); +} + +scrollbar slider { + background-color: rgba(69, 71, 90, 0.5); +} + +scrollbar slider:hover { + background-color: rgba(88, 91, 112, 0.7); +} + +scrollbar slider:active { + background-color: var(--owlry-accent); +} diff --git a/themes/nord.css b/themes/nord.css new file mode 100644 index 0000000..602d56c --- /dev/null +++ b/themes/nord.css @@ -0,0 +1,114 @@ +/* + * Owlry - Nord Theme + * An arctic, north-bluish color palette + * https://nordtheme.com/ + * + * Usage: Copy to ~/.config/owlry/themes/nord.css + * Set theme = "nord" in config.toml + */ + +:root { + --owlry-bg: #2e3440; + --owlry-bg-secondary: #3b4252; + --owlry-border: #4c566a; + --owlry-text: #eceff4; + --owlry-text-secondary: #d8dee9; + --owlry-accent: #88c0d0; + --owlry-accent-bright: #8fbcbb; + --owlry-badge-app: #a3be8c; + --owlry-badge-cmd: #81a1c1; + --owlry-badge-dmenu: #ebcb8b; + --owlry-badge-uuctl: #bf616a; +} + +.owlry-main { + background-color: rgba(46, 52, 64, 0.95); + border: 1px solid rgba(76, 86, 106, 0.6); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), + 0 0 0 1px rgba(136, 192, 208, 0.1); +} + +.owlry-search { + background-color: rgba(59, 66, 82, 0.8); + border: 2px solid rgba(76, 86, 106, 0.5); + color: var(--owlry-text); + caret-color: var(--owlry-accent); +} + +.owlry-search:focus { + border-color: var(--owlry-accent); + box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.2); +} + +.owlry-result-row:hover { + background-color: rgba(59, 66, 82, 0.6); +} + +.owlry-result-row:selected { + background-color: rgba(136, 192, 208, 0.15); + border-left: 3px solid var(--owlry-accent); +} + +.owlry-result-row:selected .owlry-result-name { + color: var(--owlry-accent-bright); +} + +.owlry-result-row:selected .owlry-result-icon { + color: var(--owlry-accent); +} + +.owlry-badge-app { + background-color: rgba(163, 190, 140, 0.2); + color: var(--owlry-badge-app); +} + +.owlry-badge-cmd { + background-color: rgba(129, 161, 193, 0.2); + color: var(--owlry-badge-cmd); +} + +.owlry-badge-dmenu { + background-color: rgba(235, 203, 139, 0.2); + color: var(--owlry-badge-dmenu); +} + +.owlry-badge-uuctl { + background-color: rgba(191, 97, 106, 0.2); + color: var(--owlry-badge-uuctl); +} + +.owlry-filter-button:checked { + background-color: rgba(136, 192, 208, 0.2); + color: var(--owlry-accent); + border-color: rgba(136, 192, 208, 0.4); +} + +.owlry-filter-app:checked { + background-color: rgba(163, 190, 140, 0.2); + color: var(--owlry-badge-app); + border-color: rgba(163, 190, 140, 0.4); +} + +.owlry-filter-cmd:checked { + background-color: rgba(129, 161, 193, 0.2); + color: var(--owlry-badge-cmd); + border-color: rgba(129, 161, 193, 0.4); +} + +.owlry-filter-uuctl:checked { + background-color: rgba(191, 97, 106, 0.2); + color: var(--owlry-badge-uuctl); + border-color: rgba(191, 97, 106, 0.4); +} + +scrollbar slider { + background-color: rgba(76, 86, 106, 0.5); +} + +scrollbar slider:hover { + background-color: rgba(76, 86, 106, 0.7); +} + +scrollbar slider:active { + background-color: var(--owlry-accent); +} diff --git a/themes/owl.css b/themes/owl.css new file mode 100644 index 0000000..d6c962b --- /dev/null +++ b/themes/owl.css @@ -0,0 +1,123 @@ +/* + * Owlry - Owl Theme + * An owl-inspired dark theme with amber accents + * + * Color Palette: + * - Deep night sky: #1a1b26 (background) + * - Twilight: #24283b (secondary bg) + * - Owl feathers: #414868 (borders/muted) + * - Moon glow: #c0caf5 (primary text) + * - Owl eyes (amber): #e0af68 (accent/highlight) + * - Forest shadows: #565f89 (secondary text) + * - Barn owl cream: #f5e0dc (bright accent) + * + * Usage: Copy to ~/.config/owlry/themes/owl.css + * Set theme = "owl" in config.toml + * (Note: "owl" is also built-in, so this file is optional) + */ + +: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; +} + +.owlry-main { + background-color: rgba(26, 27, 38, 0.95); + 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); +} + +.owlry-search { + background-color: rgba(36, 40, 59, 0.8); + border: 2px solid rgba(65, 72, 104, 0.5); + color: var(--owlry-text); + caret-color: var(--owlry-accent); +} + +.owlry-search:focus { + border-color: var(--owlry-accent); + box-shadow: 0 0 0 2px rgba(224, 175, 104, 0.2); +} + +.owlry-result-row:hover { + background-color: rgba(36, 40, 59, 0.6); +} + +.owlry-result-row:selected { + background-color: rgba(224, 175, 104, 0.15); + border-left: 3px solid var(--owlry-accent); +} + +.owlry-result-row:selected .owlry-result-name { + color: var(--owlry-accent-bright); +} + +.owlry-result-row:selected .owlry-result-icon { + color: var(--owlry-accent); +} + +.owlry-badge-app { + background-color: rgba(122, 162, 247, 0.2); + color: var(--owlry-badge-app); +} + +.owlry-badge-cmd { + background-color: rgba(187, 154, 247, 0.2); + color: var(--owlry-badge-cmd); +} + +.owlry-badge-dmenu { + background-color: rgba(158, 206, 106, 0.2); + color: var(--owlry-badge-dmenu); +} + +.owlry-badge-uuctl { + background-color: rgba(224, 175, 104, 0.2); + color: var(--owlry-badge-uuctl); +} + +.owlry-filter-button:checked { + background-color: rgba(224, 175, 104, 0.2); + color: var(--owlry-accent); + border-color: rgba(224, 175, 104, 0.4); +} + +.owlry-filter-app:checked { + background-color: rgba(122, 162, 247, 0.2); + 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: 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: var(--owlry-badge-uuctl); + border-color: rgba(224, 175, 104, 0.4); +} + +scrollbar slider { + background-color: rgba(65, 72, 104, 0.5); +} + +scrollbar slider:hover { + background-color: rgba(86, 95, 137, 0.7); +} + +scrollbar slider:active { + background-color: var(--owlry-accent); +}