Light custom style for Telegram Web. Wider messages list and enableable dark theme (`html.theme-dark`)

telegram.css

/* font */

body, body.non_osx {
  font-family: "SF Pro Text", "Noto Sans CJK TC", sans-serif;
}

/* theming */

html {
  --color-background: #ffffff;
  --color-background-highlight: #f0f4f7;
  --color-search-background: #F2F2F2;
  --color-message-selected-background: #f2f6fa;
  --color-text: #212121;
  --color-telegram-blue: #5682a3;
  --color-telegram-blue-highlight: #497799;
  --color-telegram-blue-lowlight: #6490b1;
  --color-border: #eeeeee;
}

html.theme-dark {
  --color-background: #212121;
  --color-background-highlight: #25292c;
  --color-search-background: #424242;
  --color-message-selected-background: #2a3137;
  --color-text: #ffffff;
  --color-telegram-blue: #497495;
  --color-telegram-blue-highlight: #58809e;
  --color-telegram-blue-lowlight: #426682;
  --color-border: #313131;
}

body, .im_dialog_peer, .form-control, a.tg_checkbox, p.tg_checkbox, a.tg_radio, .contacts_modal_members_list a.contacts_modal_contact {
  color: var(--color-text);
}

html, .im_page_wrap, .dropdown-menu, .modal-content, .form-control {
  background-color: var(--color-background);
}

.tg_head_split {
  background-color: var(--color-telegram-blue);
}

.dropdown.open .tg_head_btn, .tg_head_btn:hover {
  background-color: var(--color-telegram-blue-highlight);
}

.tg_head_logo_dropdown .dropdown-menu > li > a, .tg_head_peer_dropdown .dropdown-menu > li > a {
  color: var(--color-telegram-blue-highlight);
}

.tg_head_logo_dropdown .dropdown-menu {
  border-color: var(--color-background-highlight);
}

.im_message_unread_split, .im_dialogs_scrollable_wrap a.im_dialog:hover, .im_dialogs_scrollable_wrap a.im_dialog_selected, .tg_head_logo_dropdown .dropdown-menu > li > a:hover, .contacts_modal_members_list .active a.contacts_modal_contact, .contacts_modal_members_list .active a.contacts_modal_contact:hover, .contacts_modal_members_list a.contacts_modal_contact:hover, .tg_head_peer_dropdown .dropdown-menu > li > a:hover, .btn-link:hover, .btn-md:hover {
  background-color: var(--color-background-highlight);
}

.im_dialogs_search_field {
  background-color: var(--color-search-background);
  border-color: var(--color-search-background);
}

.im_message_selected .im_message_outer_wrap, .im_history_select_active .im_message_outer_wrap:hover {
  background-color: var(--color-message-selected-background);
}

.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-color: var(--color-border);
}

.form-control {
  border-color: transparent !important;
}

.im_edit_panel_border, .im_history_pinned_wrap, .md_modal_iconed_section_wrap, .im_dialogs_col_wrap {
  border-color: var(--color-border);
}

.dropdown-menu .divider {
  background-color: var(--color-border);
}

.im_dialogs_scrollable_wrap .active a.im_dialog, .im_dialogs_scrollable_wrap .active a.im_dialog:hover, .im_dialogs_scrollable_wrap .active a.im_dialog_selected {
  background-color: var(--color-telegram-blue-lowlight);
}

/* make some things wider */

.im_page_wrap {
  border: none;
  box-shadow: none;
}

.im_dialogs_col_wrap, .tg_head_logo_wrap {
  width: 400px;
}

.im_history_col_wrap, .tg_head_main_wrap {
  width: calc(100% - 400px);
}

@media (min-width: 900px) {
  .im_message_selected .icon-select-tick, .im_history_selectable .im_message_outer_wrap:hover .icon-select-tick {
    margin-left: -39px;
  }
}

/*.tg_head_split {
  max-width: none;
}

.page_wrap {
  height: 100%;
}

.footer_empty {
  display: none;
}

.im_page_wrap {
  max-width: none;
  min-width: 0;
}

.im_history_selected_wrap {
  max-width: 550px;
}*/

/* replace Telegram logo svg with text */

.icon-tg-title {
  background-image: none;
  margin-top: 0;
}

.icon-tg-title:after {
  content: "Telegram";
  font-style: normal;
}