nix-config/home-manager/system/waybar.nix

{pkgs, ...}: {
  programs.waybar = {
    enable = true;
    package = pkgs.waybar.overrideAttrs (oa: {mesonFlags = (oa.mesonFlags or []) ++ ["-Dexperimental=true"];});

    settings.mainBar = {
      layer = "top"; # Waybar at top layer
      height = 32; # Waybar height (to be removed for auto height)
      spacing = 0; # Gaps between modules (4px)
      position = "top";
      margin = "10 20 0";
      # Choose the order of the modules
      modules-left = [
        "hyprland/workspaces"
        "custom/media"
      ];
      modules-center = ["hyprland/window"];
      modules-right = [
        "mpris"
        # "idle_inhibitor",
        "pulseaudio"
        # "network",
        "cpu"
        "memory"
        # "temperature",
        "backlight"
        # "keyboard-state",
        "battery"
        "clock"
        "tray"
      ];
      # Modules configuration
      # sway/workspaces = {
      #     "disable-scroll = true,
      #     "all-outputs = true,
      #     "warp-on-scroll = false,
      #     "format = "{name}: {icon}",
      #     "format-icons = {
      #         "1 = "",
      #         "2 = "",
      #         "3 = "",
      #         "4 = "",
      #         "5 = "",
      #         "urgent = "",
      #         "focused = "",
      #         "default = ""
      #     }
      # },
      "hyprland/workspaces" = {
        active-only = false;
        format = "{icon}";
        format-icons = {
          "1" = "一";
          "2" = "二";
          "3" = "三";
          "4" = "四";
          "5" = "五";
          "6" = "六";
          "7" = "七";
          "8" = "八";
          "9" = "九";
          "10" = "十";
          "11" = "一";
          "12" = "二";
          "13" = "三";
          "14" = "四";
          "15" = "五";
          "16" = "六";
          "17" = "七";
          "18" = "八";
          "19" = "九";
          "20" = "十";
          "21" = "一";
          "22" = "二";
          "23" = "三";
          "24" = "四";
          "25" = "五";
          "26" = "六";
          "27" = "七";
          "28" = "八";
          "29" = "九";
          "30" = "十";
        };
        on-scroll-up = "hyprctl dispatch workspace e+1";
        on-scroll-down = "hyprctl dispatch workspace e-1";
        persistent-workspaces = {
          HDMI-A-1 = [1 2 3 4 5 6 7 8 9 10];
          DP-1 = [11 12 13 14 15 16 17 18 19 20];
          DP-2 = [21 22 23 24 25 26 27 28 29 30];
        };
      };
      keyboard-state = {
        numlock = false;
        capslock = true;
        format = "{name} {icon}";
        format-icons = {
          locked = "";
          unlocked = "";
        };
      };
      "sway/mode" = {
        format = "<span style=\"italic\">{}</span>";
      };
      "sway/scratchpad" = {
        format = "{icon} {count}";
        show-empty = false;
        format-icons = ["" ""];
        tooltip = true;
        tooltip-format = "{app}: {title}";
      };
      mpris = {
        interval = 1;
        format = "{player_icon} {status_icon}";
        format-paused = "{player_icon} {status_icon}";
        tooltip-format = "{player_icon} {dynamic}";
        tooltip-format-paused = "{player_icon} {dynamic}";
        player-icons = {
          default = "󰎄";
          mpv = "󰝚";
          vlc = "󰕼";
          spotify = "";
        };
        status-icons = {
          playing = "";
          paused = "";
          stopped = "";
        };
        # "ignored-players = ["firefox"]
      };
      mpd = {
        format = "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ⸨{songPosition}|{queueLength}⸩ {volume}% ";
        format-disconnected = "Disconnected ";
        format-stopped = "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ";
        unknown-tag = "N/A";
        interval = 2;
        consume-icons = {
          on = " ";
        };
        random-icons = {
          off = "<span color=\"#f53c3c\"></span> ";
          on = " ";
        };
        repeat-icons = {
          on = " ";
        };
        single-icons = {
          on = "1 ";
        };
        state-icons = {
          paused = "";
          playing = "";
        };
        tooltip-format = "MPD (connected)";
        tooltip-format-disconnected = "MPD (disconnected)";
      };
      idle_inhibitor = {
        format = "{icon}";
        format-icons = {
          activated = "󰅶";
          deactivated = "󰾪";
        };
      };
      tray = {
        # "icon-size = 21,
        spacing = 10;
        show-passive-items = true;
      };
      clock = {
        format = "{:%b %d %I:%M %p}";
        tooltip-format = "<big>{:%d %B %Y}</big>\n<tt><small>{calendar}</small></tt>";
        format-alt = "{:%Y-%m-%d %I:%M %p}";
      };
      cpu = {
        format = "{usage}% ";
        tooltip = false;
      };
      memory = {
        format = "{}% ";
      };
      temperature = {
        # "thermal-zone = 2,
        # "hwmon-path = "/sys/class/hwmon/hwmon2/temp1_input",
        critical-threshold = 80;
        # "format-critical = "{temperatureC}°C {icon}",
        format = "{temperatureC}°C {icon}";
        format-icons = ["" "" " "];
      };
      backlight = {
        # "device = "acpi_video1",
        format = "{percent}% {icon}";
        format-icons = ["" "" "" "" "" "" "" "" ""];
      };
      battery = {
        # bat = "BAT0";
        states = {
          good = 95;
          warning = 30;
          critical = 15;
        };
        format = "{capacity}% {icon}";
        format-charging = "{capacity}% ";
        format-plugged = "{capacity}% ";
        format-alt = "{time} {icon}";
        # "format-good = "", # An empty format will hide the module
        # "format-full = "",
        format-icons = ["" "" "" "" ""];
        interval = 10;
        weighted-average = true;
      };
      network = {
        # "interface = "wlp2*", # (Optional) To force the use of this interface
        format-wifi = "{essid} ({signalStrength}%) ";
        format-ethernet = "{ipaddr}/{cidr} 󰈀";
        tooltip-format = "{ifname} via {gwaddr} ";
        format-linked = "{ifname} (No IP) ";
        format-disconnected = "Disconnected ⚠";
        format-alt = "{ifname}: {ipaddr}/{cidr}";
        on-click-right = "kitty nmtui";
      };
      pulseaudio = {
        # "scroll-step = 1, # %, can be a float
        format = "{volume}% {icon} {format_source}";
        format-bluetooth = "{volume}% {icon} {format_source}";
        format-bluetooth-muted = "󰝟 {icon} {format_source}";
        format-muted = "󰝟 {format_source}";
        format-source = " {volume}% ";
        format-source-muted = " ";
        format-icons = {
          headphone = "󰋋";
          hands-free = "󰟅";
          headset = "󰋎";
          phone = "";
          portable = "";
          car = "";
          default = ["" "" ""];
        };
        on-click = "pavucontrol";
      };
      "custom/media" = {
        format = "{icon} {}";
        return-type = "json";
        max-length = 40;
        format-icons = {
          spotify = "";
          default = "🎜";
        };
        escape = true;
        exec = "$HOME/.config/waybar/mediaplayer.py 2> /dev/null"; # Script in resources folder
        # exec = "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" # Filter player based on name
      };
      "custom/archicon" = {
        format = "󰣇";
        # "on-click":"nwg-menu -d -fm nemo -cmd-lock gtklock -va top",
        on-click = "jgmenu_run";
        tooltip = false;
      };
    };

    # ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    # CSS Styling
    # ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    style = ''
      /*
      * Variant: Rosé Pine
      * Maintainer: DankChoir
      */

      @define-color base            #191724;
      @define-color surface         #1f1d2e;
      @define-color overlay         #26233a;

      @define-color muted           #6e6a86;
      @define-color subtle          #908caa;
      @define-color text            #e0def4;

      @define-color love            #eb6f92;
      @define-color gold            #f6c177;
      @define-color rose            #ebbcba;
      @define-color pine            #31748f;
      @define-color foam            #9ccfd8;
      @define-color iris            #c4a7e7;

      @define-color highlightLow    #21202e;
      @define-color highlightMed    #403d52;
      @define-color highlightHigh   #524f67;

      * {
          font-family: "JetBrainsMono Nerd Font", FontAwesome, Roboto, Helvetica,
          Arial, sans-serif;
          font-size: 16px;
      }

      window#waybar {
          background-color: @surface;
          color: @text;
          transition-property: background-color;
          transition-duration: 0.5s;
          border-radius: 10px;
      }

      window#waybar.hidden {
          opacity: 0.2;
      }

      /*
      window#waybar.empty {
          background-color: transparent;
      }
      window#waybar.solo {
          background-color: #FFFFFF;
      }
      */

      /*window#waybar.termite {
          background-color: #3F3F3F;
      }
      window#waybar.chromium {
          background-color: #000000;
          border: none;
      }*/

      #workspaces button {
          box-shadow: inset 0 -3px transparent;
          padding: 0 8px;
          background-color: @base;
          color: @text;
          border: none;
          border-radius: 0;
          font-weight: 800;
      }

      #workspaces button:first-child {
          border-radius: 10px 0 0 10px;
      }

      #workspaces button:last-child {
          border-radius: 0 10px 10px 0;
      }

      /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
      #workspaces button:hover {
          background: rgba(0, 0, 0, 0.2);
          background-color: @overlay;
          /* box-shadow: inset 0 -100px 0 -97px @bright-yellow; */
      }

      #workspaces button.empty {
          color: @muted;
          box-shadow: inherit;
          text-shadow: inherit;
      }

      #workspaces button.active {
          color: @gold;
          box-shadow: inset 0 -100px 0 -97px @bright-yellow;
          text-shadow: inherit;
      }

      #workspaces button.focused {
          background-color: @overlay;
          color: @text;
          /* box-shadow: inset 0 -100px 0 -97px @bright-yellow; */
      }

      #workspaces button.urgent {
          background-color: @love;
          color: @base;
      }

      #mode {
          background-color: @overlay;
          border-bottom: 3px solid @gold;
      }

      #cava,
      #clock,
      #battery,
      #cpu,
      #memory,
      #disk,
      #temperature,
      #backlight,
      #network,
      #pulseaudio,
      #pulseaudio.muted,
      #pulseaudio.bluetooth,
      #wireplumber,
      #custom-media,
      #tray,
      #mpris,
      #keyboard-state,
      #mode,
      #battery,
      #idle_inhibitor,
      #scratchpad,
      #mpd {
          padding: 0 10px;
          color: @text;
      }

      #window,
      #workspaces {
          margin: 0 4px;
          padding-top: 0px;
      }

      .modules-right {
          background-color: @overlay;
          border-radius: 10px;
      }

      /* If workspaces is the leftmost module, omit left margin */
      .modules-left > widget:first-child > #workspaces {
          margin-left: 0;
      }

      /* If workspaces is the rightmost module, omit right margin */
      .modules-right > widget:last-child > #workspaces {
          margin-right: 0;
      }

      #mpris {
          color: @gold;
      }

      #clock {
          color: @gold;
      }

      #battery {
          color: @foam;
      }

      #battery.charging,
      #battery.plugged {
          color: #d3869b;
      }

      @keyframes blink {
          to {
              background-color: #fbf1c7;
              color: #df3f71;
          }
      }

      #battery.critical:not(.charging) {
          background-color: #282828;
          color: #d3869b;
          animation-name: blink;
          animation-duration: 0.5s;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          animation-direction: alternate;
      }

      label:focus {
          background-color: #000000;
      }

      #backlight {
          color: #458588;
      }

      #temperature {
          color: #fabd2f;
      }

      #temperature.critical {
          background-color: #fbf1c7;
          color: #b57614;
      }

      #cpu {
          color: @foam;
      }

      #memory {
          color: @iris;
      }

      #network {
          color: @foam;
      }

      #network.disconnected {
          background-color: @love;
          color: @base;
      }

      /*#disk {
          background-color: #964B00;
      }*/

      #pulseaudio,
      #pulseaudio.muted,
      #pulseaudio.bluetooth {
          color: @pine;
      }

      #tray {
      }

      #tray > .needs-attention {
          background-color: @love;
          color: @base;
      }

      #idle_inhibitor {
          background-color: #282828;
          color: #ebdbb2;
      }

      #idle_inhibitor.activated {
          background-color: #fbf1c7;
          color: #3c3836;
      }

      #custom-media {
          background-color: #66cc99;
          color: #2a5c45;
          min-width: 100px;
      }

      #custom-media.custom-spotify {
          background-color: #66cc99;
      }

      #custom-media.custom-vlc {
          background-color: #ffa000;
      }

      #mpd {
          background-color: #66cc99;
          color: #2a5c45;
      }

      #mpd.disconnected {
          background-color: #f53c3c;
      }

      #mpd.stopped {
          background-color: #90b1b1;
      }

      #mpd.paused {
          background-color: #51a37a;
      }

      #language {
          background: #00b093;
          color: #740864;
          padding: 0 5px;
          margin: 0 5px;
          min-width: 16px;
      }

      #keyboard-state {
          background: #97e1ad;
          color: #000000;
          padding: 0 0px;
          margin: 0 5px;
          min-width: 16px;
      }

      #keyboard-state > label {
          padding: 0 5px;
      }

      #keyboard-state > label.locked {
          background: rgba(0, 0, 0, 0.2);
      }

    '';
  };
}