Messages for Web Theme by aecampos

/* ==UserStyle==
@name           Messages for Web Theme
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Adrian Campos


@var color custom-rcs-outgoing-bg-color  "RCS Outgoing Background" #351562;
@var color custom-rcs-outgoing-color     "RCS Outgoing Foreground" #fff;

@var color custom-xms-outgoing-bg-color  "XMS Outgoing Background" #7cacf8;
@var color custom-xms-outgoing-color     "XMS Outgoing Foreground" #202124;

@var color custom-rcs-incoming-bg-color  "RCS Incoming Background" #31343a;
@var color custom-xms-incoming-bg-color  "XMS Incoming Background" #303030;
@var color custom-all-incoming-bg-color  "All Incoming Foreground" #e8eaed;

@var color custom-fab-icon-container-bg-color "Start Chat Button Background" #351562;
@var color custom-fab-label-color             "Start Chat Button Foreground" #fff;

@var color custom-conv-container-host-bg-color "Conversation Container Background" #202124;

==/UserStyle== */

@-moz-document domain("messages.google.com") {
  body.material-next-msg mws-message-part-content.enable-bg-color.enable-text-color,
  body.material-next-msg mws-message-part-content.enable-bg-color.enable-text-color mws-link-preview-decorator {
    --rcs-outgoing-bg-color: var(--custom-rcs-outgoing-bg-color);
    --rcs-outgoing-color: var(--custom-rcs-outgoing-color);

    --xms-outgoing-bg-color: var(--custom-xms-outgoing-bg-color);
    --xms-outgoing-color: var(--custom-xms-outgoing-color);

    --rcs-incoming-bg-color: var(--custom-rcs-incoming-bg-color);
    --incoming-bg-color: var(--custom-xms-incoming-bg-color);
    --incoming-color: var(--custom-all-incoming-bg-color);

    --link-preview-background-color: var(--custom-conv-container-host-bg-color);
    --link-preview-border-color: #3c4043;
    /* --link-preview-title-color: #e8eaed; */
    /* --link-preview-content-color: #9aa0a6; */
  }

  body.material-next-msg mw-fab-link {
    --fab-icon-container-bg-color: var(--custom-fab-icon-container-bg-color);
    --fab-label-color: var(--custom-fab-label-color);
  }

  body.material-next-msg mw-conversation-container,
  body.material-next-msg mws-message-compose {
    --conv-container-host-bg-color: var(--custom-conv-container-host-bg-color);
    --input-bg-fade-color: var(--custom-conv-container-host-bg-color);
  }

  /*
  body.material-next-msg mws-header {
    --header-bg-color: #202124f5;
    --header-color: #e8eaed;
    --icon-button-color: #dadce0;
  }

  body.material-next-msg mws-message-compose,
  body.material-next-msg mws-message-compose mws-icon {
    --input-bg-color: #3c4043;
    --input-color: #e8eaed;
    --autosize-textarea-placeholder-color: yellow;

    --picker-button-fill-color: yellow;
    --icon-button-color: blue;
    --icon-button-disabled-color: red;
  } 

  body.material-next-msg mws-message-compose textarea::placeholder {
    color: rgb(117, 117, 117);
  }
  */
}