waybar: fix GTK3 CSS variables, pin timezone, adjust screenshot keybind

- 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 <noreply@anthropic.com>
This commit is contained in:
funman300
2026-04-28 11:38:48 -07:00
parent d923cfb5cf
commit b0daea2a73
6 changed files with 55 additions and 56 deletions
+13 -13
View File
@@ -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;
}
+1 -1
View File
@@ -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"; }
+15 -17
View File
@@ -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);
}
@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);
+1
View File
@@ -52,6 +52,7 @@
},
"clock": {
"timezone": "America/Vancouver",
"format": "{:%a %b %d %H:%M}"
},
+12 -12
View File
@@ -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;
}
+12 -12
View File
@@ -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;
}