Skip to content

Instantly share code, notes, and snippets.

@kroeliebuschie
Forked from digitalheir/telegram_dark_mode.user.js
Last active September 28, 2017 11:21
Show Gist options
  • Save kroeliebuschie/795410526e2e99d0c563e5075a836bca to your computer and use it in GitHub Desktop.
Save kroeliebuschie/795410526e2e99d0c563e5075a836bca to your computer and use it in GitHub Desktop.
Tampermonkey / Greasemonkey script for night mode / dark theme in Telegram web
// ==UserScript==
// @name Telegram dark theme / night mode
// @namespace https://github.com/digitalheir/
// @version 0.8
// @description Dark theme / night mode for Telegram Web
// @author Maarten Trompper <maartentrompper@freedom.nl>
// @match https://web.telegram.org/*
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle('body { color: #fff;');
GM_addStyle('.im_page_split { background-color: #333; }');
GM_addStyle('.page_wrap { background-color: #232323; color: #fff;}');
GM_addStyle('.im_page_wrap { background-color: #232323; box-shadow: 0px 1px 0 #2b2b2b; border-left: 1px solid #2b2b2b;border-right: 1px solid #2b2b2b;border-bottom: 1px solid #2b2b2b;}');
GM_addStyle('.im_dialogs_col_wrap { border-right: 2px solid #2b2b2b;}');
GM_addStyle('.tg_head_split { background-color: #3c3c3c;}');
GM_addStyle('.dropdown.open .tg_head_btn, .tg_head_btn:hover { background-color: #4e4e4e;}');
GM_addStyle('.im_dialogs_scrollable_wrap .active a.im_dialog:hover, .im_dialogs_scrollable_wrap .active a.im_dialog_selected{ background-color: #4e4e4e;}');
GM_addStyle('.im_dialog_peer { color: #eee;}');
GM_addStyle('.im_dialogs_scrollable_wrap .active a.im_dialog { background-color: #3c3c3c;}');
GM_addStyle('.im_dialogs_scrollable_wrap a.im_dialog:hover, .im_dialogs_scrollable_wrap a.im_dialog_selected { background-color: #444444;}');
// badges
GM_addStyle('.im_dialog_badge { background: #1e7729;}');
GM_addStyle('.im_dialog_badge_muted { background-color: #444444;}');
// scroll bar
GM_addStyle('.im_history_col .nano > .nano-pane > .nano-slider, .contacts_modal_col .nano > .nano-pane > .nano-slider, .sessions_modal_col .nano > .nano-pane > .nano-slider, .stickerset_modal_col .nano > .nano-pane > .nano-slider, .im_dialogs_modal_col .nano > .nano-pane > .nano-slider { background: rgba(66, 66, 66, 0.5);}');
GM_addStyle('.im_dialogs_col .nano > .nano-pane > .nano-slider { background: rgba(220, 220, 220, 0.3);}');
// selected message
GM_addStyle('.im_message_selected .im_message_outer_wrap { background: #151515; }');
GM_addStyle('.im_history_select_active .im_message_outer_wrap:hover {background: #464646;}');
// make links light blue
GM_addStyle('.im_message_author, .im_message_fwd_author { color: #c1e2ff;}');
GM_addStyle('a { color: #c1e2ff;}');
GM_addStyle('a.im_dialog .im_dialog_chat_from_wrap, a.im_dialog .im_short_message_media, a.im_dialog .im_short_message_service { color: #c1e2ff;}');
// unread messages banner
GM_addStyle('.im_message_unread_split { background: #444; color: #cacaca;}');
// search field
GM_addStyle('.im_dialogs_search_field { border: 1px solid #333; background-color: #333;}');
GM_addStyle('.im_dialogs_search_field:active, .im_dialogs_search_field:focus{ border: 1px solid #333; background-color: #333;}');
// input field
GM_addStyle('.composer_rich_textarea:focus, .composer_textarea:focus { box-shadow: 0 2px 0 0 #616161; }');
// popup
GM_addStyle('.modal-content { background-color: #2f2f2f;}');
GM_addStyle('a.tg_checkbox, p.tg_checkbox { color: #fff;');
(function() {
'use strict';
console.log("Telegram dark mode initiated");
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment