waybar: Improve style Dark/Light mode switch and more legible texts.

Changes

1 changed files (+61/-44)

• themes/catppuccin/default.nix
  • @@ -57,6 +57,15 @@
    flavor = json."${cfg.flavor}"; stripSharp = hex: lib.strings.removePrefix "#" hex; + + darkFlavor = + if cfg.flavor == "latte" then + "mocha" + else + cfg.flavor; + + dark = json."${darkFlavor}"; + light = json.latte; in { features.wayland-de = lib.mkIf config.features.wayland-de.enable {
  • @@ -176,62 +185,70 @@ main = {
    position = "bottom"; }; }; + }; - style = '' - * { - font-family: "FontAwesome", Roboto, Helvetica, Arial, sans-serif; - font-size: 16px; - } + xdg.configFile = + let + baseStyle = '' + * { + font-family: Roboto, Helvetica, Arial, sans-serif; + font-size: 16px; + } - window#waybar { - padding: ${builtins.toString gap}px; + window#waybar { + font-weight: bold; + } - background-color: transparent; - color: ${flavor.text.hex}; - } + .module { + padding: 2px 4px; + margin: 4px; - .modules-left, - .modules-right { - margin: 4px; - } + border-radius: 3px; + } - #workspaces button { - font-size: 12px; - padding: 0px 2px; + #clock, + #network, + #pulseaudio, + #tray { + color: inherit; + } + ''; + in + { + "waybar/style-light.css".text = '' + ${baseStyle} - background-color: transparent; - border-radius: 2px;; - color: ${flavor.overlay1.hex}; - } + window#waybar { + background-color: ${light.base.hex}; + color: ${light.text.hex}; + } - #workspaces button:hover { - text-decoration: underline; - } + #tray { + background-color: ${light.sapphire.hex}; + } - #workspaces button.focused { - font-weight: bold; - background-color: rgba(${flavor.surface2.raw}, 0.4); - color: ${flavor.text.hex}; - } + #pulseaudio:hover { + background-color: ${light.surface0.hex}; + } + ''; - #workspaces button.urgent { - color: ${flavor.yellow.hex}; - } + "waybar/style-dark.css".text = '' + ${baseStyle} - #clock, - #network, - #pulseaudio, - #tray { - padding: 0px 6px; + window#waybar { + background-color: ${dark.base.hex}; + color: ${dark.text.hex}; + } - color: inherit; - } + #tray { + background-color: transparent; + } - #pulseaudio:hover { - background-color: rgba(${flavor.surface2.raw}, 0.4); - } - ''; - }; + #pulseaudio:hover { + background-color: ${dark.surface0.hex}; + } + ''; + }; programs.ghostty = let