Modern Discord Theme by mukul1127

Details

Authormukul1127

LicenseMIT

Categorytheme, dark-theme, discord, css, stylus, usercss

Created3 years, 2 months ago

Updated2 years, 11 months ago

Size446 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

My Modern Discord Theme consisting of Alexis Modern Discord Theme, Dracula, and Better Badges

Notes

How To Install

Beautiful Discord - Recommended For only Themes

Install Python
Open CMD
Run These Commands in CMD:

python -m pip install -U https://github.com/leovoel/BeautifulDiscord/archive/master.zip

beautifuldiscord --css <path/to/theme.css>

Note: Replace "<path/to/theme.css>" With The Path To The Theme Without The Arrows

To Revert, Run

beautifuldiscord --revert

Better Discord - Recommended for Themes and Plugins

Install Better Discord
Download the Theme and put it in "%AppData%\BetterDiscord\themes"
Open Discord, Go into settings, then in the "BETTERDISCORD" section choose Themes then enable "Modern Discord Theme"

If you don't see the BETTERDISCORD Section Look at the BetterDiscord FAQ

To Revert,

Download and Run BetterDiscord Installer
Accept Terms of Service and Click Uninstall BetterDiscord
Select Discord Version

Stylus - For Web

Install Stylus Chrome Link, Firefox Link
Goto Stylus/Stylish Theme, click "Install Style"

To Revert, Uninstall Stylus Extension or Remove "Modern Discord Theme" from Stylus.

Last Note

