Skip to content

discord dracula theme by demonkingswarn

Details

Authordemonkingswarn

LicenseNo License

Categorydiscord

Created

Updated

Size37 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

make your discord clean and welcoming.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         discord dracula theme
@version      20220303.18.49
@namespace    userstyles.world/user/demonkingswarn
@description  make your discord clean and welcoming.
@author       demonkingswarn
@license      No License
==/UserStyle== */

@-moz-document domain("discord.com") {
.theme-dark,
.theme-light,
:root {
       --background-tertiary: #1e1f29 !important;
    --background-secondary-alt: #44475a !important;
     --background-secondary: #1e1f29 !important;

    --background-primary: #282a36 !important;
    --background-accent: #44475a !important;
    --background-floating: #1e1f29 !important;
    --background-modifier-hover: #f8f8f201 !important;
    --background-modifier-active: #f8f8f203 !important;
    --background-modifier-selected: #f8f8f206 !important;
    --background-modifier-accent: #f8f8f206 !important;
    --channeltextarea-background: var(--background-accent) !important;
    --deprecated-card-bg: #282a3602 !important;
    --deprecated-card-editable-bg: #282a3610 !important;
    --activity-card-background: var(--background-primary) !important;
    --channels-default: #e6e6e6 !important;

    --text-muted: #bfbfbf !important;
    --text-normal: #f8f8f2 !important; 
    --interactive-normal: #f8f8f2 !important;
    --interactive-hover: #bd93f9 !important;
    --interactive-active: #f8f8f2 !important;
    --interactive-muted: #bfbfbf !important;
    --header-secondary: #e6e6e6 !important;
    --toast-background: var(--background-primary) !important;
    --toast-header: var(--background-tertiary) !important;
    --toast-contents: var(--background-secondary) !important;
    --toast-box-shadow: #1e1f2920 !important;
    --toast-border: var(--background-tertiary) !important;

}

html, body {
    font-family: 'Roboto' !important;
}


#private-channels > .da-selected > .da-layout {
    background-color: #44475a !important;
}
.bd-unread > .da-pill {
    display: none;
}

.da-headerSpotify {
    background-color: #caa9fa;
}

.da-headerPlaying {
    background-color: #ff79c6;
}

.da-activityUserPopout > .da-bodyNormal > .da-content > h3 > a, div > span > a{
    color: #f8f8f2 !important;
}

.da-acronym {
    background-color: #282a36;
}

.da-selected > .da-acronym {
    background-color: #caa9fa !important;
}

.bd-selected > .da-blobContainer > .da-wrapper > svg {
    border-radius: 16px !important;
    border: solid 4px #ff79c6 !important;
}
.bd-unread > .da-blobContainer > .da-wrapper > svg {
    border: solid 4px #caa9fa;
    border-radius: 26px;
    transition: 250ms ease;
}

.bd-unread > .da-blobContainer:hover > .da-wrapper > svg {
    border: solid 4px #ff79c6;
    border-radius: 16px;
}

.mention {
    background-color: #caa9fa25;
    color: #caa9fa;
    transition: 250ms ease;
}

.mention:hover {
    background-color: #caa9fa;
    color: #f8f8f2;
}

.da-mentioned {
    background-color: #caa9fa25;
    transition: 250ms ease;
}

.da-mentioned:hover {
    background-color: #caa9fa55 !important;
}

.da-mentioned::before {
    background-color: #ff79c6 !important;
}

a {
    color: #ff79c6 !important;
    text-decoration: none;
    font-style: italic;
    transition: 250ms ease !important;
}

.da-attachment > .da-icon {
    display:none;
}

a:hover{
    color: #bd93f9 !important;
    text-decoration: none !important;
}

.da-selected > div >  .da-content {
    background-color: var(--background-accent);
    
}
.da-content > div {
    color: #bfbfbf;
}

.modeUnread-1zpFdA > .da-content {
    border-radius: 4px;
    border: solid 2px #282a36;
    color: #f8f8f2 !important;
    background-color: #282a36;
    transition: 250ms ease;
}

.modeUnread-1zpFdA > .da-unread {
    display: none;
}

.modeUnread-1zpFdA > .da-content > .da-icon{
    color: #bd93f9;
}

.modeUnread-1zpFdA > .da-content:hover > .da-icon{
    color: #ff79c6;
}

.modeUnread-1zpFdA > .da-content:hover {
    border: solid 2px #ff79c6 !important;
}


.scroller-1IfWg_::-webkit-scrollbar-thumb,
.scrollerThemed-2oenus.themeDark-2cjlUp .scroller-2FKFPG::-webkit-scrollbar-thumb,
.theme-dark .scrollerWrap-2lJEkd .scroller-2FKFPG::-webkit-scrollbar-thumb,
.listScroller-2_vlfo::-webkit-scrollbar-thumb,
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background-color: var(--background-secondary-alt) !important;
    border-color: transparent !important;
}

.scrollableContainer-2NUZem {
    background-color: var(--channeltextarea-background) !important;
}

.scroller-2FKFPG::-webkit-scrollbar-corner {
    background-color: transparent !important;
}

.scrollerThemed-2oenus.themeDark-2cjlUp .scroller-2FKFPG::-webkit-scrollbar-track,
.theme-dark .scrollerWrap-2lJEkd .scroller-2FKFPG::-webkit-scrollbar-track {
    background-color: transparent !important;
    border-color: transparent !important;
}

