Giter VIP home page Giter VIP logo

Comments (4)

vednoc avatar vednoc commented on May 27, 2024 1

@SoyDiego You should install the UserCSS version instead of the USo one. I'll add more info to readme about using this theme outside of Stylus soon.

from dark-whatsapp.

vednoc avatar vednoc commented on May 27, 2024

Probably because I added a few more custom options. Following steps in #26 is probably helpful. Other way is to:

  • Install this theme in your browser
  • Customize all the things you want
  • Open DevTools by pressing Ctrl + Shift + I or by right-clicking outside of chat area and selecting 'inspect element'
  • Look for a style tag at the very bottom of DevTools
  • Right-click on it and find 'copy inner HTML' option or expand the style tag, double-click on the code to select all and copy it.

Doing so will give you a valid code that you can paste in a file so you can use it in Franz.

QR code issue should be resolved. I noticed it didn't work on Chromium and fixed in the later patches.

from dark-whatsapp.

SoyDiego avatar SoyDiego commented on May 27, 2024

Probably because I added a few more custom options. Following steps in #26 is probably helpful. Other way is to:

* Install this theme in your browser

* Customize all the things you want

* Open DevTools by pressing `Ctrl + Shift + I` or by right-clicking outside of chat area and selecting 'inspect element'

* Look for a `style` tag at the very bottom of DevTools

* Right-click on it and find 'copy inner HTML' option or expand the `style` tag, double-click on the code to select all and copy it.

Doing so will give you a valid code that you can paste in a file so you can use it in Franz.

QR code issue should be resolved. I noticed it didn't work on Chromium and fixed in the later patches.

Thanks for your fast reply. I could solved. Here I leave the code if someone have the same problem. You might put this info because a lot of people use Franz.
Again, thanks for your help and congratulations for theme, I love it!