PS You May Use My Code For Whatever I Don't Really Care At All.
Note for Developers: This Theme Was Meant For My Friends only.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name           Modern Discord Theme
@namespace      https://github.com/Mukul1127/Discord-Theme
@version        1.5
@description    My Modern Discord Theme consisting of Alexis Modern Discord Theme, Dracula, and Better Badges
@author         mukul1127
==/UserStyle== */
@-moz-document url-prefix("https://discord.com/channels"),
url-prefix("https://discord.com/discovery"),
url-prefix("https://discord.com/store"),
url-prefix("https://discord.com/guild-discovery"),
url-prefix("https://ptb.discord.com/channels"),
url-prefix("https://ptb.discord.com/discovery"),
url-prefix("https://ptb.discord.com/store"),
url-prefix("https://ptb.discord.com/guild-discovery"),
url-prefix("https://canary.discord.com/channels"),
url-prefix("https://canary.discord.com/discovery"),
url-prefix("https://canary.discord.com/store"),
url-prefix("https://canary.discord.com/guild-discovery"),
url-prefix("https://discord.com/app"),
url-prefix("https://ptb.discord.com/app"),
url-prefix("https://canary.discord.com/app") {
	@import url('https://mr-miner1.github.io/Better-Badges/src/badges.css');
	
	
	
	
	:root {
    --theme-version: "1.6 "
}

[id^="Modern Discord Theme"] .bd-addon-header .bd-version:before {
    content: "v" var(--theme-version)
}

.info-1VyQPT:after {
    content: "Modern Discord Theme - " var(--theme-version);
    top: 16px;
    color: var(--text-muted);
    position: relative
}

[id^="Modern Discord Theme"] .bd-addon-header .bd-version {
    font-size: 0
}

[id^="Modern Discord Theme"] .bd-addon-header .bd-version:before {
    font-size: 14px
}

:root {
    --font-primary: "Segoe UI", Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display: "Bahnschrift", Ginto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-code: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    --font-korean: Whitney, "Apple SD Gothic Neo", "NanumBarunGothic", "맑은 고딕", "Malgun Gothic", Gulim, 굴림, Dotum, 돋움, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-japanese: Whitney, Hiragino Sans, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-chinese-simplified: Whitney, "Microsoft YaHei New", 微软雅黑, "Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-chinese-traditional: Whitney, "Microsoft JhengHei", 微軟正黑體, "Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑, 宋体, SimSun, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --user-avatar-size: 32px;
    --app-windowbar-height: var(--server-container);
    --app-corner-size: 0px;
    --server-size: var(--server-icon-size, var(--HSL-size, 35px));
    --server-margin: var(--server-spacing, var(--HSL-spacing, 10px));
    --server-container: calc(var(--server-size) + (2 * var(--server-outer-margin)));
    --user-outer-right-margin: calc(var(--username-button-right-margin) + (var(--windowcontrol-buttons-width) * 3));
    --user-outer-left-margin: calc(100vw - var(--usernamebutton-width) - var(--user-outer-right-margin));
    --dropdown-button-width: calc(220px - (var(--menu-container-padding) * 2));
    --windowcontrol-buttons-width: 45px;
    --windowcontrol-buttons-height: 32px;
    --avatar-speaking-color: rgb(59, 165, 93);
    --app-focused-duration: 0.45s;
    --app-focused-transition: background-color var(--app-focused-duration) ease-in-out, backdrop-filter 0s linear var(--app-focused-duration);
    --blur-header: blur(0px);
    --blur-sidebar: blur(0px);
    --button-blur: blur(0px);
}
.modeSelected-346R90 .content-1x5b-n:before {
    content: "";
    width: 3px;
    height: 16px;
    background-color: var(--brand-experiment-500);
    position: absolute;
    left: 0;
    border-radius: 1.5px;
    animation: selection-indicator 333ms cubic-bezier(0.1, 0.9, 0.2, 1);
    transform: scaleY(1);
}
@keyframes selection-indicator {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}
.theme-dark .container-1D34oG,
.theme-light .container-1D34oG {
    background-color: var(--background-primary);
}
.clickable-536fPF,
.item-PXvHYJ,
.mainContent-u_9PKf {
    cursor: default;
}
.search-36MZv- .search-2oPWTC .searchBar-3dMhjb {
    width: 24px;
    padding: 0;
    background: 0 0;
    border-radius: 6px;
}
.search-36MZv- .search-2oPWTC .searchBar-3dMhjb .icon-38sknP {
    cursor: pointer;
}
.search-2oPWTC.open-6_Y_aH .searchBar-3dMhjb .icon-38sknP {
    cursor: text;
}
.search-2oPWTC.open-6_Y_aH .searchBar-3dMhjb .icon-38sknP.clear-1pMieT {
    cursor: pointer;
}
.search-2oPWTC.open-6_Y_aH .searchBar-3dMhjb {
    width: 320px;
    height: 40px;
    padding: 0;
    background-color: var(--search-bar);
}
.search-2oPWTC .DraftEditor-root .public-DraftEditor-content,
.search-2oPWTC .DraftEditor-root .public-DraftEditorPlaceholder-root {
    line-height: 40px;
}
.search-2oPWTC .DraftEditor-root .public-DraftEditor-content::-webkit-scrollbar,
.search-2oPWTC .DraftEditor-root .public-DraftEditorPlaceholder-root::-webkit-scrollbar {
    height: 0;
}
.search-2oPWTC .DraftEditor-root .DraftEditor-editorContainer {
    border-radius: 0;
    height: 40px;
}
.search-2oPWTC .DraftEditor-root {
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
    overflow: hidden;
    padding-top: 0;
}
.search-2oPWTC.open-6_Y_aH .icon-38sknP {
    height: 40px;
    width: 40px;
}
.search-36MZv- .search-2oPWTC .icon-3cZ1F_ {
    color: var(--interactive-normal);
}
.search-36MZv-:hover .search-2oPWTC .icon-3cZ1F_ {
    color: var(--interactive-hover);
}
.search-36MZv- .search-2oPWTC.open-6_Y_aH.focused-31_ccS .icon-3cZ1F_ {
    color: var(--text-muted);
}
.search-2oPWTC.open-6_Y_aH .iconContainer-O4O2CN {
    transform: scale(0.75);
}
.iconContainer-O4O2CN {
    width: 24px;
    height: 24px;
    transform: scale(1);
    transition: transform 0.24s ease;
}
#search-results {
    width: 320px !important;
}
.searchResultsWrap-3-pOjs #search-results {
    width: unset !important;
}
.search-2oPWTC .DraftEditor-root .public-DraftEditor-content,
.search-2oPWTC .DraftEditor-root .public-DraftEditorPlaceholder-root {
    padding-left: 8px;
    padding-bottom: 0;
    padding-top: 0;
}
.searchAnswer-3Dz2-q,
.searchFilter-2ESiM3 {
    background-color: transparent !important;
}
.searchAnswer-3Dz2-q span[data-text="true"],
.searchFilter-2ESiM3 span[data-text="true"] {
    background-color: var(--search-bar-cat);
    padding: 2px 4px;
    border-radius: 3px;
}
.avatarSpeaking-2IGMRN {
    --box-shadow: inset 0 0 0 2px var(--avatar-speaking-color), inset 0 0 0 3px var(--background-secondary);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}
