Skip to content

Dracula Discord by monoxane

Screenshot of Dracula Discord

Details

Authormonoxane

LicenseNo License

Categorydiscord

Created

Updated

Size7.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

The Dracula theme for Discord

Notes

Source code

/* ==UserStyle==
@name         Dracula Discord
@version      20211220.02.25
@namespace    userstyles.world/user/monoxane
@description  The Dracula theme for Discord
@author       monoxane
@license      No License
==/UserStyle== */
@-moz-document domain("discord.com") {   
    .theme-dark {
        /* Extended Dracula Colours */
        --background-primary: #282a36;
        --background-secondary: #21222C;
        --background-secondary-alt: #191A21;
        --background-tertiary: #191A21;
        --current-line: #44475a;
        --selection: #44475a;
        --foreground: #f8f8f2;
        --comment: #6272a4;
        --cyan: #8be9fd;
        --green: #50fa7b;
        --orange: #ffb86c;
        --pink: #ff79c6;
        --purple: #bd93f9;
        --red: #ff5555;
        --yellow: #f1fa8c;

        /* Discord Vars */
        --header-primary: #f8f8f2;
        --header-secondary: #6272a4;
        --text-normal: #f8f8f2;
        --text-muted: #6272a4;
        --text-link: hsl(197, calc(var(--saturation-factor, 1)*100%), 47.8%);
        --text-link-low-saturation: hsl(197, calc(var(--saturation-factor, 1)*100%), 52.9%);
        --text-positive: hsl(139, calc(var(--saturation-factor, 1)*66.8%), 58.6%);
        --text-warning: hsl(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%);
        --text-danger: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
        --text-brand: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
        --interactive-normal: #6272a4;
        --interactive-hover: #f8f8f2;
        --interactive-active: #f8f8f2;
        --interactive-muted: #6272a4;
        --background-accent: #6272a4;
        --background-floating: #18191c;
        --background-nested-floating: #44475a;
        --background-modifier-hover: #282a36;
        --background-modifier-active: #44475a;
        --background-modifier-selected: #282a36;
        --background-modifier-accent: hsla(0, 0%, 100%, 0.06);
        --info-positive-text: #fff;
        --info-warning-text: #fff;
        --info-danger-text: #fff;
        --info-help-background: hsla(197, calc(var(--saturation-factor, 1)*100%), 47.8%, 0.1);
        --info-help-foreground: hsl(197, calc(var(--saturation-factor, 1)*100%), 47.8%);
        --info-help-text: #fff;
        --status-warning-text: #000;
        --scrollbar-thin-thumb: #191A21;
        --scrollbar-thin-track: #21222C;
        --scrollbar-auto-thumb: #191A21;
        --scrollbar-auto-track: #21222C;
        --scrollbar-auto-scrollbar-color-thumb: #191A21;
        --scrollbar-auto-scrollbar-color-track: #282a36;
        --elevation-stroke: 0 0 0 1px rgba(4, 4, 5, 0.15);
        --elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
        --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.16);
        --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
        --logo-primary: #fff;
        --control-brand-foreground: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
        --control-brand-foreground-new: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
        --background-mentioned: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.1);
        --background-mentioned-hover: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.08);
        --background-message-hover: rgba(4, 4, 5, 0.07);
        --channels-default: #8e9297;
        --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
        --channeltextarea-background: var(--background-secondary);
        --activity-card-background: #202225;
        --textbox-markdown-syntax: #8e9297;
        --brand-experiment: #6272a4;
        --modal-background: var(--background-secondary);
        --modal-footer-background: var(--background-tertiary);
        --status-danger: var(--red)
    }

    div[class^="peopleColumn"] {
        background-color: var(--background-primary);
    }

    div[id="---new-messages-bar"] {
        border-top: thin solid var(--red) !important;
    }
    span[class^="unreadPill"] {
        background-color: var(--red) !important;
    }

    textarea[class^="inputDefault"],
    input[class^="inputDefault"] {
        background-color: var(--background-secondary) !important;
    }

    div[aria-controls^="delete"] {
        outline: 1px solid var(--status-danger);
    }
    
    div[data-list-id^="forum-channel-list"] {
        background-color: var(--background-primary) !important;
    }
    
    div[class^="mainCard-"] {
        background-color: var(--background-secondary) !important;
    }

    /* Syntax Highlighting https://github.com/dracula/highlightjs */
    .hljs {
        display: block;
        overflow-x: auto;
        padding: 0.5em;
        background: var(--background-secondary);
    }

    .hljs-built_in,
    .hljs-selector-tag,
    .hljs-section,
    .hljs-link {
        color: var(--cyan);
    }

    .hljs-keyword {
        color: var(--pink);
    }

    .hljs {
        color: var(--foreground);
    }

    .hljs-subst {
        color: var(--cyan);
    }

    .hljs-title,
    .hljs-attr,
    .hljs-meta-keyword {
        color: var(--green);
    }

    .hljs-string,
    .hljs-meta,
    .hljs-name,
    .hljs-type,
    .hljs-symbol,
    .hljs-bullet,
    .hljs-addition,
    .hljs-variable,
    .hljs-template-tag,
    .hljs-template-variable {
        color: var(--yellow);
    }

    .hljs-comment,
    .hljs-quote,
    .hljs-deletion {
        color: var(--comment);
    }

    .hljs-literal,
    .hljs-number {
        color: var(--purple);
    }

    /* Modal Content */
    [class^="invite-"],
    [class^="focusLock"] [class^="message-"] {
        background: var(--background-secondary) !important;
        border-color: var(--background-tertiary) !important;
    }

    [class^="focusLock"] [class^="message-"] {
        background: var(--background-primary) !important;
    }

    /* Channel Settings */
    [class^="bar-"],
    [class^="markDash-"] {
        background: var(--interactive-muted) !important;
    }

    [class^="control-"] [class^="container-"] {
        background-color: var(--interactive-muted) !important;
    }

    /* Nitro */
    svg[class^="tierIcon-"],
    svg[class^="premiumIcon-"] {
        color: var(--purple);
    }

    svg[fill="#FF73FA"] {
        fill: var(--purple);
    }

    [class^="progressWithSubscriptions-"] rect[class^="foreground-"] {
        color: var(--purple) !important;
    }

    div[class^="tierCurrent-"],
    div[class^="tierAcomplished-"] {
        background: var(--purple) !important;
    }

    /* Server Owner Crown */
    svg[class^="ownerIcon-"] {
        color: var(--orange);
    }

    /* Status Indicators */
    rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"] {
        fill: var(--green);
    }
    rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"] {
        fill: var(--orange);
    }
    rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"] {
        fill: var(--red);
    }
    rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] {
        fill: var(--purple);
    }
    
    /* piss off ya gronks */
    [aria-label="Send a gift"] {
        visibility: hidden;
    }

}

Reviews

No reviews yet.