OLED Whatsapp Dark Theme by eallyy

/* ==UserStyle==
@name         OLED Whatsapp Dark Theme
@description  OLED Optimized - Dark Whatsapp Theme
@namespace    github.com/eallyy

@homepageURL  https://github.com/eallyy/oled-whatsapp
@supportURL   https://github.com/eallyy/oled-whatsapp/issues
@version      1.0.0
@author       eallyy
@license      MIT
@preprocessor stylus

@var text     ui_font    'Custom UI font' ''font_name''
@var text     radius-g   'Custom rounded corners for menus' 4px
@var text     radius-i   'Custom rounded corners for input area' 4px
@var range    radius-a   'Custom rounded corners for avatars' [50, 0, 50, 1, '%']
@var text     app_width  'Custom width for chat app' 1396px
@var checkbox fullscreen 'Enable fullscreen mode' 0
@var checkbox app_c_m    'Enable compact mode' 1
@var text     app_c_m_w  'Compact mode breakpoint' 720px
@var text     app_c_m_h  'Compact mode hover-on delay' 0.6s
@var text     app_c_m_d  'Compact mode hover-off delay' 1.2s

@var checkbox chat_b_c   'Enable blurred contacts' 0
@var checkbox chat_b_c_special   'Enable amoled contacts' 0
@var checkbox chat_b_img 'Enable blurred images/videos' 0
@var text     chat_b_in  'Images/videos hover-on delay' 0.4s
@var text     chat_b_out 'Images/videos hover-off delay' 0.2s

@var select   alerts     'Alerts' {
    'Show all                   *': 'show          ',
    'Hide "Allow notifications"  ': 'notifications ',
    'Hide all                    ': 'hide          ',
}

@var select   chat_m_t   'Message tails style' {
    'Default  *': 'default ',
    'Minimal   ': 'minimal ',
    'Rounded   ': 'rounded ',
    'Facebook  ': 'fb-like ',
}

@var select   chat_left  'Left message bubble position' {
    'Left side  *': 'start ',
    'Right side  ': 'end   ',
}
@var checkbox chat_b_l   'Custom background for left message bubble' 0
@var color    b_l_bg     'Left message bubble color' #3c434f
@var select   chat_right 'Right message bubble position' {
    'Left side   ': 'start ',
    'Right side *': 'end   ',
}
@var checkbox chat_b_r   'Custom background for right message bubble' 0
@var color    b_r_bg     'Right message bubble color' #333a47

@var range    emoji_o    'Emoji default opacity' [0.8, 0.0, 1, 0.01]

@var select   app_image  'Custom app background' {
    'Theme image with 12px blur   *': 'bg-high ',
    'Theme image with 6px blur     ': 'bg-low  ',
    'Theme image without blur      ': 'bg-none ',
    'Custom background image       ': 'custom  ',
    'Default background            ': 'default ',
    'None                          ': 'none    ',
}
@var text     image_url  'Custom background image link' url('https://images.unsplash.com/photo-1434569117012-ce134ee1a088?fit=crop&w=1280&h=720&q=80')
@var range    bg_opacity 'Background image opacity' [0.4, 0.0, 1, 0.01]
@var range    bg_blur    'Background image blur size' [0, 0, 50, 1, 'px']
@var range    bg_hue     'Background image hue' [320, 0, 360, 1, 'deg']
@var range    bg_invert  'Background image invert colors' [0, 0.0, 1, 0.1]

@var checkbox chat_bg    'Enable chat background image' 1
@var text     chat_image 'Custom image for chat' url('https://web.whatsapp.com/img/bg-chat-tile_9e8a2898faedb7db9bf5638405cf81ae.png')
@var range    chat_bg_o  'Chat background image opacity' [0.15, 0.0, 1, 0.01]
@var range    chat_bg_i  'Chat background image inverted colors' [0.6, 0.0, 1, 0.1]

@var checkbox ff_scroll  'Thin scrollbars in Firefox' 1

@var checkbox c_g_c      'Theme colors in groups' 1

@var select   theme      'Color-scheme' {
    'Dark blue (old) *': 'old',
    'Dark gray (new)  ': 'new',
    'Custom colors    ': 'custom',
}

@var color    dark       'Color: Primary background   ' #1f232a
@var color    darken     'Color: Highlight background ' #252A33
@var color    darker     'Color: Secondary background ' #333943
@var color    light      'Color: Primary foreground   ' #e9e9e9
@var color    lighter    'Color: Secondary foreground ' #a1a1a1
@var color    accent     'Color: Accent               ' #7289da
@var color    yellow     'Color: Yellow               ' #e5c512
@var color    orange     'Color: Orange               ' #df4b16
@var color    red        'Color: Red                  ' #dc322f
@var color    magenta    'Color: Magenta              ' #f33682
@var color    violet     'Color: Violet               ' #6c71c4
@var color    blue       'Color: Blue                 ' #268bd2
@var color    cyan       'Color: Cyan                 ' #2aa198
@var color    green      'Color: Green                ' #859900
@var color    white      'Color: White                ' #ffffff
@var color    sh         'Color: Shadow light         ' #00000025
@var color    sh-h       'Color: Shadow heavy         ' #00000035
==/UserStyle== */
@-moz-document domain('web.whatsapp.com') {
    :root {
        body {
            background-color: black;
        }
        ._alyw,
        ._al_c,
        .x150wa6m,
        ._aqbz,
        .xrmvbpv,
        ._ak1i,
        ._akmh,
        ._ak8h,
        ._ak8l,
        .xu3j5b3,
        ._ahmw,
        ._ajtv,
        ._ahyo,
        ._amm2,
        .xieb3on,
        .x1rife3k,
        .x1g42fcv,
        .xxpdul3,
        ._ak77,
        ._alzo,
        ._ak8n,
        ._ak8c,
        .x1h0ha7o,
        .x1t1x2f9,
        .x2b8uid,
        ._ajzg,
        .x1j85h84,
        .xdj266r,
        ._ak8e,
        .x1hhzuzn,
        .x18my8te,
        ._alzd, ._ajy1, ._amm5 {
            background-color: black;
        }
        ._alyr::after {
            display: none;
        }
        ._ak4w {
            background-color: dark;
        }
        ._aj-s {
            background-color: darken;
        }
        ._ai05 {
            background-color: dark;
        }
        ._ak1l,
        .x1oq7267,
        ._ahyg,
        .x1bmedo,
        .x12wi22r,
        .x1sqk8ge {
            background-color: dark;
            border-color: darker;
        }
        .x8182xy,
        ._ao3e {
            background-color: transparent;
        }
        ._ak8l {
            border-top-color: darken;
        }
        ._ak8l:hover {
            border: transparent;
        }
        ._ak8h {
            border: none;
        }
        ._ak7p::after,
        ._ak7p:hover {
            border-top-color: lighter;
            border-top: transparent;
        }
        .x1yc453h {
            background-color: transparent;
        }
    }
}