WhatsApp Web Nord Theme by gonlad-x

/* ==UserStyle==
@name WhatsApp Web Nord Theme
@namespace https://github.com/nordtheme/nord
@homepageURL https://github.com/nordtheme/nord
@version 1.1.9
@supportURL https://github.com/nordtheme/nord
@description Soothing pastel theme for Last.fm
@author Mth
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]

@var checkbox lighterMessages "Lighter incoming messages" 0
==/UserStyle== */

@-moz-document domain("web.whatsapp.com") {
  body {
    #catppuccin(@lightFlavor, @accentColor);
  }

  body.dark {
    #catppuccin(@darkFlavor, @accentColor);
  }

  #catppuccin(@lookup, @accent) {
    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-color: @catppuccin[@@lookup][@@accent];

    color-scheme: if(@lookup = latte, light, dark);

    ::selection {
      background-color: fade(@accent-color, 30%);
    }

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    .landing-wrapper-before {
      background-color: @accent-color !important;
    }

    /* STATUS PAGE */
    --status-background: @base !important;
    .bfsx6evv {
      background-color: @mantle !important;
    }

    --modal-backdrop-solid: @base !important;

    /* join group pop up */
    --modal-background: @base !important;

    /* startup progress */
    --progress-primary: @accent-color !important;
    --progress-background: @surface1 !important;
    --startup-background: @base !important;
    --startup-background-rgb: #rgbify(@base) [];
    /* home page, no chat selected */
    --intro-background: @base !important;
    --intro-border: @accent-color !important;
    /* general background */
    --app-background: @base !important;

    /* CHAT LIST */
    /* nav bar background */
    --navbar-background: @mantle !important;
    /* filters container background */
    --filters-container-background: @base !important;
    /* filters item background */
    --filters-item-background: @surface0 !important;
    /* filters item color */
    --filters-item-color: @subtext0 !important;
    /* filters item background hover */
    --filters-item-background-hover: @surface1 !important;
    /* filters item active background */
    --filters-item-active-background: fadeout(@accent-color, 70%) !important;
    /* filters item active color */
    --filters-item-active-color: @accent-color !important;
    /* chat list background */
    --background-default: @base !important;
    /* chat list header */
    --panel-header-background: @mantle !important;
    /* icons */
    --panel-header-icon: @text !important;
    /* other warnings (notifications) */
    --butterbar-default-background: @mantle !important;
    --butterbar-notification-icon: @sky !important;
    /* loading messages warning */
    --butterbar-green-nux-background: @mantle !important;
    /* update available warning */
    --butterbar-update-background: @mantle !important;
    --butterbar-update-icon: @accent-color !important;
    /* chat list search bar */
    --search-container-background: @base !important;
    --search-input-container-background: @base !important;
    --search-input-background: @surface0 !important;
    --search-input-container-background-active: @mantle !important;
    --icon-search-back: @accent-color !important;
    /* archive icon */
    --icon-bright-highlight: @accent-color !important;
    /* archived unread marker */
    --unread-marker-background: @accent-color !important;
    --unread-timestamp: @accent-color !important;
    /* archived chats header */
    --archived-chat-persistent-header-background: @crust !important;
    /* unread voice message */
    --ptt-green: @green !important;
    /* read voice message */
    --ptt-blue: @blue !important;
    /* pinned chat icon */
    --icon-pinned: @accent-color !important;
    /* last message in selected chat */
    --secondary-stronger: @subtext1 !important;
    /* background for active and hover chats in chat list */
    --background-default-active: @surface1 !important;
    --background-default-hover: @surface0 !important;
    /* unread chats filter */
    --icon-high-emphasis: @green !important;
    .p7idzaix {
      color: @crust !important;
    }
    /* voice message playing */
    --ptt-ooc-background: @mantle !important;

    /* CONVERSATION */
    /* chat background */
    --conversation-panel-background: @mantle !important;
    /* MESSAGES */
    /* background for incoming and outgoing messages */
    & when (@lighterMessages=1) {
      --incoming-background: @surface1 !important;
      --incoming-background-deeper: @surface2 !important;
      /* arrow icon in messages */
      --incoming-background-rgb: #rgbify(@surface1) [];
    }
    & when (@lighterMessages=0) {
      --incoming-background: @base !important;
      --incoming-background-deeper: @surface0 !important;
      /* arrow icon in messages */
      --incoming-background-rgb: #rgbify(@base) [];
    }
    --outgoing-background: @surface0 !important;
    /* read double tick */
    --icon-ack: @blue !important;
    /* received double tick */
    --bubble-meta-icon: @subtext0 !important;
    /* message timestamp */
    --bubble-meta: @text !important;
    --message-primary: @text !important;
    /* POLL */
    /* creation */
    --poll-modal-background-color: @base !important;
    --poll-modal-footer-background-color: @surface0 !important;
    /* votes */
    --poll-bar-fill-receiver: @green !important;
    --poll-bar-fill-sender: @green !important;
    --checkbox-mark: @crust !important;

    /* audio duration */
    --audio-progress-metadata: @subtext0 !important;
    /* system messages (unread or day messages in chats) */
    --system-message-text: @text !important;
    --system-message-background: @crust !important;
    /* unread system message background */
    --unread-background: @crust !important;
    --unread-bar-background: @surface1 !important;
    /* meta data for documents */
    --document-meta: @subtext1 !important;
    /* mentions, links and link previews */
    --mention-at-symbol: @sapphire !important;
    --link: @sapphire !important;
    --link-preview: @text !important;
    --link-preview-lighter: @subtext1 !important;
    --link-preview-light: @subtext0 !important;
    --outgoing-background-rgb: #rgbify(@surface0) [];
    /* QUOTED MESSAGES */
    /* quoted messages */
    --quoted-message-text: @text !important;
    /* background for quoted incoming and outgoing messages */
    --outgoing-background-deeper: @surface1 !important;

    /* SEARCH IN CHAT HIGHLIGHT */
    --highlight: @teal !important;

    /* quote colors */
    .bg-color-1 {
      background-color: @green !important;
    }
    .color-1 {
      color: @green !important;
    }
    .bg-color-2 {
      background-color: @blue !important;
    }
    .color-2 {
      color: @blue !important;
    }
    .bg-color-3 {
      background-color: @pink !important;
    }
    .color-3 {
      color: @pink !important;
    }
    .bg-color-4 {
      background-color: @sapphire !important;
    }
    .color-4 {
      color: @sapphire !important;
    }
    .bg-color-5 {
      background-color: @peach !important;
    }
    .color-5 {
      color: @peach !important;
    }
    .bg-color-6 {
      background-color: @sky !important;
    }
    .color-6 {
      color: @sky !important;
    }
    .bg-color-7 {
      background-color: @yellow !important;
    }
    .color-7 {
      color: @yellow !important;
    }
    .bg-color-8 {
      background-color: @teal !important;
    }
    .color-8 {
      color: @teal !important;
    }
    .bg-color-9 {
      background-color: @lavender !important;
    }
    .color-9 {
      color: @lavender !important;
    }
    .bg-color-10 {
      background-color: @red!important;
    }
    .color-10 {
      color: @red!important;
    }
    .bg-color-11 {
      background-color: @mauve !important;
    }
    .color-11 {
      color: @mauve !important;
    }
    .bg-color-12 {
      background-color: @flamingo !important;
    }
    .color-12 {
      color: @flamingo !important;
    }
    .bg-color-13 {
      background-color: @rosewater !important;
    }
    .color-13 {
      color: @rosewater !important;
    }
    .bg-color-14 {
      background-color: @pink !important;
    }
    .color-14 {
      color: @pink !important;
    }
    .bg-color-15 {
      background-color: @maroon !important;
    }
    .color-15 {
      color: @maroon !important;
    }
 ...