Skip to content

Dark-Telegram by roybarina

Screenshot of Dark-Telegram
Homepage Write a review Install Get Stylus

Details

Authorroybarina

LicenseCode released under the [MIT](LICENSE) license.

Categoryweb.telegram.com

Created

Updated

Size236 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes


Most features are ported from the original style, I will continue to work on it to add more cool stuff.

Feel free to contribute and make sure to check Dark-WhatsApp style by vednoc!

Features

  • Some animations including contact list hover and private mode
  • Border sizes for bubbles, icons and whole page
  • Hide contacts initials
  • Custom icons for contacts (to match original style) (group icons currently not supported by telegram)
  • Emoji popup positioning
  • Vignette effect fot photo thumbs (video thumbs currently not supported)
  • Compact mode
  • Messages tails
  • Fullscreen mode
  • Custom chat window width
  • Emojis and stickers transparency
  • Messages bubble position
  • Hide contacts icons from chat including own
  • and more ...

See the Changelog for more details.

Installation

To use this style you'll need to install
Stylus
first, and then click on the button below.


For more information, please follow the original style Dark-WhatsApp installation section.

Franz\Ferdi

If you're using Franz or Ferdi, please take a look at dcferreira's awesome Franz Themes Repository for more instructions on how to install the Dark-Telegram theme for Franz\Ferdi.

Community

While GitHub is generally great for communication, Telegram is best for IM.

Feel free to join, discuss and share you themes and ideas in our Super group on Telegram.

Credits

Full credit for design goes to original style creators at vednoc.

License:

Code released under the MIT license.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Dark-Telegram
@namespace      github.com/Barina/Dark-Telegram
@homepageURL    https://github.com/Barina/Dark-Telegram
@supportURL     https://github.com/Barina/Dark-Telegram/issues
@version        1.14.48
@description    Customizable theme for telegram web.
@author         Roy Barina
@license        MIT
@preprocessor   stylus

@var select browser                 'Browser'{
    'Chromium (Chrome, Edge etc) *': 'chromium',
    'FireFox                      ': 'firefox',
    'Other                        ': 'other',
}

@var text windowwidth               'Window width' 75%
@var range contactlistwidth         'Contact list width' [31, 5, 80, 1, "%"]

@var color textc2                   'Headers text color' #fff
@var color textc1                   'Primary text color' #ccccca
@var color textc3                   'Secondary text color' #6e6e6e

@var checkbox customFont            'Use custom font' 0
@var text ui_font                   'Font family' 'sans-serif'

@var range msgb                     'Messages bubble corner size' [10, 1, 100, 1, "px"]
@var color msg-in-bg                'Incoming message background color'  #3c434f
@var color msg-out-bg               'Outgoing message background color' #333a47

@var select inpos                   'Incoming bubble position'{
    'Left                       *': 'left',
    'Right                       ': 'right',
    'Stretch                     ': 'stretch'
}
@var select outpos                  'Outgoing bubble position'{
    'Left                        ': 'left',
    'Right                       *': 'right',
    'Stretch                     ': 'stretch'
}
@var select tail                    'Messages tail' {
    'None                         ': 'notail',
    'Round Corner                *': 'roundtail',
    'Triangle                     ': 'tritail',
    'Sharp Corner                 ': 'recttail',
}

@var text msgwmax-in                'Incoming message maximum width' 750px
@var text msgwmax-out               'Outgoing message maximum width' 550px

@var text prevw                     'Media preview width' 350px
@var text prevh                     'Media preview height' 220px
@var checkbox prevs                 'Keep media previews squared (height will use width value so it will not work when using percentage)' 0

@var checkbox centerauthor          'Center author name within chat bubbles' 0

@var select texta                   'Messages text align' {
    'Auto                         ': 'textaauto',
    'Unset                        ': 'unset',
    'Start                       *': 'Start',
    'End                          ': 'end',
    'Center                       ': 'center',
    'Left                         ': 'left',
    'Right                        ': 'right',
}

@var checkbox hideothericon         'Hide other contact user photo from chat window' 1
@var checkbox hideownicon           'Hide own user photo from chat window' 1

@var checkbox hideownname           'Hide own name from private chat bubbles' 1
@var checkbox hideothername         'Hide other name from private chat bubbles' 1
@var checkbox hideownnamegr         'Hide own name from group chat bubbles' 1
@var checkbox hideothernamegr       'Hide other name from group chat bubbles' 0
@var checkbox shownamehover         'Show name when hover on chat bubbles' 0
@var checkbox showothernamehover    'Show other names when hover on chat bubbles' 1

@var checkbox autohidedata          'Auto hide extra message data' 1

@var color bgcolor                  'Background color' #1f232a

@var color border                   'Border color' #333943
@var range border-size              'Border size' [3, 0, 50, 1, "px"]

@var color control                  'Base control color' #252A33
@var color control-hover            'Control hover color' #292f38
@var color control-active           'Control active color' #343b46

@var color inputbg                  'Input background color' #1c2026

@var color shadow                   'Shadow color' #00000040

@var color btn-bg                   'Buttons color' #2b313b
@var color btn-bg-h                 'Hover buttons color' #363d4a

@var color accent                   'Accent color' #7289da

@var range round                    'User photo round' [25, 0, 50, 1, "%"]

@var checkbox enableCompact         'Enable compact mode' 1
@var text compactBreak              'Compact mode breakpoint' 1080px
@var text compactDelayOn            'Compact mode hover-on delay' 0.25s
@var text compactDelayOff           'Compact mode hover-off delay' 1s
@var range comTranDurOn             'Compact mode transition on duration' [0.7, 0, 5, .1, "s"]
@var range comTranDurOff            'Compact mode transition off duration' [1.2, 0, 5, .1, "s"]