.theme-dark .scrollerThemed-2oenus.themedWithTrack-q8E3vB .scroller-2FKFPG::-webkit-scrollbar-track-piece {
    background-color: transparent !important;
    border: 4px solid var(--background-primary) !important;
    border-radius: 8px !important;
}

.theme-dark .scrollerThemed-2oenus.themedWithTrack-q8E3vB .scroller-2FKFPG::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-color: transparent !important;
}

.scrollableContainer-2NUZem::-webkit-scrollbar-thumb {
    background-color: transparent !important;
    border-color: transparent !important;
}

.scrollableContainer-2NUZem::-webkit-scrollbar-corner {
    background-color: transparent !important;
}

.scrollableContainer-2NUZem::-webkit-scrollbar-track {
    background-color: transparent !important;
    border-color: transparent !important;
}

.scrollableContainer-2NUZem::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

.scrollableContainer-2NUZem::-webkit-scrollbar-thumb {
    background-color: var(--background-secondary) !important;
    border-color: transparent !important;
}

.theme-dark .container-1D34oG {
    background-color: var(--background-primary);
}
.theme-dark .outer-1AjyKL.active-1xchHY,
.theme-dark .outer-1AjyKL.interactive-3B9GmY:hover {
    background-color: black;
}

.theme-dark .inset-3sAvek {
    background-color: var(--background-secondary);
}

.panels-j1Uci_ {
    background-color: var(--background-tertiary);
}

.theme-dark .modal-yWgWj- {
    background-color: var(--background-secondary);
    -webkit-box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0,0,0,.2);
}

.theme-dark .friendSelected-1sa4bG {
    background-color: var(--background-modifier-hover);
}

.inspector-sdLnLS {
    background-color: var(--background-tertiary);
}

.navButtonActive-3RPAJy {
    background-color: var(--background-modifier-active) !important;
}
.navButton-3Mnpqt:hover {
    background-color: var(--background-modifier-hover);
}

.theme-dark .headerNormal-T_seeN {
    background-color: var(--background-tertiary);
}

.theme-dark .bodyInner-245q0L, /* For Stable, remove later */
.theme-dark .body-3iLsc4, /* For Canary */
.theme-dark .footer-1fjuF6 {
    background-color: var(--background-secondary);
}

.emojiItem-14v6tW.emojiItemSelected-1aLkfV {
    background-color: var(--background-modifier-hover);
}

:focus {
    outline: none !important;
}

.theme-dark .closeButton-1tv5uR {
    border-color: var(--background-secondary-alt);
}

.theme-dark .root-1gCeng {
    background-color: var(--background-secondary);
    -webkit-box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px var(--background-tertiary), 0 2px 10px 0 rgba(0,0,0,.2);
}

.theme-dark .footer-3rDWdC, /* For Stable */
.theme-dark .footer-2gL1pp /* For Canary */ {
    background-color: var(--background-tertiary);
    -webkit-box-shadow: inset 0 1px 0 var(--background-modifier-active);
    box-shadow: inset 0 1px 0 var(--background-modifier-selected);
}

.theme-dark .lookFilled-1Gx00P.colorPrimary-3b3xI6 {
    background-color: var(--background-secondary-alt);
}

.theme-dark .lookFilled-1Gx00P.colorPrimary-3b3xI6:active,
.theme-dark .lookFilled-1Gx00P.colorPrimary-3b3xI6:hover {
    background-color: var(--background-accent);
}

.themeDefault-24hCdX {
    background-color: var(--background-secondary-alt);
}
.theme-dark .closeButton-1tv5uR:hover {
    background-color: var(--background-secondary-alt);
}
.theme-dark .card-FDVird:before {
    background-color: var(--background-secondary);
    border-color: var(--background-tertiary);
}

.theme-dark .game-1ipmAa {
    -webkit-box-shadow: 0 1px 0 0 var(--background-modifier-accent);
    box-shadow: 0 1px 0 0 var(--background-modifier-accent);
}

.theme-dark .notDetected-33MY4s,
.theme-light .notDetected-33MY4s {
    background-color: var(--background-secondary-alt);
}

.theme-dark .overlayToggleIconOn-3UNmty .fill-1ugeBG {
    fill: var(--background-secondary-alt);
}

.theme-dark .button-2CgfFz {
    background-color: var(--background-secondary);
    -webkit-box-shadow: 0 0 0 1px var(--background-tertiary), 0 1px 5px 0 rgba(0,0,0,.3);
    box-shadow: 0 0 0 1px var(--background-tertiary), 0 1px 5px 0 rgba(0,0,0,.3);
}

.theme-dark .checkbox-1ix_J3 {
    border-color: var(--background-secondary-alt);
}

.theme-dark .item-3eFBNF {
    -webkit-box-shadow: inset 0 -1px 0 0 var(--background-modifier-accent);
    box-shadow: inset 0 -1px 0 0 var(--background-modifier-accent);
}

.theme-dark .codeRedemptionRedirect-1wVR4b {
    background-color: var(--background-secondary);
    border-color: var(--background-tertiary);
}

.theme-dark .bar-2Qqk5Z {
    background: var(--background-secondary-alt);
}

.theme-dark .markDash-3hAolZ {
    background: var(--background-secondary-alt);
}

.theme-dark .quickMessage-1yeL4E {
    background-color: var(--background-primary);
    border-color: var(--background-modifier-hover);
}

.theme-dark .button-2CgfFz:hover {
    background-color: var(--background-primary);
    -webkit-box-shadow: 0 0 0 1px var(--background-tertia...

Reviews

No reviews yet.