example.yaml

# mocha.yaml
rosewater: &rosewater "#f5e0dc"
flamingo: &flamingo "#f2cdcd"
pink: &pink "#f5c2e7"
mauve: &mauve "#cba6f7"
red: &red "#f38ba8"
maroon: &maroon "#eba0ac"
peach: &peach "#fab387"
yellow: &yellow "#f9e2af"
green: &green "#a6e3a1"
teal: &teal "#94e2d5"
sky: &sky "#89dceb"
sapphire: &sapphire "#74c7ec"
blue: &blue "#89b4fa"
lavender: &lavender "#b4befe"
text: &text "#cdd6f4"
subtext1: &subtext1 "#bac2de"
subtext0: &subtext0 "#a6adc8"
overlay2: &overlay2 "#9399b2"
overlay1: &overlay1 "#7f849c"
overlay0: &overlay0 "#6c7086"
surface2: &surface2 "#585b70"
surface1: &surface1 "#45475a"
surface0: &surface0 "#313244"
base: &base "#1e1e2e"
mantle: &mantle "#181825"
crust: &crust "#11111b"

bar:
  height: "30px"
  position: "top"
  opacity: 1.0
  background: *crust
  foreground: *mauve
  font_family: "Segoe UI"
  font_size: "13px"
  padding: "4px 6px"
  offset_x: "0"
  offset_y: "0"
  border_radius: "0"

  components_left:
    - type: "workspaces"
      # current active workspace
      focused_workspace_background: *mauve
      focused_workspace_foreground: *crust
      # inactive, but displayed on other monitor workspace
      displayed_workspace_background: *surface0
      # inactive workspace
      default_workspace_background: "transparent"

  components_center:
    # - type: "window title" # default component

    - type: "clock"
      # background: *surface0
      foreground: *green
      padding: "0 8px"
      # https://learn.microsoft.com/en-us/dotnet/standard/auvebase-types/custom-date-and-time-format-strings
      time_formatting: "ddd, MMM d"

    - type: "clock"
      # background: *surface0
      foreground: *green
      padding: "0 8px"
      # https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings
      time_formatting: "HH:mm tt"

  components_right:
    - type: "binding mode"
      background: *red
      foreground: *crust
      padding: "0 8px"
      margin: "0 4 0 0px"

    - type: "tiling direction"
      background: *surface0
      foreground: *blue
      padding: "0 8px"
      label_horizontal: "⮂"
      label_vertical: "⮁"

    - type: "battery"
      # background: *surface0
      foreground: *yellow
      padding: "0 10px"
      label_draining: "{battery_level}% remaining"
      label_power_saver: "{battery_level}% (power saver)"
      label_charging: "{battery_level}% (charging)"