.container-3O_wAf {
    background-color: transparent;
}
.base-3dtUhz .content-98HsJk .pageWrapper-1PgVDX {
    top: calc(-1 * (var(--app-windowbar-height)));
    height: calc(100% + var(--app-windowbar-height));
}
.base-3dtUhz .content-98HsJk .pageWrapper-1PgVDX:after {
    background-color: var(--background-transparent-header) !important;
    backdrop-filter: var(--blur-header);
    height: var(--app-windowbar-height);
    position: fixed;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    z-index: 9;
}
.base-3dtUhz .content-98HsJk .pageWrapper-1PgVDX::before {
    background-color: #4e28f3;
    height: calc(var(--app-windowbar-height) - 12px);
    position: fixed;
    content: "";
    left: 300px;
    top: 0;
    right: 12px;
    z-index: 8;
}
.searchHeader-14dJfk {
    margin-top: var(--app-windowbar-height);
}
.searchHeader-2I26nG {
    margin-top: calc(var(--app-windowbar-height) - 42px);
}
.headerImage-3X1tyY,
.searchHeader-2I26nG {
    border-radius: 0;
}
.headerImage-3X1tyY {
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    margin: -3px;
}
.searchHeader-2I26nG {
    overflow: hidden;
}
.searchHeader-2I26nG:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 1;
    border-radius: 8px;
    box-shadow: 0 0 0 8px var(--background-primary);
}
.pageWrapper-1PgVDX {
    background-color: var(--background-primary) !important;
    color: #fff;
}
.card-3DjzTQ,
.iconMask-3b8GzQ {
    background-color: var(--background-secondary) !important;
}
.card-3DjzTQ:hover,
.card-3DjzTQ:hover .iconMask-3b8GzQ,
.iconMask-3b8GzQ:hover,
.iconMask-3b8GzQ:hover .iconMask-3b8GzQ {
    background-color: var(--background-tertiary) !important;
}
.auto-Ge5KZx::-webkit-scrollbar-track {
    margin-top: var(--app-windowbar-height);
}
.auto-Ge5KZx::-webkit-scrollbar-track {
    background-color: var(--scrollbar-auto-track);
}
.auto-Ge5KZx::-webkit-scrollbar-thumb,
.auto-Ge5KZx::-webkit-scrollbar-track {
    border: 5px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}
.appMount-3lHmkl > .layerContainer-yqaFcK .layer-v9HyYc {
    -webkit-user-drag: none;
    -webkit-app-region: none;
}
.appMount-3lHmkl > .layerContainer-yqaFcK.zIndexDisabled-Pf4Txx {
    position: fixed !important;
    z-index: 1001 !important;
}
.css-3vaxre-menu {
    background-color: var(--background-floating);
    border-radius: 0 0 var(--context-menu-border-radius) var(--context-menu-border-radius);
    border-color: var(--background-modifier-accent);
}
.app-focused {
    --app-focused-transition: background-color var(--app-focused-duration) ease-in-out, backdrop-filter 0s linear 0s;
    --blur-header: blur(128px);
    --blur-sidebar: blur(32px);
    --button-blur: blur(64px);
}
.activity-2Gy-9S,
.header-2RyJ0Y,
.item-PXvHYJ,
.name-23GUGE,
.topic-TCb_qw,
.usernameFont-23TX-h {
    font-weight: 400;
}
.name-uJV0GL,
.username-1A8OIy {
    font-family: var(--font-display);
    font-weight: 400;
}
.guild-profile,
.theme-dark,
.theme-dark .theme-light,
.userInfo-iCloHO,
[aria-label="User Profil...

Reviews

No reviews yet.