From b0daea2a73428977d3bc4957d4405ec0db5ad411 Mon Sep 17 00:00:00 2001 From: funman300 Date: Tue, 28 Apr 2026 11:38:48 -0700 Subject: [PATCH] waybar: fix GTK3 CSS variables, pin timezone, adjust screenshot keybind MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - theme/colors.css: replace CSS custom properties (--var) with GTK3 @define-color — GTK3 CSS parser rejects -- syntax, crashing waybar - waybar/style.css, wofi/style.css, gtklock/style.css: update var(--x) references to @x to match - waybar/config.jsonc: pin clock timezone to America/Vancouver - niri/config.kdl: change Print to Mod+Print for screenshot keybind Co-Authored-By: Claude Sonnet 4.6 --- gtklock/style.css | 26 +++++++++++++------------- niri/config.kdl | 2 +- theme/colors.css | 34 ++++++++++++++++------------------ waybar/config.jsonc | 1 + waybar/style.css | 24 ++++++++++++------------ wofi/style.css | 24 ++++++++++++------------ 6 files changed, 55 insertions(+), 56 deletions(-) diff --git a/gtklock/style.css b/gtklock/style.css index e772e9d..95526fd 100644 --- a/gtklock/style.css +++ b/gtklock/style.css @@ -3,7 +3,7 @@ /* gtklock style - Tomorrow Night theme */ window { - background-color: var(--tn-bg); + background-color: @tn-bg; } #body { @@ -11,7 +11,7 @@ window { } #clock-label { - color: var(--tn-fg); + color: @tn-fg; font-family: "JetBrainsMono Nerd Font"; font-size: 48px; font-weight: bold; @@ -19,14 +19,14 @@ window { } #date-label { - color: var(--tn-fg-dim); + color: @tn-fg-dim; font-family: "JetBrainsMono Nerd Font"; font-size: 16px; margin-bottom: 24px; } #username-label { - color: var(--tn-fg); + color: @tn-fg; font-family: "JetBrainsMono Nerd Font"; font-size: 18px; font-weight: bold; @@ -34,10 +34,10 @@ window { } #input-box { - background-color: var(--tn-bg-alt); - border: 2px solid var(--tn-bg-high); + background-color: @tn-bg-alt; + border: 2px solid @tn-bg-high; border-radius: 6px; - color: var(--tn-fg); + color: @tn-fg; font-family: "JetBrainsMono Nerd Font"; font-size: 14px; padding: 8px 12px; @@ -45,21 +45,21 @@ window { } #input-box:focus { - border-color: var(--tn-blue); + border-color: @tn-blue; } #error-label { - color: var(--tn-red); + color: @tn-red; font-family: "JetBrainsMono Nerd Font"; font-size: 13px; margin-top: 8px; } #unlock-button { - background-color: var(--tn-bg-high); + background-color: @tn-bg-high; border: none; border-radius: 6px; - color: var(--tn-fg); + color: @tn-fg; font-family: "JetBrainsMono Nerd Font"; font-size: 14px; padding: 8px 20px; @@ -67,6 +67,6 @@ window { } #unlock-button:hover { - background-color: var(--tn-blue); - color: var(--tn-bg); + background-color: @tn-blue; + color: @tn-bg; } diff --git a/niri/config.kdl b/niri/config.kdl index 4767c15..78479e7 100644 --- a/niri/config.kdl +++ b/niri/config.kdl @@ -83,7 +83,7 @@ binds { Mod+Shift+8 { move-window-to-workspace 8; } Mod+Shift+9 { move-window-to-workspace 9; } - Print { spawn "screenshot"; } + Mod+Print { spawn "screenshot"; } Mod+M { move-window-to-workspace "minimized"; } Mod+Shift+M { focus-workspace "minimized"; } diff --git a/theme/colors.css b/theme/colors.css index 56cef0c..0dc7862 100644 --- a/theme/colors.css +++ b/theme/colors.css @@ -1,22 +1,20 @@ /* Tomorrow Night - shared color palette */ /* @import this file from waybar, wofi, gtklock CSS */ -* { - --tn-bg: #1d1f21; - --tn-bg-alt: #282a2e; - --tn-bg-high: #373b41; - --tn-fg: #c5c8c6; - --tn-fg-dim: #969896; - --tn-fg-muted: #707880; - --tn-blue: #81a2be; - --tn-green: #b5bd68; - --tn-yellow: #f0c674; - --tn-red: #cc6666; - --tn-magenta: #b294bb; - --tn-cyan: #8abeb7; +@define-color tn-bg #1d1f21; +@define-color tn-bg-alt #282a2e; +@define-color tn-bg-high #373b41; +@define-color tn-fg #c5c8c6; +@define-color tn-fg-dim #969896; +@define-color tn-fg-muted #707880; +@define-color tn-blue #81a2be; +@define-color tn-green #b5bd68; +@define-color tn-yellow #f0c674; +@define-color tn-red #cc6666; +@define-color tn-magenta #b294bb; +@define-color tn-cyan #8abeb7; - /* Alpha variants */ - --tn-bg-a90: rgba(29, 31, 33, 0.90); - --tn-bg-a95: rgba(29, 31, 33, 0.95); - --tn-bg-a96: rgba(29, 31, 33, 0.96); -} +/* Alpha variants */ +@define-color tn-bg-a90 rgba(29, 31, 33, 0.90); +@define-color tn-bg-a95 rgba(29, 31, 33, 0.95); +@define-color tn-bg-a96 rgba(29, 31, 33, 0.96); diff --git a/waybar/config.jsonc b/waybar/config.jsonc index 5553056..85b36bf 100644 --- a/waybar/config.jsonc +++ b/waybar/config.jsonc @@ -52,6 +52,7 @@ }, "clock": { + "timezone": "America/Vancouver", "format": "{:%a %b %d %H:%M}" }, diff --git a/waybar/style.css b/waybar/style.css index c958b91..cabd83a 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -6,17 +6,17 @@ } window#waybar { - background: var(--tn-bg-a90); - color: var(--tn-fg); + background: @tn-bg-a90; + color: @tn-fg; } #workspaces button { padding: 0 8px; - color: var(--tn-fg-muted); + color: @tn-fg-muted; } #workspaces button.focused { - color: var(--tn-blue); + color: @tn-blue; } #clock, #battery, #network, #pulseaudio, @@ -26,33 +26,33 @@ window#waybar { } #custom-power-profile.performance { - color: var(--tn-yellow); + color: @tn-yellow; } #custom-power-profile.power-saver { - color: var(--tn-green); + color: @tn-green; } #battery.warning { - color: var(--tn-yellow); + color: @tn-yellow; } #battery.critical { - color: var(--tn-red); + color: @tn-red; } #cpu.warning { - color: var(--tn-yellow); + color: @tn-yellow; } #cpu.critical { - color: var(--tn-red); + color: @tn-red; } #temperature.warm { - color: var(--tn-yellow); + color: @tn-yellow; } #temperature.critical { - color: var(--tn-red); + color: @tn-red; } diff --git a/wofi/style.css b/wofi/style.css index 286aa9c..d56b192 100644 --- a/wofi/style.css +++ b/wofi/style.css @@ -6,26 +6,26 @@ } window { - background-color: var(--tn-bg-a96); - border: 1px solid var(--tn-bg-high); + background-color: @tn-bg-a96; + border: 1px solid @tn-bg-high; border-radius: 12px; - color: var(--tn-fg); + color: @tn-fg; } #input { - background-color: var(--tn-bg-alt); - color: var(--tn-fg); - border: 1px solid var(--tn-bg-high); + background-color: @tn-bg-alt; + color: @tn-fg; + border: 1px solid @tn-bg-high; border-radius: 8px; padding: 10px 14px; margin: 12px 12px 6px 12px; outline: none; font-size: 15px; - caret-color: var(--tn-blue); + caret-color: @tn-blue; } #input:focus { - border-color: var(--tn-blue); + border-color: @tn-blue; } #inner-box { @@ -48,17 +48,17 @@ window { } #entry:selected { - background-color: var(--tn-bg-alt); - border: 1px solid var(--tn-blue); + background-color: @tn-bg-alt; + border: 1px solid @tn-blue; outline: none; } #text { - color: var(--tn-fg); + color: @tn-fg; } #text:selected { - color: var(--tn-blue); + color: @tn-blue; font-weight: bold; }