Dark style for web.telegram.org

web.telegram.css

:root 
{
    /* Text */
    --text: #fff;
    --chat-user-name: #288ce1; /* Username color in chat */
    --chat-date-time: #444; /* Time color in chat message */
    --chat-msg-status: var(--chat-user-name); /* Dot color on the left of the message if f.eg. message is unread */
    --chat-service-msg: var(--chat-user-name); /* Service message color in chat, including date between days in chat */
    --list-user-name: #fff; /* Username color in chat list */
    /* Links */
    --link: #4faeff;
    --link-hover: var(--link);
    --link-visited: var(--link);
    /* Backgrounds */
    --bg-accent: #282828;
    --bg-header: #202020;
    --bg1: #202020;
    --bg0: #181818;
}


body { color: var(--text); }
html { background-color: var(--bg0); }
.page_wrap { background-color: var(--bg0); }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:visited { color: var(--link-visited); }
.btn-primary { background-color:var(--bg-accent); }
.im_dialogs_scrollable_wrap .active a.im_dialog { background-color:var(--bg-accent); }
.im_dialogs_scrollable_wrap .active a.im_dialog:hover,.im_dialogs_scrollable_wrap .active a.im_dialog_selected { background-color:var(--bg-accent); }
.dropdown.open .tg_head_btn, .tg_head_btn:hover { background-color:var(--bg-accent); }
.im_dialog_peer { color: var(--list-user-name); }
a.im_dialog .im_dialog_chat_from_wrap, a.im_dialog .im_short_message_media, a.im_dialog .im_short_message_service { color: var(--chat-user-name); }
.im_message_author, .im_message_fwd_author { color: var(--chat-user-name); }
.im_message_selected .im_message_outer_wrap, .im_history_select_active .im_message_outer_wrap:hover { background-color: var(--bg3); }
.im_message_unread_split { background-color: var(--bg1); }
.im_dialogs_scrollable_wrap a.im_dialog:hover, .im_dialogs_scrollable_wrap a.im_dialog_selected { background-color: var(--bg1); }
.im_dialogs_col_wrap { border-right: 2px solid var(--bg1); }
.im_message_date, .im_message_fwd_date { color: var(--chat-date-time); }
.tg_head_split { background-color: var(--bg-header); border-bottom: 2px solid var(--bg0); }
.im_record_bg { background: none; }
a.composer_emoji_btn:hover { background: none; }
.composer_rich_textarea:focus, .composer_textarea:focus { box-shadow: none; border-bottom: 1px solid var(--bg-accent); }
.im_service_message { color: var(--chat-service-msg); }

.icon-message-status {background-color:var(--chat-msg-status);}
.active .im_dialog_unread, .im_dialog_unread {background-color:var(--chat-msg-status);}
a.im_dialog:hover .im_dialog_unread, a.im_dialog_selected .im_dialog_unread {background-color:var(--chat-msg-status);}

.im_history_col .nano > .nano-pane, .contacts_modal_col .nano > .nano-pane, .sessions_modal_col .nano > .nano-pane, .stickerset_modal_col .nano > .nano-pane, .im_dialogs_modal_col .nano > .nano-pane
{
    background: none; /* Scrollbar bg */
}

.im_page_wrap {
    background-color: var(--bg1);
    box-shadow: none;
    border: none;
}

.composer_rich_textarea, .composer_textarea
{
    padding: 0.4rem;
    box-shadow: none;
    background-color: var(--bg1);
    border-bottom: 1px solid var(--bg-accent);
}

.im_dialogs_search_field {
    background-color: var(--bg0);
    color: #999;
    border: 2px solid var(--bg0);
}