Skip to content

Telegram-Nordic-Theme by itslu666

Screenshot of Telegram-Nordic-Theme

Details

Authoritslu666

LicenseNo License

Categoryweb.telegram.org

Created

Updated

Code size3.1 kB

Code checksum16617ccd

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A very simple and customizable theme

Notes

This is not a full theme, it only covers the most visible content on the website. Will update eventually.

Feel free to submit a GitHub issue tho!

Source code

/* ==UserStyle==
@name         Telegram-Nordic-Theme
@version      20241130.00.44
@namespace    https://userstyles.world/user/itslu666
@description  A very simple and customizable theme
@author       itslu666
@license      No License
==/UserStyle== */

@-moz-document domain("telegram.org") {
/* colors */
:root {
    --text: #eceff4;
    --text-darker: #e5e9f0;
    --text-darker-darker: #a6afbe;
    --text-darker-darker-darker: #5a6271;

    --background-darker-darker: #3b4252;
    --background-darker: #434c5e;
    --background-darker-darker-darker: #2e3440;
    --background: #4c566a;
}

/* Top */
.TabList,
.left-header {
    background: var(--background-darker-darker);
}

.SearchInput {
    background: var(--background-darker-darker-darker);
    border: 0;
}

/* chats */
.chat-list {
    background: var(--background);
}

.status,
.info {
    background: var(--background);
}

.fullName {
    color: var(--text);
}

.ListItem .ListItem-button,
.MiddleHeader {
    background: var(--background);
}

.last-message.shared-canvas-container span:nth-of-type(3),
.LastMessageMeta span:nth-of-type(1),
.user-status,
.MessageMeta span:nth-of-type(1) {
    color: var(--text-darker-darker);
}

.messages-layout {
    background: var(--background-darker);
}

/* other person */
.message-content.peer-color-6.text.has-shadow.has-solid-background.has-appendix.has-footer,
.message-content.peer-color-5.text.has-shadow.has-solid-background.has-appendix.has-footer,
.message-content.peer-color-3.text.has-shadow.has-solid-background.has-appendix.has-footer,
.message-content.peer-color-0.text.has-shadow.has-solid-background.has-appendix.has-footer,
.message-content.peer-color-0.text.has-shadow.has-solid-background.has-footer,
.message-content.peer-color-5.text.has-shadow.has-solid-background.has-footer,
.EmbeddedMessage.peer-color-count-1,
.message-content.peer-color-3.text.has-shadow.has-solid-background.has-footer,
.sticky-date.interactive span:nth-of-type(1) {
    background: var(--background-darker-darker-darker);
    color: var(--text)
}

/* you */
.message-content.peer-color-count-1.text.has-shadow.has-solid-background.has-appendix.has-footer,
.message-content.peer-color-count-1.text.has-shadow.has-solid-background.has-footer,
.message-content.peer-color-count-1.no-text.document.has-shadow.has-solid-background.no-footer,
.WebPage,
.EmbeddedMessage.peer-color-6,
.message-content.peer-color-count-1.no-text.document.has-shadow.has-solid-background.has-appendix.no-footer {
    background: var(--text-darker-darker-darker);
    color: var(--text)
}

/* message box */
.Button.cxwA6gDO.default.secondary.round,
.composer-wrapper,
.Button.record.main-button.default.secondary.round.click-allowed,
.HeaderPinnedMessageWrapper.tE8PJzpv.lrBhOgvf.opacity-transition.fast.shown.open,
.Transition.shared-media-transition,
.RightHeader, .TabList.no-scrollbar {
    background: var(--background-darker-darker-darker);
    color: var(--text-darker-darker);
}

svg {
    display: None;
}
}

Reviews

No reviews yet.