Skip to content

Telegram Themes REIMAGINED by amaruelle

Screenshot of Telegram Themes REIMAGINED

Details

Authoramaruelle

LicenseCC Zero

Categoryweb.telegram.org

Created

Updated

Size9.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

All accents on dark/light modes can be changed with just only color picker (others will be automatically changed depending on primary), so you can feel the desktop Telegram experience!

Notes

  • Initial release

Source code

/* ==UserStyle==
@name           web.telegram.org - 1/18/2023, 3:36:15 PM
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@preprocessor stylus
@var color accentColor "Accent Color" #fff
@var select theme "Select theme" ["dark:Dark theme", "light:Light theme"]
==/UserStyle== */

@-moz-document domain("web.telegram.org") {
    
    if theme == dark
    {
        .bubble.is-out{
            --message-background-color: accentColor;
        }
        
        :root{
            --primary-color: accentColor;
            --avatar-color-top: lightness(accentColor, 70);
            --avatar-color-bottom: lightness(accentColor, 50);
            --message-out-primary-color: lighten(accentColor, 30);
            --light-filled-message-primary-color: lightness(accentColor, 20);
            --dark-primary-color: darken(accentColor, 10);
            --light-primary-color: lightness(accentColor, 20);
            --message-highlightning-color: transparentify(accentColor, 0.2)!important;
            --chatlist-status-color: complement(accentColor);
            --link-color:  lighten(complement(accentColor), 20);
            --light-secondary-text-color: transparentify(complement(accentColor), 0.1)!important;
            --message-checkbox-color: complement(accentColor);
        }
        
        .bubble-call-subtitle.arrow-green:before{
            color: lightness(accentColor, 30);
        }
        
        .reply:hover{
            background-color: darken(accentColor, 30)!important;
        }

        .bubble.is-out .time .inner:after, .bubble.is-out .time:after{
            color: lightness(accentColor, 80);
        }

        .bubble.is-out .time .inner{
            color: lightness(accentColor, 80);
        }

        .bubble.is-out .bubble-call-subtitle, .bubble.is-out .contact-number, .bubble.is-out .document-size{
            --message-out-status-color: lightness(accentColor, 80);
        }
        
        .menu-horizontal-div-item.active .c-ripple__circle, html.no-touch .menu-horizontal-div-item.active:active, html.no-touch .menu-horizontal-div-item.active:hover{
            background-color: saturation(lightness(accentColor, 10), 10);
        }
        
        .document-ico{
            background-color: lighten(accentColor, 30)
        }
        
                .bubble-content{
            border-radius: 20px!important;
            padding: 5px!important;
        }
        
        .bubble-tail{
            display: none!important;
        }
        
        .bubble{
            margin: 0 auto 0.5rem;
        }
        
        .bubble.is-in.is-group-last.can-have-tail .bubble-content, .bubble.is-in.is-group-last.can-have-tail .poll-footer-button{
            border-bottom-left-radius: 20px!important;
        }
        
        .bubble.is-out.is-group-last.can-have-tail .bubble-content, .bubble.is-out.is-group-last.can-have-tail .poll-footer-button{
            border-bottom-right-radius: 20px!important;
        }
        
        .attachment.media-container{
            border-radius: 20px!important;
        }
        
        .sidebar-header.topbar{
            border-radius: 20px!important;
            margin-top: 10px!important;
            margin-right: 5px!important;
            margin-left: 5px!important;
            padding: 5px;
            width: 98%;
        }
        
        .topbar:before{
            border-radius: 20px!important;
        }
        
       .sidebar-content.sidebar-slider.tabs-container, #column-right{
            border-top-left-radius: 20px!important;
            border-bottom-left-radius: 20px!important;
        }
        
        .sidebar-left-section.no-delimiter{
            border-radius: 20px!important;
            margin: 10px;
        }
        
        .pinned-audio.pinned-container.is-floating{
            border-radius: 20px!important;
            margin: 5px 0;
        }
        
        .pinned-audio-progress-wrapper{
            margin: auto auto;
            width: 95%;
        }
        
        .pinned-container.is-floating:before{
            border-radius: 20px!important;
        }
        
        .bubble.with-reply-markup.bubble-content{
            border-bottom-right-radius: 20px!important;
        }
        
        .bubbles-inner{
            width: 95%!important;
            margin: auto auto;
        }
        
        .pinned-message.pinned-container.is-floating{
            margin: 5px 0!important;
            border-radius: 20px!important;
            box-shadow: 1px 0px 5px 5px rgba(0,0,0,.1);
        }
        
        .menu-horizontal-div-item.rp.active{
            border-radius: 20px!important;
            margin: 5px 10px!important;
            background-color: darken(accentColor, 30);
            height: 75%
        }
        
        .menu-horizontal-div-item.rp{
            border-radius: 20px!important;
            margin: 5px 10px!important;
            height: 75%
        }
        
        .menu-horizontal-div i{
            display: none!important;
        }
        
        .html.no-touch .menu-horizontal-div-item:active, html.no-touch .menu-horizontal-div-item:hover{
            border-radius: 20px!important;
        }
    }
    
    if theme == light
    {
        .bubble.is-out{
            --message-background-color: lighten(accentColor, 30);
        }
        
        :root{
            --primary-color: accentColor;
            --avatar-color-top: lightness(accentColor, 60);
            --avatar-color-bottom: lightness(accentColor, 40);
            --message-out-primary-color: accentColor;
            --light-filled-message-primary-color: lightness(accentColor, 90);
            --dark-primary-color: darken(accentColor, 10);
            --light-primary-color: lightness(accentColor, 90);
            --message-highlightning-color: transparentify(accentColor, 0.2)!important;
            --chatlist-status-color: complement(accentColor);
            --link-color:  complement(accentColor);
            --light-secondary-text-color: transparentify(complement(accentColor), 0.1)!important;
            --message-checkbox-color: complement(accentColor);
        }
        
        .document-ico{
            background-color: accentColor;
        }
        
        .bubble.is-out .bubble-call-subtitle, .bubble.is-out .contact-number, .bubble.is-out .document-size{
            --message-out-status-color: accentColor;
        }
        
        .bubble-content{
            border-radius: 20px!important;
            padding: 5px!important;
        }
        
        .bubble-tail{
            display: none!important;
        }
        
        .bubble{
            margin: 0 auto 0.5rem;
        }
        
        .bubble.is-in.is-group-last.can-have-tail .bubble-content, .bubble.is-in.is-group-last.can-have-tail .poll-footer-button{
            border-bottom-left-radius: 20px!important;
        }
        
        .bubble.is-out.is-group-last.can-have-tail .bubble-content, .bubble.is-out.is-group-last.can-have-tail .poll-footer-button{
            border-bottom-right-radius: 20px!important;
        }
        
        .attachment.media-container{
            border-radius: 20px!important;
        }
        
        .sidebar-header.topbar{
            border-radius: 20px!important;
            margin-top: 10px!important;
            margin-right: 5px!important;
            margin-left: 5px!important;
            padding: 5px;
            width: 98%;
        }
        
        .topbar:before{
            border-radius: 20px!important;
        }
        
       .sidebar-content.sidebar-slider.tabs-container, #column-right{
            border-top-left-radius: 20px!important;
            border-bottom-left-radius: 20px!important;
        }
        
        .sidebar-left-section.no-delimiter{
            border-radius: 20px!important;
            margin: 10px;
        }
        
        .pinned-container-wrapper.rp{
            border-radius: 20px!important;
        }
        
        .pinned-container.is-floating:before{
            border: none!important;
        }
        
        .bubble.with-reply-markup.bubble-content{
            border-bottom-right-radius: 20px!important;
        }
        
        .bubbles-inner{
            width: 95%!important;
            margin: auto auto;
        }
        
        .pinned-message.pinned-container.is-floating{
            margin: 5px 0!important;
            border-radius: 20px!important;
            box-shadow: 1px 0px 5px 5px rgba(0,0,0,.1);
        }
        
        .menu-horizontal-div-item.rp.active{
            border-radius: 20px!important;
            margin: 5px 10px!important;
            background-color: lighten(accentColor, 30);
            height: 75%
        }
        
        .menu-horizontal-div-item.rp{
            border-radius: 20px!important;
            margin: 5px 10px!important;
            height: 75%
        }
        
        .menu-horizontal-div i{
            display: none!important;
        }
        
        .html.no-touch .menu-horizontal-div-item:active, html.no-touch .menu-horizontal-div-item:hover{
            border-radius: 20px!important;
        }
    }
}

Reviews

No reviews yet.