/* * Waybar theme — unified with sway color palette. * * ╔══════════════════════════════════════════════════════════════════╗ * ║ COLOR PALETTE ║ * ║ To change colors: ║ * ║ 1. Edit the $base00–$base0F values in ║ * ║ ~/.config/sway/config.d/swayfx ║ * ║ 2. Mirror those hex values in the @define-color block below ║ * ║ 3. Run: swaymsg reload ║ * ╚══════════════════════════════════════════════════════════════════╝ */ /* ── Palette (your 5 colors + black) ── */ @define-color bg #000000; @define-color bg-dark #000000; @define-color bg-mid #000000; @define-color bg-light #333333; @define-color fg-dim #666666; @define-color fg #999999; @define-color fg-bright #CCCCCC; @define-color fg-max #FFFFFF; @define-color teal #999999; @define-color blue #999999; @define-color indigo #CCCCCC; @define-color magenta #999999; @define-color red #CCCCCC; @define-color yellow #999999; @define-color orange #999999; @define-color green #CCCCCC; @define-color cyan #666666; /* ── Semantic aliases ── */ @define-color highlight @blue; @define-color accent @teal; @define-color urgent @red; @define-color warning @yellow; @define-color success @green; * { font-family: "JetBrainsMonoNFM-Regular"; font-size: 14px; font-weight: bold; } window#waybar { background-color: @bg; color: @fg; transition-property: background-color; transition-duration: .5s; } window#waybar.hidden { opacity: 0.2; } /* ── Buttons ── */ button { box-shadow: inset 0 -3px transparent; border: none; border-radius: 0; } button:hover { background: inherit; box-shadow: inset 0 -3px @fg-bright; } /* ── Workspaces ── */ #workspaces button { padding: 0 4px; color: @fg-dim; } #workspaces button:hover { background: @bg-mid; } #workspaces button.focused { background-color: @highlight; color: @bg; } #workspaces button.urgent { background-color: @urgent; } /* ── Mode indicator ── */ #mode { background-color: @blue; box-shadow: inset 0 -3px @fg-bright; } /* ── Common module spacing ── */ #clock, #battery, #cpu, #memory, #disk, #temperature, #backlight, #network, #pulseaudio, #wireplumber, #custom-media, #tray, #mode, #idle_inhibitor, #scratchpad, #power-profiles-daemon, #mpd { padding: 0 10px; color: @fg; } /* ── Window & workspace margins ── */ #window, #workspaces { margin: 0 4px; } .modules-left > widget:first-child > #workspaces { margin-left: 0; } .modules-right > widget:last-child > #workspaces { margin-right: 0; } /* ── Battery ── */ #battery.charging, #battery.plugged { color: @teal; } @keyframes blink { to { background-color: @fg-bright; color: @bg; } } #battery.critical:not(.charging) { background-color: @urgent; color: @fg-max; animation-name: blink; animation-duration: 0.5s; animation-timing-function: steps(12); animation-iteration-count: infinite; animation-direction: alternate; } /* ── Power profiles ── */ #power-profiles-daemon { padding-right: 15px; } #power-profiles-daemon.performance { background-color: @urgent; color: @fg-max; } #power-profiles-daemon.balanced { background-color: @blue; color: @fg-max; } #power-profiles-daemon.power-saver { background-color: @success; color: @bg; } /* ── Scratchpad ── */ #scratchpad { background-color: transparent; color: @fg-dim; opacity: 0.5; padding: 0 6px; } #scratchpad:hover { opacity: 0.8; } #scratchpad.empty { background-color: transparent; } /* ── Clock ── */ #clock { /* background-color: @highlight; */ } /* ── Battery ── */ #battery { /* background-color: @fg-max; color: @bg; */ } /* ── Tray ── */ #tray > .passive { -gtk-icon-effect: dim; } #tray > .needs-attention { -gtk-icon-effect: highlight; background-color: @urgent; } /* ── Pulseaudio ── */ #pulseaudio:hover { /* hover style optional */ } #pulseaudio.muted { color: @fg-dim; } /* ── Idle inhibitor ── */ #idle_inhibitor { background-color: @bg-dark; } #idle_inhibitor.activated { background-color: @fg-bright; color: @bg-dark; } label:focus { background-color: @bg; } /* ── Legacy module styles (if ever enabled) ── */ #cpu { background-color: @success; color: @bg; } #memory { background-color: @magenta; } #disk { background-color: @warning; } #backlight { background-color: @bg-light; } #network.disconnected { background-color: @urgent; } #wireplumber { background-color: @fg-max; color: @bg; } #wireplumber.muted { background-color: @urgent; } #custom-media { background-color: @cyan; color: @bg-dark; min-width: 100px; } #custom-media.custom-spotify { background-color: @cyan; } #custom-media.custom-vlc { background-color: @warning; } #temperature { background-color: @warning; } #temperature.critical { background-color: @urgent; } #mpd { background-color: @cyan; color: @bg-dark; } #mpd.disconnected { background-color: @urgent; } #mpd.stopped { background-color: @bg-light; } #mpd.paused { background-color: @accent; } /* ── Privacy items ── */ #privacy { padding: 0; } #privacy-item { padding: 0 5px; color: @fg-max; } #privacy-item.screenshare { background-color: @orange; } #privacy-item.audio-in { background-color: @success; } #privacy-item.audio-out { background-color: @blue; } /* ── Language & keyboard ── */ #language { background: @teal; color: @bg; padding: 0 5px; margin: 0 5px; min-width: 16px; } #keyboard-state { background: @teal; color: @bg; padding: 0; margin: 0 5px; min-width: 16px; } #keyboard-state > label { padding: 0 5px; } #keyboard-state > label.locked { background: @bg-dark; }