Toggle to show the code! 
   * name    : Dark WhatsApp Theme by Mew
   * desc    : A customizable theme for WhatsApp.
   * github  : https://github.com/vednoc/onyx
   * discord : https://discord.gg/NpT8PzA
   * version : 1.4.6
   * author  : vednoc
   * license : MIT
   */
  :root
  {
    --dark: #272c35;
    --darker: #1f232a;
    --light: #d1d1d1;
    --lighter: #e9e9e9;
    --accent: #7289da;
    --icon: #e1e1e1;
    --shadow: rgba(0,0,0,0.10);
    --mred: #A3525B;
    --mgreen: #70A352;
    --mblue: #527AA3;
    --hover-delay: /*[[hoverDelay]]*/;
    --image: url(https://media.discordapp.net/attachments/310799529161129984/417408747812552715/zilesanamin.jpg);
    --emojiOpacity: 0.75;
    --version: "WhatsApp by Mew v1.4.7";
    --message: "Updated on 11th of June. I wrote a little article about onyx -- read it here: https://vednoc.me/blog/the-state-of-onyx ";
    --changes: "See the changelog at: https://github.com/vednoc/onyx/releases";
  }

  /* Body reset. */
  body
  {
    font-family: /*[[customFonts]]*/, 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Lucida Grande', 'Arial', 'Ubuntu', 'Cantarell', 'Fira Sans', sans-serif;
    background: none;
    background-color: var(--dark);
  }

  /* Scrollbar track. */
  *::-webkit-scrollbar-track
  {
    background-color: var(--shadow);
  }
  /* Scrollbar thumb. */
  *::-webkit-scrollbar-thumb
  {
    background-color: var(--accent);
  }

  *
  {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--shadow);
  }

  /* Highlight selection. */
  ::selection
  {
    color: var(--light) !important;
    background-color: var(--accent) !important;
  }

  ::-moz-selection
  {
    color: var(--light) !important;
    background-color: var(--accent) !important;
  }
  /* Input placeholders. */
  ::placeholder
  {
    color: var(--lighter) !important;
  }

  ::-moz-placeholder
  {
    color: var(--lighter) !important;
  }

  ::-webkit-input-placeholder
  {
    color: var(--lighter) !important;
  }

  /* Progress. */
  progress[value]::-webkit-progress-bar
  {
    background: var(--darker);
  }
  /* Value. */
  progress[value]::-webkit-progress-value
  {
    background: var(--accent);
  }

  progress
  {
    background: var(--darker);
  }

  ::-moz-progress-bar
  {
    background: var(--accent) !important;
  }

  /* App wrapper. */
  #app .app
  {
    background: none;
    background-color: var(--dark);
  }

  /* Log-in page. */
  .landing-wrapper::before
  {
    opacity: 0.6;
    background-color: var(--accent) !important;
  }

  .landing-window
  {
    border-radius: 4px !important;
    border: 1px solid var(--shadow);
    box-shadow: 0 8px 32px 0 var(--shadow) !important;
    background-color: var(--darker) !important;
  }

  .landing-main + div
  {
    background-color: var(--darker) !important;
  }

  .landing-main + div img:not(:hover)
  {
    opacity: 0.3;
  }
    /* Text color. */
  .landing-main *
  {
    color: var(--light);
  }
    /* Reload QR code. */
  ._1MOym
  {
    background-color: var(--darker) !important;
  }

  ._3PxOr rect
  {
    fill: var(--dark) !important;
  }
    /* Fix QR code. */
  .landing-wrapper div[data-ref]
  {
    border-radius: 0;
    filter: contrast(150%) !important;
    outline: 4px solid white !important;
  }
    /* Loader. */
  #startup svg > circle
  {
    stroke: var(--lighter) !important;
  }
  /* Logo colors. */
  span._3PxOr svg path:nth-child(1)
  {
    fill: var(--dark) !important;
  }


  /* Landing page. */
  .app .iFKgT
  {
    border: none;
    background-color: var(--dark) !important;
  }
    /* Image. */
  .app .iFKgT [data-asset-intro-image]
  {
    max-width: 200px;
    max-height: 200px;
    border-radius: 50%;
    filter: opacity(/*[[emojiOpacity]]*/);
    transition: opacity 1s ease !important;
  }
    /* Text color. */
  .app .iFKgT *
  {
    color: var(--light);
  }
    /* Accent bar. */
  .app .iFKgT::after
  {
    border-top-color: var(--accent) !important;
  }
    /* Hide the text. */
  .iFKgT ._3mkas
  {
    font-size: 0px;
  }
    /** Theme note. */
  .app .iFKgT ._3mkas::before
  {
    display: block;
    margin-bottom: -20px;
    font-size: 16px;
    content: var(--message) var(--changes) !important;
  }
    /** Theme info. */
  .app .iFKgT ._3mkas::after
  {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 16px;
    content: var(--version) !important;
    border-top: 1px solid var(--darker);
  }

  /* Left drawer. */
  #app .app #side
  {
    background-color: var(--darker);
  }

    /* Chat list. */
  #side > header
  {
    background-color: var(--darker) !important;
  }

    /* Enable notifications. */
  #side ._2GB6m
  {
    background-color: var(--accent) !important;
  }
    /* Low battery. */
  #side ._2t3oV
  {
    background-color: var(--mred) !important;
  }
    /* Phone not connected. */
  #side ._1puWZ
  {
    background-color: var(--mred) !important;
  }
      /* Text color. */
  #side ._2GB6m *,
      #side ._1puWZ *
  {
    color: var(--lighter);
  }

    /* Global -> Search. */
  ._2HS9r
  {
    border-bottom: 0px solid var(--dark);
    background-color: var(--darker) !important;
    background-color: transparent !important;
  }
      /* Label background. */
  .ZP8RM label, .ZP8RM._19OGD
  {
    border: 0px solid var(--dark);
    background-color: var(--dark) !important;
  }
      /* Input element. */
  .ZP8RM label input
  {
    color: var(--light);
    background-color: transparent;
  }

  .ZP8RM::after,
      .ZP8RM > div::after
  {
    border-color: var(--darker) !important;
    background-color: var(--dark) !important;
  }

  /* New group and group info buttons. */
  ._11p3Q, .r7sRK, ._8-yzK
  {
    /* box-shadow: 0 0 8px -1px var(--shadow) !important; */
    color: var(--accent) !important;
    background-color: transparent !important;
  }
    /* Hide borders. */
  ._2DxRd
  {
    border-color: var(--darker) !important;
  }

  /* Search results. */
  #side ._1AKfk
  {
    color: var(--accent);
    background-color: var(--dark);
  }
    /* Matching results. */
  #side .matched-text
  {
    color: var(--accent) !important;
  }

    /* Contacts wrapper. */
  #pane-side, ._11GZy ._2UaNq
  {
    background-color: transparent !important;
  }
      /* Contacts. */
  ._2UaNq, ._11GZy ._26JG5
  {
    transition: 200ms ease-in-out;
    background-color: transparent !important;
  }
        /* On event. */
  ._2UaNq._3mMX1, ._2UaNq:hover
  {
    background-color: var(--dark) !important;
  }
        /* Text color. */
  ._2UaNq *
  {
    color: var(--light);
  }
        /* Borders. */
  ._2UaNq::after, ._2WP9Q
  {
    border-color: transparent !important;
  }
        /* Avatar wrapper background. */
  ._3RWII
  {
    box-shadow: 0 0 8px -1px var(--shadow) !important;
    background-color: transparent !important;
  }

  /* New message indicator. */
  #side .P6z4j
  {
    color: var(--lighter) !important;
    background-color: var(--accent) !important;
  }


  /* Settings. */
  ._11GZy, ._1KDYa
  {
    background-color: var(--darker) !important;
  }
    /* Header color. */
  ._11GZy header, ._1KDYa header
  {
    min-height: 50px;
    height: auto;
    background-color: var(--darker) !important;
  }
      /* Reset header height. */
  ._11GZy header > div:first-child
  {
    padding: 12px 0 !important;
    height: auto;
  }
      /* Reset header title in left/right drawers. */
  ._11GZy ._1xGbt
  {
    margin-top: 2px !important;
    font-size: 16px;
  }
    /* Transparent sections. */
  ._11GZy ._1CRb5, ._1KDYa ._2LSbZ
  {
    box-shadow: none !important;
    background-color: transparent !important;
  }
      /* Highlighted sections. */
  ._11GZy ._3hhmj ._1CkkN
  {
    background-color: var(--darker) !important;
  }
      /* Change profile picture. */
  ._11GZy .WX_XW, ._11GZy ._2Lbqu, ._1JS2G
  {
    background-color: rgba(0,0,0,0.5) !important;
  }
      /* Text color. */
  ._11GZy *
  {
    color: var(--light);
  }
    /* Input element. */
  ._5UNoc ._3hnO5
  {
    border-color: var(--accent) !important;
  }
    /* Wrapper background. */
  ._3979j
  {
    background-color: transparent !important;
  }
    /* Take a new profile picture. */
  ._2HyTU, ._22aOT
  {
    background-color: var(--darker) !important;
  }
    /* Confirm button. */
  ._2HyTU ._1g8sv, ._22aOT ._1g8sv
  {
    box-shadow: 0 2px 4px 0 var(--shadow) !important;
    background-color: var(--accent) !important;
  }
    /* Zoom in/out. */
  ._1DKwn
  {
    box-shadow: 0 2px 4px 0 var(--shadow) !important;
    background-color: var(--dark) !important;
  }

  /* Option/select elements. */
  select
  {
    color: var(--light);
    border-color: var(--accent);
  }

  select option
  {
    background-color: var(--dark);
  }

    /* Archived chat image. */
  ._2fq0t ._2Lev2
  {
    background-color: var(--dark) !important;
  }

    /* Body. */
  ._2fq0t ._2sNbV ._1CkkN,
    ._2fq0t ._2sNbV ._2EXPL
  {
    background-color: transparent;
  }
      /* On event. TODO: Fixed, but it might still overlap somewhere. */
  .k1feT ._2sNbV > ._1CkkN:hover,
      ._2fq0t ._2sNbV ._1CkkN:hover
  {
    background-color: var(--dark);
  }

    /* New group. */
  ._2fq0t ._39pS-
  {
    background-color: transparent !important;
  }
      /* Header. */
  ._2fq0t ._1AKfk
  {
    background-color: var(--darker) !important;
  }
        /* On event. */
  .k1feT ._2fq0t ._2EXPL._1f1zm,
        .k1feT ._2fq0t ._2EXPL:hover
  {
    background-color: var(--dark) !important;
  }
      /* Search element */
  ._66JgU ._3_3Rs
  {
    border-bottom: none !important;
  }

  ._66JgU ._3_3Rs input, ._66JgU ._3_3Rs ::placeholder
  {
    color: var(--lighter) !important;
  }

  /** Context/dropdown menu. */
  ._2hHc6
  {
    background-color: var(--darker) !important;
    box-shadow: 0 4px 16px 0 var(--shadow) !important;
  }

  ._2hHc6 li:hover, ._2hHc6 li:hover div
  {
    color: var(--accent) !important;
    background-color: var(--dark) !important;
  }

  ._2hHc6 div, ._1ArIP div
  {
    color: var(--light);
  }

  /* Middle drawer. */
  #main
  {
    background-color: var(--dark);
  }

    /* Doodle background. TODO: Plans for the future. */
    /*[[doodles]]*/

    /* Main -> Group description. */
  ._3jzsh
  {
    background-color: var(--darker) !important;
  }
    /* Text colors. */
  ._3jzsh ._3GIEC, ._3jzsh ._6xQdq
  {
    color: var(--lighter) !important;
  }

    /* Jump to present button. */
  ._3KRbU
  {
    box-shadow: 0 4px 8px 2px var(--shadow) !important;
    background-color: var(--darker) !important;
  }
    /* Number of messages. */
  ._3KRbU > span > span
  {
    background-color: var(--accent) !important;
  }

    /* Header. */
  #main header
  {
    border: none;
    background-color: var(--dark);
  }
      /* Text color. */
  #main header ._1WBXd *
  {
    color: var(--light);
  }
    /* Header text color. #22 */
  #main > header > div span[title]
  {
    color: var(--light);
  }
    /* Header separator. */
  #main > header::after
  {
    border-bottom-color: var(--darker);
    background-color: transparent;
  }

  /* Footer. */
  #main footer
  {
    border-top: 1px solid var(--darker);
    background-color: var(--darker);
  }
    /* Input wrapper. */
  #main footer > div
  {
    color: var(--light);
    border: none;
      /* border-bottom: 2px solid var(--dark); */
    background-color: var(--dark);
  }
      /* Input element. */
  #main footer > div:nth-child(1) > div:nth-child(2)
  {
    border: none !important;
    color: var(--light);
    background-color: var(--darker) !important;
  }
    /* Voice message duration. */
  ._30ie-
  {
    color: var(--light) !important;
  }

  /* Unknown contact. */
  ._2Pown
  {
    color: var(--light) !important;
    border-color: var(--darker) !important;
    background-color: var(--dark) !important;
    box-shadow: 0 -1px 0 0 inset var(--darker) !important;
  }
  /* Buttons. */
  ._2ZZub
  {
    color: var(--lighter) !important;
    background-color: var(--darker) !important;
  }

  ._2ZZub:hover
  {
    color: var(--light) !important;
    box-shadow: 0 2px 4px 0 var(--shadow) !important;
  }

    /* Shared contact button colors. */
  .Ir_Ne
  {
    color: var(--accent) !important;
  }
    /* Shared contact text. */
  .AVd_p
  {
    color: var(--lighter) !important;
  }
    /* View contact. */
  ._1VwzF
  {
    background-color: transparent !important;
  }

  /* Hide 'Type a message' once focused. */
  ._3FeAD.focused div[style]
  {
    color: transparent !important;
  }
    /* Placeholder text color. */
  ._3FeAD div[style]
  {
    transition: color 0.15s ease;
    color: var(--lighter) !important;
  }

  /* Right drawer. */
  /* .app ._3HZor ._2fq0t {
    background-color: var(--darker); } */
    /* Border-color. */
  .app ._3HZor
  {
    border-left-color: transparent !important;
  }
    /* Header. */
  .app ._3HZor header
  {
    background-color: var(--darker);
  }
      /* Fix header text vertical position. */
  .app ._3HZor ._1pYs5
  {
    margin-top: 4px !important;
  }
      /* Text color. */
  .app ._3HZor header div
  {
    color: var(--light);
  }
      /* Mute/starred messages. */
  ._3_-Si + ._3_-Si ._2x2XP
  {
    border-color: var(--darker) !important;
  }

    /* Group info sections. */
  .app ._3HZor ._26JG5, .app ._3HZor ._2UaNq
  {
      /*box-shadow: 0 1px 3px shadow /**/
    box-shadow: none;
    background-color: transparent;
  }

  .app ._3HZor ._26JG5:hover
  {
    background-color: var(--dark) !important;
  }
      /* Fix borders. */
  .app ._3HZor ._27Ie2,
      .app ._3HZor ._26JG5::before
  {
    border-color: transparent !important;
  }
      /* User's name. */
      .app ._3HZor span {
        color: var(--light); }
      .app ._3HZor ._23Un5 {
        color: var(--mred); }
      /** Username colors in group chat. */
      .app [class*="color-"] span {
        color: inherit !important; }

      /* Group options. */
      .app ._3HZor ._1CRb5 ._2EXPL,
      .app ._3HZor ._1CRb5 ._1CkkN {
        transition: 200ms ease-in-out;
        background-color: transparent; }
        /* On event. */
        .app ._3HZor ._1CRb5 ._2EXPL._3xj48:hover,
        .app ._3HZor ._1CRb5 ._1CkkN:hover {
          background-color: var(--dark); }
        /* Text color. */
        .app ._3HZor ._1CRb5 ._2EXPL * {
          color: var(--light); }
        /* Admin color. */
        .app ._3HZor .FPZFa {
          border-color: var(--accent); }


  /* Search messages. TODO: Apply this to all search elements. */
  .a5vst, .a5vst .ZP8RM._19OGD /*, ._3HZor ._1iMEz._3sdhb*/ {
    background-color: var(--darker) !important; }
    /* Input wrapper. */
    .a5vst label {
      border: 0px solid var(--dark) !important;
      background-color: var(--dark) !important; }
    .a5vst .ZP8RM::after {
      border: none !important;
      background-color: var(--dark) !important; }
      .a5vst label input {
        background-color: transparent !important; }

  /* Search messages body. */
  .YAPQk {
    background-color: var(--darker) !important; }
    /* Matching results. */
    ._3HZor .matched-text {
      color: var(--accent) !important; }
    /* On event. */
    .YAPQk ._1f1zm > ._3j7s9,
    .YAPQk ._3j7s9:hover {
      background-color: var(--dark) !important; }

  /* Search messages. */
  #pane-side ._2EXPL {
    background-color: transparent !important; }

  /* Starred messages. */
  ._1WMT2 .tail:not(.PJFFv) {
    background-color: var(--dark) !important; }
  /* Borders. */
  ._1WMT2::before, ._1WMT2::after {
    display: none !important; }
    ._1WMT2:hover {
      transition: 200ms ease-in-out !important;
      background-color: var(--darker) !important; }
    /* Remove tails. */
    ._1WMT2 .tail-container {
      display: none !important; }
    /* Date text color. */
    ._1WMT2 ._2V2qB {
      color: var(--lighter) !important; }


  /* Message info. */
  #app .app > div:nth-child(2) ._2rGVQ {
    background-color: var(--dark) !important; }
    /* Doodle image. */
    #app .app > div:nth-child(2) [data-asset-chat-background="true"] {
      filter: invert(100%) opacity(0.8) !important; }
    /* Read by. */
    #app .app > div:nth-child(2) ._2AJf5,
    #app .app > div:nth-child(2) ._19xqi {
      box-shadow: none !important;
      background-color: transparent !important; }
    /* Read by text color. */
    #app .app > div:nth-child(2) ._2AJf5 span {
      color: var(--accent) !important; }

  /* Media/docs/links section. */
  ._27U_m, .yrOIH {
    border-bottom: 1px solid var(--dark);
    background-color: var(--darker) !important; }
  /* Active indicator. */
  ._27U_m::before {
    background-color: var(--accent) !important; }
  /* Text color. */
  ._27U_m .Y1iVg {
    color: var(--lighter) !important; }
  /* Selected links. */
  ._27U_m .Y1iVg._3caqI {
    color: var(--light) !important; }
  /* Selected image. */
  ._2Ji5m {
    border-color: var(--darker) !important; }

  /** Media viewer. */
  ._1iNsf, ._2KgjI {
    background-color: transparent !important; }
    /* Pseudo-element background. */
    ._1iNsf::before, ._2KgjI::before {
      content: ""; position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      background-color: var(--dark);
      opacity: 0.8; z-index: -1; }
    /* Chevron/preloader background. */
    ._3yth3 {
      box-shadow: 0 2px 4px -1px var(--shadow) !important;
      background-color: var(--darker) !important; }

    /* Header. */
    ._1iNsf > div:first-child,
    ._2KgjI > div:first-child {
      box-shadow: 0 1px 0 0 var(--darker);
      background-color: var(--dark) !important; }
      /* Inner element. */
      ._1iNsf > div:first-child > div > div,
      ._2KgjI > div:first-child > div > div {
        background-color: transparent !important; }
        /* Text color. */
        ._1iNsf > div:first-child > div > div *,
        ._2KgjI > div:first-child > div > div * {
          color: var(--light); }

    /* Footer. */
    ._2AP3i {
      border-color: var(--darker) !important;
      background-color: var(--dark) !important; }
      /* Selected image. */
      ._2AP3i .cJP5q {
        border: none !important;
        transform: scale(1) !important;
        outline: 3px solid var(--accent) !important }
        ._2AP3i ._1LdNS:hover:not(.cJP5q):not(#spec) {
          outline: 3px solid var(--accent) !important; }


  /* Message bubbles. */
  .message-in:not(.a81-s), .message-out:not(.a81-s), .message {
    background-color: var(--darker) !important; }
    ._2v02G {
      color: var(--lighter) !important; }

    /* Message text color. */
    .message-in .selectable-text,
    .message-out .selectable-text,
    .quoted-mention,
    ._1upWv {
      color: var(--light) !important; }

    /* Use accent color for links. #20 */
    a[href].selectable-text {
      color: var(--accent) !important; }

    /* Forwarded message. */
    ._15aTv {
      color: var(--lighter) !important; }

    /* Phone numbers of users that aren't your contacts. */
  #main ._1F9Ap
  {
    color: var(--lighter) !important;
  }

    /* Mentions. */
  .matched-mention, .matched-mention .at-symbol
  {
    color: var(--accent) !important;
  }

      /* Message meta text color. */
  [class*="message-"] div > div:last-child span
  {
    color: var(--light);
  }

    /* Image/gif/video meta wrapper. */
  .KYpDv ._1DZAH
  {
    bottom: 8px;
    padding: 2px 5px;
    border-radius: 4px;
    background-color: var(--shadow);
  }
      /* Text color. */
  .KYpDv ._1DZAH ._3EFt_
  {
    margin-top: 0px;
    color: var(--lighter);
  }

      /* Message options for images. */
  ._3EQsG._1eJVc
  {
    background: none !important;
  }
      /* Smooth transition. */
  .message span:last-child div
  {
    transition: 50ms ease-in-out !important;
  }

    /* Typing... */
  span._2ZAIy
  {
    color: var(--accent) !important;
  }

    /* System messages. */
  .a7otO
  {
    box-shadow: 0 2px 8px 0px var(--shadow) !important;
    border-bottom: 3px solid var(--shadow) !important;
    background-color: var(--darker) !important;
  }
      /* Text color and shadows. */
  .a7otO *
  {
    text-shadow: none !important;
    color: var(--lighter) !important;
  }
      /* New message. */
  #main ._3Xx0y
  {
    border: none !important;
    background-color: var(--darker) !important;
  }
        /* X unread messages. */
  #main ._3Xx0y span
  {
    box-shadow: 0 0 8px 0 var(--shadow) !important;
    color: var(--light) !important;
    background-color: var(--dark) !important;
  }

    /* Loader. */
  ._2sOZc
  {
    box-shadow: 0 2px 4px -1px var(--shadow) !important;
    background-color: var(--darker) !important;
  }

    /* Document embeds. */
  ._3a29n
  {
    background-color: var(--dark) !important;
  }

    /* Embeds description */
  .HNuTV
  {
    background-color: var(--dark) !important;
  }

    /* Link embeds. */
  ._3qblR, ._1SsXF
  {
    box-shadow: 0 0 0 1px var(--dark) !important;
    background-color: var(--dark) !important;
  }

    /* Thumbnail. */
  ._3_nIn
  {
    background-color: var(--darker) !important;
  }


  /* Reply section. (= */
  footer ._1ebw2
  {
    box-shadow: 0 0px 8px 0 var(--darker) !important;
    background-color: var(--darker) !important;
  }
  /* Fix margins. */
  footer ._1ebw2 > div:first-child
  {
    margin: 0 0 5px 10px !important;
    background-color: transparent !important;
  }
  /* Reply content. */
  footer ._1ebw2 > div:first-child > div
  {
    background-color: var(--dark) !important;
  }
  /* Close button. */
  footer ._1ebw2 > div:last-child
  {
    position: relative;
    margin: 0 8px 5px 8px !important;
    background-color: transparent !important;
  }
  /* Make the button larger. */
  footer ._1ebw2 > div:last-child > div svg
  {
    padding: 18px;
    border-radius: 6px;
    background-color: var(--dark);
  }

  /* Mention group members. */
  ._2j-wI, .XSeqj
  {
    color: var(--light);
    border-left: none !important;
    background-color: var(--darker) !important;
  }
  /* Wrapper. */
  ._2j-wI .XSeqj
  {
    transition: 300ms ease-in-out !important;
    background-color: transparent !important;
  }
  /* Active. */
  ._2j-wI .XSeqj._1Yz8K,
  ._2j-wI .XSeqj:hover
  {
    background-color: var(--accent) !important;
  }


  /* Select messages. */
  #main ._2AqZl
  {
    background-color: var(--shadow);
  }
    /* Hover over messages. */
  #main .qTFAl
  {
    transition: 0.15s ease !important;
  }
      /* Selected message. */
  #main .qTFAl:hover, #main .qTFAl._3Z2tD
  {
    background-color: var(--shadow) !important;
  }
    /* Selected icon. */
  ._15wNI
  {
    border-color: var(--accent) !important;
    background-color: var(--accent) !important;
  }
      /* Checkmark. */
  ._15wNI ._1ygtt
  {
    border-bottom-color: var(--light);
    border-right-color: var(--light);
  }
    /* Footer/control/options. */
  #main ._1hhkM
  {
    background-color: var(--darker);
  }


  /* Bubble tails -- experimental. */
  .tail .tail-container
  {
    width: 0px !important;
    height: 10px !important;
    z-index: 0 !important;
    border-top: 12px solid var(--darker);
    background: none !important;
  }

  .tail.message-in .tail-container
  {
    left: -10px !important;
    top: 0px;
    border-left: 10px solid transparent;
    border-radius: 5px 0 0 0;
  }

  .tail.message-out .tail-container
  {
    right: -10px !important;
    top: 0px;
    border-right: 10px solid transparent;
    border-radius: 0 5px 0 0;
  }

    /* Disable tails everywhere. */
    /*[[tails]]*/

    /* Disable tails everywhere except in chat. */
  .starred-msg-wrapper .tail-container,
    .message-gallery .tail-container,
    .MS-DH .tail-container
  {
    display: none !important;
  }
      /* Rounded corners. */
  .message-gallery.tail-override-left,
      .MS-DH .tail-override-left
  {
    border-radius: 7.5px !important;
  }

  /** Stickers. */
  ._1rK-b
  {
    background: none !important;
  }
  /* Sender. */
  ._3Mf7Z
  {
    background-color: var(--darker) !important;
  }
  /* Time/status. */
  ._3qAvH
  {
    background-color: var(--darker) !important;
  }

  ._3qAvH *
  {
    color: var(--light) !important;
  }

  /* Message options. */
  ._15CAo
  {
    background: linear-gradient(90deg, transparent, var(--darker) 40%) !important;
  }
  /* Reset sticker menu background. */
  .a81-s > div + span > div
  {
    background: none !important;
  }
  /* Context menu buttons. */
  [data-js-context-icon='true']
  {
    background-image: none !important;
    background: none !important;
  }

  [data-js-context-icon='true'] + div
  {
    background: var(--darker) !important;
  }

  /* Emoji/gif/stickers menu. */
  .QChXd, ._20KNO, .RxbUw
  {
    background-color: var(--dark) !important;
  }
    /* Temporary fix for emoji container. */
  #main footer > div:nth-child(2) > div
  {
    border: 0;
  }
    /* Nib. */
  .iqJMX
  {
    background-color: var(--dark) !important;
  }
    /* Emoji tabs. */
  ._2avTY
  {
    background: var(--darker) !important;
  }
    /* Tab indicator. */
  ._2avTY .Orl3a,
    ._1Wbpa
  {
    background-color: var(--accent) !important;
  }
    /* Active button. */
  ._1oNFt.-XQxp path
  {
    fill: var(--accent) !important;
  }

    /* Search emojis. */
  ._2Qm0c, ._2Qm0c label
  {
    box-shadow: none !important;
    background-color: var(--dark) !important;
  }
      /* Text color. */
  ._2Qm0c input
  {
    color: var(--light) !important;
  }

    /* Gif preloader background. */
  ._2x9yi
  {
      /* border: 2px dashed ; */
    background-color: var(--darker) !important;
  }

      /* Preview. */
  ._1drQ-
  {
    background-color: var(--dark) !important;
  }
        /* Header. */
  ._1drQ- header
  {
    background-color: var(--accent) !important;
  }
          /* Text color. */
  ._1drQ- header *, ._1drQ- .media-body *
  {
    color: var(--lighter) !important;
  }
        /* Footer. */
  ._1drQ- .media-collection
  {
    background-color: var(--darker);
  }
          /* Button. */
  ._1drQ- .media-collection .btn-fill, ._1drQ- ._3hV1n
  {
    color: var(--lighter);
    background-color: var(--accent) !important;
  }


  /* Emoji-wanna-be-round. */
  .emojik
  {
    opacity: var(--emojiOpacity);
    transition: transform 200ms cubic-bezier(0.59, 0.57, 0.39, 1.04);
    clip-path: circle(47%) !important;
  }
    /* Selected emoji. */
  .emojik:focus, .emojik:hover, .emojik.selected
  {
    box-shadow: none !important;
    opacity: 1;
    transform: scale(1.15);
  }

    /* Emoji quick selection. */
  ._2mlOb
  {
    border: 0 !important;
    border-bottom: 1px solid var(--darker) !important;
    background-color: var(--darker) !important;
  }
    /* Emoji race color popup. */
  ._1gFYk
  {
    background-color: var(--dark) !important;
  }
      /* Separator. */
  ._1gFYk ul li:first-child
  {
    border-right: 1px solid var(--darker) !important;
  }
      /* Emoji menu triangle. */
  ._1gFYk .iqJMX
  {
    background-color: var(--dark) !important;
  }


  /* Backdrop. */
  ._3Fq9Y, #startup, #initial_startup
  {
    background-color: var(--dark) !important;
  }
    /* Modal. */
  ._3Fq9Y ._3RiLE,
    ._3gUiM ._2dA13 ._1CnF3,
    ._2dA13 ._18wuJ, ._2dA13 .IuYNx
  {
    box-shadow: 0 0 0 1px var(--darker), 0 8px 16px 0px var(--shadow) !important;
    background-color: var(--darker) !important;
  }
      /* Selected contact. */
  ._3gUiM ._2EXPL._1f1zm,
      ._3gUiM ._2EXPL:hover,
      ._2EXPL._3ntaf:hover
  {
    background-color: var(--dark) !important;
  }
      /* Text color. */
  ._3Fq9Y ._3RiLE *,
      ._3gUiM ._1CnF3 *
  {
    color: var(--light);
  }
      /* Header/footer. */
  .XOIaT
  {
    background-color: var(--dark) !important;
  }
      /* Empty element below search bar. */
  ._2fq0t span._3fOoY
  {
    display: none !important;
  }


  /* Accent buttons. */
  ._3PQ7V
  {
    color: var(--lighter) !important;
    background-color: var(--accent) !important;
  }

  ._3PQ7V:hover
  {
    opacity: 0.8;
  }
  /* Link buttons. */
  ._23_1v:hover
  {
    box-shadow: none !important;
    color: var(--accent) !important;
    background-color: transparent !important;
  }
  /* Muted checkbox color. */
  ._1VD7W
  {
    border-color: var(--accent);
    background-color: var(--accent);
  }
  /* Buttons. */
  .PNlAR:hover, ._1WZqU:hover
  {
    background-color: var(--dark) !important;
  }

  /* Drop items. (-: */
  .drag-drop, ._2n-96
  {
    background-color: var(--dark) !important;
  }
    /* Footer. */
  .NeQRT
  {
    background-color: var(--darker) !important;
  }
    /* Border. */
  ._2n-96 ._3L-be
  {
    border: 5px dashed var(--accent) !important;
    color: var(--light) !important;
  }

    /* Add file icon. */
  .GpvML, ._1ypOz, ._3fktq
  {
    background-color: var(--dark) !important;
  }
      /* Border. */
  ._1gcLL::after
  {
    background-color: var(--accent) !important;
  }

    /* Accent border. */
  .CzI8E, ._31WRs ._1DTd4
  {
    border-bottom-color: var(--accent) !important;
  }
    /* Text color. */
  ._7HWvs
  {
    color: var(--light) !important;
  }

  /** Status area! */
  .app-wrapper-web ._2dLx9
  {
    background-color: transparent !important;
  }
  /* Pseudo-element background. */
  .app-wrapper-web ._2dLx9::before
  {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--dark);
    opacity: 0.8;
    z-index: -1;
  }
    /* Status icon. */
  span[data-icon*="status-v3"] > svg > path:first-child
  {
    opacity: 0.55 !important;
  }
    /* Left hand side. */
  ._2dLx9 .IMn_C
  {
    background-color: var(--darker) !important;
  }
    /* Text color. */
  .IMn_C span
  {
    color: var(--light) !important;
  }

  .qlhJH hr
  {
    color: var(--dark) !important;
  }
    /* Right hand side. */
  ._2dLx9 ._3MBzN
  {
    background-color: var(--dark) !important;
  }
    /* Text color. */
  ._2dLx9 ._3MBzN div
  {
    color: var(--lighter) !important;
  }
    /* Reply to status. */
  .QRsOy
  {
    background-color: var(--dark) !important;
  }
    /* Input bar. */
  ._3FeAD._2nW8k
  {
    background-color: var(--dark) !important;
  }

  /* Remove weird iframes. */
  object
  {
    display: none !important;
  }

  /* Global icon color. */
  span[data-icon^="business-"] > svg path,
  span:not([data-icon="image"]) > svg > path
  {
    transition: 200ms ease;
    fill: var(--icon) !important;
  }
    /* On event. */
  span:not([data-icon="image"]):hover > svg > path
  {
      /* fill: var(--accent) !important; */
    opacity: 0.3 !important;
  }

  /* Upload files. */
  .Ijb1Q::after
  {
    box-shadow: 0 4px 8px 2px var(--shadow) !important;
  }

  /* Default profile picture background. */
  span[data-icon^="default-"] svg > path:first-child
  {
    fill: var(--dark) !important;
  }

  span[data-icon^="default-"] svg path:last-child
  {
    opacity: 0.7;
    fill: var(--icon) !important;
  }

  /*  Sent message. */
  span[data-icon="msg-dblcheck"] svg path,
  span[data-icon="status-dblcheck"] svg path,
  span[data-icon="msg-check"] svg path,
  span[data-icon="status-check"] svg path
  {
    fill: var(--light) !important;
    opacity: 0.5 !important;
  }

  /* Sent AND seen message. */
  span[data-icon="msg-dblcheck-ack"] svg path,
  span[data-icon="status-dblcheck-ack"] svg path,
  span[data-icon="msg-dblcheck-ack-light"] svg path,
  span[data-icon="status-v3-unread"] > svg > path:last-child
  {
    fill: var(--accent) !important;
    opacity: 1 !important;
  }

  /* Misc icons fix. */
  span[data-icon^="chevron-"] svg path,
  span[data-icon="x-viewer"] svg path,
  span[data-icon="download"] svg path,
  span[data-icon="forward"] svg path,
  span[data-icon="star-btn"] svg path,
  span[data-icon="audio-file"] svg path:last-child,
  span[data-icon="new-group"] svg path,
  span[data-icon="add-user-light"] svg path,
  span[data-icon="link"] svg path,
  span[data-icon="ptt-in-blue"] svg path:first-child,
  span[data-icon="ptt-out-blue"] svg path:first-child
  {
    fill: var(--icon) !important;
  }

  /* Audio message icons. */
  span[data-icon="ptt-in-blue"] svg path:first-child,
  span[data-icon="ptt-out-blue"] svg path:first-child
  {
    fill: transparent !important;
  }

  /* Logo. */
  ._3CSsZ > svg > path:first-child
  {
    fill: var(--accent) !important;
  }

  span[data-icon="logo"] svg path:nth-child(1)
  {
    fill: white !important;
  }

  span[data-icon="alert-phone"] svg path:first-child,
  span[data-icon="logo"] svg path:nth-child(1n+2),
 	span[data-icon="whatsapp-logo"] svg path:first-child
  {
    fill: var(--darker) !important;
  }

  /* GIF icon opacity. */
  span[data-icon="emoji-gifs"] svg path
  {
    fill: var(--icon) !important;
    fill-opacity: 1 !important;
  }

  /* Be cautious icons. */
  span[data-icon="exit"] svg path,
  span[data-icon="thumbs-down"] svg path,
  span[data-icon="delete-danger"] svg path
  {
    fill: var(--mred) !important;
  }

  /* Audio message. */
  span[data-icon="audio-file"] svg path
  {
    fill: rgba(255, 173, 31, 0.8) !important;
  }
    /* Audio length bar. */
  ._22cMG.fS1bA .nDKsM
  {
    background-color: var(--accent) !important;
  }
      /* Slider thumb. */
  input[type=range]::-webkit-slider-thumb
  {
    cursor: pointer;
    background: var(--accent) !important;
  }

  /* Rounded buttons. */
  span svg > path[fill="#00BFA5"]
  {
    fill: var(--accent) !important;
  }

  /* Disable background image on small resolutions. */
  @  media screen and (max-width: 1441px)
  {
    ._1FKgS: :after {
      display: none !important;
  }
}

@media screen and (min-width: 1441px)
{
    /* Animation. */
  html[dir=ltr] ._3dqpi
  {
      /* display: none !important; */
    animation: _104Un 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.38);
  }

    /* App wrapper. */
  #app .app
  {
    border-radius: 8px;
    box-shadow: 0 4px 24px -2px var(--shadow);
  }

    /* Fullscreen. */
    /*[[fullscreen]]*/

    /* App background. */
    /*[[background]]*/;
}

  /* "Privacy mode." */
  /*[[blurContacts]]*/
  /*[[blurImages]]*/

  /* Compact mode. */
  /*[[compactMode]]*/

  /* Custom CSS rules. */
  /* Userstyles.org doesn't allow this; you'll have to use UserCSS
   * version available at: https://github.com/vednoc/onyx
   */```

</details>

Edit: Hide the source code.

from dark-whatsapp.

SoyDiego avatar SoyDiego commented on May 27, 2024

@SoyDiego You should install the UserCSS version instead of the USo one. I'll add more info to readme about using this theme outside of Stylus soon.

That will be good and I will read it when you do. I do not know how to do it with UserCSS but at least I was able to do it in the way I wrote above. Thanks again :)

from dark-whatsapp.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.