@var checkbox useChatSize           'Use custom chat width' 0
@var number chatSize                'Chat width in px' [780, 0]
@var color bgccolor                 'Chat background color' #1f232a
@var checkbox showchatbg            'Enable chat background image' 1
@var text chatbg                    'Custom image for chat' url('https://web.whatsapp.com/img/bg-chat-tile_9e8a2898faedb7db9bf5638405cf81ae.png')
@var range chatbg-o                 'Chat background image opacity' [0.15, 0.0, 1, 0.01]
@var range chatbg-i                 'Chat background image inverted colors' [0.6, 0.0, 1, 0.1]

@var select app_image               'Custom app background' {
    'Default background          *': 'default',
    'None                         ': 'none',
}
@var text bgimage                   'Custom background image' url('https://images.unsplash.com/photo-1434569117012-ce134ee1a088?fit=crop&w=1280&h=720&q=80')
@var range bgopacity                'Background image opacity' [0.4, 0.0, 1, 0.01]
@var range bgblur                   'Background image blur size' [12, 0, 50, 1, 'px']
@var range bghue                    'Background image hue' [320, 0, 360, 1, 'deg']
@var range bginvert                 'Background image invert colors' [0, 0.0, 1, 0.1]

@var checkbox noise                 'Enable noise' 0
@var text noiseimg                  'Noise image' url('https://raw.githubusercontent.com/Barina/Dark-Telegram/master/Resources/noise.png')

@var checkbox vign                  'Vignette effect on media previews' 1

@var range emoj-scale               'Emoji panel scale' [1, .5, 3, .01]
@var range emojo                    'Emoji and sticker icons opacity' [.6, 0, 1, .01]
@var select emoj-pos                'Emoji and sticker popup position' {
    'Center                      *': 'center',
    'Right                        ': 'right',
    'Left                         ': 'left',
}
@var checkbox private               'Enable private mode' 0
@var checkbox shift-anim            'Enable contacts shift animation on mouse hover' 1

@var checkbox hideinitials          'Hide contact initials' 1
@var checkbox useicons              'Enable custom contact icons' 1

@var text contacticon               'Contact icon url' url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxz%0D%0AdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxu%0D%0AczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6%0D%0ALy93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0%0D%0AcDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQv%0D%0ARFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2Fw%0D%0AZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmlld0JveD0iMCAwIDIxMiAyMTIiCiAgIHdp%0D%0AZHRoPSIyMTIiCiAgIGhlaWdodD0iMjEyIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmczNzI5%0D%0AIgogICBzb2RpcG9kaTpkb2NuYW1lPSJjb250YWN0LWljb24uc3ZnIgogICBpbmtzY2FwZTp2ZXJz%0D%0AaW9uPSIwLjkyLjQgKDVkYTY4OWMzMTMsIDIwMTktMDEtMTQpIj4KICA8bWV0YWRhdGEKICAgICBp%0D%0AZD0ibWV0YWRhdGEzNzM1Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICBy%0D%0AZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+%0D%0ACiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9y%0D%0AZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpS%0D%0AREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzczMyIgLz4KICA8c29kaXBv%0D%0AZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIj%0D%0ANjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIK%0D%0AICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5r%0D%0Ac2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBp%0D%0AbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjI1NjAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0i%0D%0AMTM2MSIKICAgICBpZD0ibmFtZWR2aWV3MzczMSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAg%0D%0AaW5rc2NhcGU6c25hcC1nbG9iYWw9InRydWUiCiAgICAgaW5rc2NhcGU6c25hcC1iYm94PSJ0cnVl%0D%0AIgogICAgIGlua3NjYXBlOmJib3gtcGF0aHM9InRydWUiCiAgICAgaW5rc2NhcGU6YmJveC1ub2Rl%0D%0Acz0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFwLWJib3gtZWRnZS1taWRwb2ludHM9InRydWUiCiAg%0D%0AICAgaW5rc2NhcGU6c25hcC1iYm94LW1pZHBvaW50cz0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFw%0D%0ALWludGVyc2VjdGlvbi1wYXRocz0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFwLXNtb290aC1ub2Rl%0D%0Acz0idHJ1ZSIKICAgICBpbmtzY2FwZTp6b29tPSI0IgogICAgIGlua3NjYXBlOmN4PSIxMTAuMTgx%0D%0AMzYiCiAgICAgaW5rc2NhcGU6Y3k9Ijk5LjU3MDIyOSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0i%0D%0ALTkiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9Ii05IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhp%0D%0AbWl6ZWQ9IjEiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMzcyOSIgLz4KICA8cmVj%0D%0AdAogICAgIGZpbGw9IiMxZjIzMmEiCiAgICAgd2lkdGg9IjIxMiIKICAgICBoZWlnaHQ9IjIxMiIK%0D%0AICAgICBpZD0icmVjdDM3MjUiIC8+CiAgPHBhdGgKICAgICBjbGFzcz0icHJpbWFyeSIKICAgICBk%0D%0APSJtIDE3My41NjEsMTcxLjYxNSBjIC0wLjY1OTksLTEuMDA0NTcgLTEuMzQ4NTIsLTEuOTg5OTcg%0D%0ALTIuMDY1LC0yLjk1NSAtMC44MzQ5NiwtMS4xMjY0MSAtMS43MDQ3MSwt...

Reviews

No reviews yet.