Midnight discord theme

midnight.css

@import url("https://fonts.googleapis.com/css2?family=figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
    container-name: root;
    --custom-guild-list-padding: 12px;
    --panel-backdrop-filter: none;

    --background-base-lower: --bg-4;
    --custom-app-top-bar-height: 24px;
}

.panels_c48ade {
    max-width: calc(
        var(--custom-guild-sidebar-width) - var(--custom-guild-list-width)
    ) !important;
}

.base_c48ade {
    grid-template-areas:
        "titleBar titleBar titleBar"
        "guildsList notice notice"
        "guildsList channelsList page"
        "guildsList userPanel page" !important;
}

div[data-windows="true"] {
    height: 10px !important;

    & > div:first-child {
        justify-content: start;
        & > * {
            opacity: 0;
        }
        display: relative;
        &::before {
            content: "frsty";
            font-family: var(--font-code);
            padding-left: 14px;
            font-size: 15px;
            font-weight: 900;
            display: absolute;
            color: var(--text-4);
        }
    }

    & > div:last-child {
        gap: 4px;

        & > div:first-child,
        & > a {
            svg {
                height: 16px;
            }
        }
    }
}

body {
    container-name: body;

    /* font, change to '' for default discord font */
    --font-code: "Jetbrains Mono", "monospace";
    --font: "Inter";

    /* sizes */
    --gap: 8px; /* spacing between panels */
    --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */
}

.visual-refresh {
    /* panel separation */
    .guilds_c48ade /* server list */,
    .sidebarList_c48ade /* channel list (includes dm list) */,
    .panels_c48ade /* user panel */,
    .chat_f75fb0 > .subtitleContainer_f75fb0 /* chat titlebar */,
    .chatContent_f75fb0 /* chat */,
    .container_c8ffbb /* member list */,
    .content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */,
    .container__133bf > .container__9293f /* friends titlebar */,
    .container_f391e3 > .container__9293f /* message requests titlebar */,
    .homeWrapper__0920e > .container__9293f /* nitro page titlebar */,
    .container__01ae2 > .container__9293f /* vc chat titlebar */,
    .container_fb64c9 > .container__9293f /* new thread panel */,
    .peopleColumn__133bf /* online friends */,
    .nowPlayingColumn__133bf /* active now */,
    .scroller_c880e8 /* nitro page */,
    .container_f391e3 > .content_f75fb0 /* message requests */,
    .shop__6db1d /* shop */,
    .outer_c0bea0.panel_c0bea0 /* dm user panel */,
    .searchResultsWrap_a9e706 /* search results */,
    .container_f369db /* forum */,
    .chat_fb64c9 /* new thread panel */,
    .container_a592e1 /* server discovery */ {
        background-color: var(--background-base-lower);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-subtle);
        backdrop-filter: var(--panel-backdrop-filter);
    }

    .base_c48ade /* base grid */ {
        display: grid;
        grid-template-columns: [start] min-content [guildsEnd] min-content [channelsEnd] 1fr [end];
        grid-template-rows:
            [top] var(--custom-app-top-bar-height)
            [titleBarEnd] min-content [noticeEnd] 1fr [contentEnd] min-content [end];
        grid-template-areas:
            "titleBar titleBar titleBar"
            "guildsList notice notice"
            "guildsList channelsList page"
            "userPanel userPanel page";
        gap: 0 var(--gap);
    }

    .panels_c48ade /* user panel */ {
        width: 100%;
        position: static;
        grid-area: userPanel;
        margin: var(--gap) 0 0 0;
        overflow: hidden;
        max-width: calc(var(--custom-guild-sidebar-width) + var(--gap) + 4px);
    }

    .sidebar_c48ade /* server list + channel list + user panel group */ {
        margin: 0 0 var(--gap) var(--gap);
    }

    .guilds_c48ade /* server list */ {
        margin-bottom: 0;
    }
    .scroller_ef3116 /* server list inner scroller */ {
        padding-top: var(--custom-guild-list-padding);
    }

    .container__2637a /* channel list inner */ {
        padding-bottom: 0;
    }
    .clickable_f37cb1,
    .container__2637a /* channel list inner */,
    .header_f37cb1 /* server name */ {
        background: none;
    }

    /* fix discord's idiotic server banners */
    .bannerImage_f37cb1,
    .bannerImg_f37cb1 {
        width: 100%;
    }
    .bannerVisible_f37cb1 .headerEllipseBackdrop_f37cb1 {
        display: none;
    }
    .headerGlass_f37cb1 {
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .sidebar_c48ade:after /* server list + channel list bottom shadow */ {
        display: none;
    }

    .chat_f75fb0 /* chat group outer */,
    .container__133bf /* friends page group outer */,
    .page_c48ade {
        padding-bottom: var(--gap);
        padding-right: var(--gap);
        border: none !important;
        background: none;
    }
    .page_c48ade > .chat_f75fb0,
    .page_c48ade > .container__133bf {
        padding: 0;
    }

    .container__9293f /* friends, message requests, + other stuff titlebar */ {
        margin-bottom: var(--gap);
    }

    .subtitleContainer_f75fb0 /* chat titlebar  */ {
        margin-bottom: var(--gap);
    }
    .title_f75fb0 /* chat titlebar inner */ {
        border: none;
        background: none;
        margin-bottom: 0;
    }

    .chatContent_f75fb0 /* chat */ {
        overflow: hidden;
    }

    .container_c8ffbb /* member list */ {
        margin-left: var(--gap);
        overflow: hidden;
        height: auto;
        min-width: var(--custom-member-list-width);
    }
    .content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */ {
        margin-left: var(--gap);
        overflow: hidden;
        height: auto;
    }
    .members_c8ffbb /* member list inner */,
    .member_c8ffbb /* member list item */ {
        background: none;
    }

    .resizeHandle__01ae2 /* resize handle */ {
        background: transparent;
    }

    .privateChannels__35e86 /* dm list */,
    .scroller__99e7c /* dm list inner */ {
        background: none;
    }
    .scroller__99e7c /* dm list inner */ {
        margin-bottom: 0;
    }

    .tabBody__133bf /* online friends + active now group outer */ {
        background: none;
    }

    .nowPlayingColumn__133bf /* active now */ {
        margin-left: var(--gap);
    }
    .container__7d20c /* active now inner */ {
        background: none;
    }
    .scroller__7d20c /* active now inner */ {
        border: none;
    }

    .homeWrapper__0920e /* nitro page group inner */ {
        border: none;
        background: none;
    }
    .applicationStore_f07d62 /* nitro page group outer */ {
        background: none;
    }

    .shop__6db1d /* shop */ {
        overflow: hidden;
        height: auto;
    }
    .shop__08415 /* shop inner scroller */ {
        margin-top: calc(var(--custom-channel-header-height) * -1 - 16px);
    }

    .outer_c0bea0.panel_c0bea0 /* dm user panel */ {
        margin-left: var(--gap);
        overflow: hidden;
        height: auto;
        min-width: 340px;
    }

    .searchResultsWrap_a9e706 /* search results */ {
        margin-left: var(--gap);
    }

    .notice__6e2b9 /* notice banner */ {
        margin: 0 var(--gap) var(--gap) 0;
        border-radius: var(--radius-md);
    }

    .callContainer_cb9592 /* vc container */ {
        border-radius: var(--radius-lg) !important;
        border: 1px solid var(--border-subtle);
        overflow: hidden;
    }

    .container__01ae2 /* vc chat + titlebar group */ {
        border: none;
        background: none;
    }
    .chat_ee72fa::before /* vc chat shadow */ {
        display: none;
    }
    .channelChatWrapper_cb9592 /* vc chat + titlebar group outer */ {
        background: none;
    }

    .page_c48ade > .chatLayerWrapper__01ae2 /* forum/thread chat outer */ {
        margin: 0 var(--gap) var(--gap) 0;
        height: calc(100% - var(--gap));
    }
    .container__01ae2 /* forum/thread chat */ {
        padding-left: calc((var(--gap) - var(--chat-resize-handle-width)));
    }

    .container_fb64c9 /* new thread panel */ {
        background: none;
    }
    .chat_fb64c9::before /* new thread panel chat shadow */ {
        display: none;
    }

    .container_a592e1 /* server discovery */ {
        overflow: hidden;
    }
    .backdrop__8a7fc /* server discovery top bar */ {
        background-color: var(--background-base-lower);
    }

    .wrapper_cb9592 /* dm vc wrapper */ {
        background: none;
        margin-bottom: var(--gap);
    }

    /* remove excess background from settings  */
    .standardSidebarView__23e6b,
    .contentRegion__23e6b,
    .sidebarRegionScroller__23e6b,
    .contentRegionScroller__23e6b {
        background: none;
    }
    .standardSidebarView__23e6b {
        backdrop-filter: var(--panel-backdrop-filter);
    }

    /* remove excess backgrounds */
    .wrapper_d852db /* message loading placeholders */,
    .wrapper_d852db > .wrapper_fc8177 {
        background: none;
    }

    .newMessagesBar__0f481 /* unread messages bar */ {
        top: 12px;
        left: 12px;
        right: 12px;
        border-radius: var(--radius-sm);
        padding: 0 8px;
    }

    .bottom__7aaec /* channel list new unreads pill */ {
        bottom: 12px;
    }

    .unreadMentionsIndicatorBottom_ef3116 /* server list new pill */,
    .unreadMentionsIndicatorTop_ef3116 {
        width: calc(
            var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2
        );
        padding: calc(var(--custom-guild-list-padding) / 2);
    }

    /* jank ass solution to only apply padding to treatment 3 */
    .form_f75fb0 /* chat bar outer form */ {
        --space-8: 16px;
    }
    .channelBottomBarArea_f75fb0 /* chat bar inner */ {
        --space-8: 8px;
    }

    /* get rid of extra space in treatment 2 */
    .accessoryBar__74017 {
        padding-top: 0;
    }

    /* general chat bar improvements */
    .channelTextArea_f75fb0 /* chat bar */ {
        border-radius: var(--radius-md);
    }
    .themedBackground__74017 /* chat bar inner */ {
        background: none;
    }
    .slateTextArea_ec4baf /* actual typing area */ {
        margin-left: 2px;
    }

    /* improve unread divider */
    .divider__908e2 {
        border-width: var(--divider-thickness);
        border-radius: var(--divider-thickness);
    }
    .endCap__908e2 {
        margin-top: calc(var(--divider-thickness) / -2);
    }
    .divider__908e2 .content__908e2 {
        margin-top: calc(
            var(--divider-thickness) - var(--divider-thickness) * 2
        );
    }

    /* improve highlight message left edge */
    .message__5126c.mentioned__5126c::before,
    .replying__5126c::before,
    .ephemeral__5126c::before {
        width: var(--divider-thickness);
        border-radius: var(--divider-thickness);
        height: calc(100% - 2 * var(--radius-sm));
        top: var(--radius-sm);
        left: calc(var(--divider-thickness) / -2 + 1px);
        left: calc(var(--radius-sm) / 2);
    }

    .message__5126c {
        border-radius: var(--radius-md);
        margin-left: 4px;
    }

    /* improve server selected marker */
    .pill_e5445c.wrapper__58105 {
        width: calc((var(--custom-guild-list-padding) - 4px) / 2 + 4px);
    }
    .item__58105 {
        width: 4px;
        border-radius: 4px;
        margin-left: calc((var(--custom-guild-list-padding) - 4px) / 2);
    }

    /* improve embeds */
    .embedFull__623de {
        border: 4px solid var(--border-normal);
        border-top-color: var(--border-subtle) !important;
        border-top-width: 1px;
        border-bottom-color: var(--border-subtle) !important;
        border-bottom-width: 1px;
        border-right-color: var(--border-subtle) !important;
        border-right-width: 1px;
    }

    /* improve borders */
    .reaction__23977 /* message reactions */,
    .reactionBtn__23977.forceShow__23977 /* add reaction button */ {
        border-width: 2px;
    }

    /* roundness */
    .embedFull__623de /* embeds */,
    .hljs /* code block */,
    .imageWrapper_af017a /* image */,
    .container__9271d /* thread link */ {
        border-radius: var(--radius-md);
    }

    .outer_c0bea0 /* profile outer */,
    .contentWrapper__08434  /* gif panel */ {
        border-radius: var(--radius-lg);
    }
    .inner_c0bea0 /* profile inner */ {
        border-radius: calc(var(--radius-lg) - 4px);
    }

    .outer_c0bea0 /* profile outer */ {
        border: 1px solid var(--border-subtle);
    }
    .root__24502 {
        background: none;
    }

    /* remove unnecessary backgrounds */
    .app__160d8,
    #app-mount,
    body {
        background: transparent !important;
    }
}

body {
    --font-primary: var(--font), "gg sans";
    --font-display: var(--font), "gg sans";
}

[class*="scroll"] {
    will-change: scroll-position;
}
.burstGlow__23977 {
    display: none;
}

/* animations.css */
@property --animations {
    syntax: "on | off";
    inherits: false;
    initial-value: on;
}

body {
    --list-item-transition: 0.2s ease; /* transition for list items */
    --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */
}

@container body style(--animations: on) {
    .visual-refresh {
        /* list hover animations */
        .wrapper__2ea32 .link__2ea32 /* channels */,
        .container__91a9d /* members */,
        .channel__972a0 /* dms */,
        .side_b3f026 .item_b3f026 /* settings */ {
            transition: margin-left var(--list-item-transition);
            will-change: margin-left;
        }
        .wrapper__2ea32:hover .link__2ea32,
        .side_b3f026 .item_b3f026:hover {
            margin-left: 10px;
        }
        .container__91a9d:hover,
        .channel__972a0:hover {
            margin-left: 18px;
        }
        /* list hover channel dot */
        .unread__2ea32 {
            border-radius: 50%;
            width: 8px;
            height: 8px;
            margin-left: -4px;
            transition: var(--list-item-transition);
            will-change: margin-left;
        }
        .wrapper__2ea32:hover .unread__2ea32 {
            margin-left: 4px;
        }
        .typeThread__2ea32 .unread__2ea32 {
            left: -31px;
        }
    }
}

/* background-image.css */
@property --background-image {
    syntax: "on | off";
    inherits: false;
    initial-value: off;
}

body {
    --background-image-url: url("");
}

@container body style(--background-image: on) {
    .visual-refresh .bg__960e4 {
        background: var(--background-image-url);
        background-size: cover;
        background-position: center;
    }
}

/* colors.css */
@property --colors {
    syntax: "on | off";
    inherits: false;
    initial-value: on;
}

:root {
    /* text colors */
    --text-0: white; /* text on colored elements */
    --text-1: var(--text-2); /* other normally white text */
    --text-2: hsl(220, 25%, 80%); /* headings and important text */
    --text-3: hsl(220, 15%, 70%); /* normal text */
    --text-4: hsl(220, 15%, 50%); /* icon buttons and channels */
    --text-5: hsl(220, 15%, 40%); /* muted channels/chats and timestamps */

    /* background and dark colors */
    --bg-1: hsl(200, 15%, 20%); /* dark buttons when clicked */
    --bg-2: hsl(200, 15%, 16%); /* dark buttons */
    --bg-3: hsl(200, 15%, 13%); /* spacing, secondary elements */
    --bg-4: hsl(200, 15%, 10%); /* main background color */
    --hover: hsla(230, 20%, 40%, 0.1); /* channels and buttons when hovered */
    --active: hsla(
        200,
        20%,
        40%,
        0.2
    ); /* channels and buttons when clicked or selected */
    --active-2: hsla(
        220,
        19%,
        40%,
        0.3
    ); /* extra state for transparent buttons */
    --message-hover: hsla(200, 0%, 0%, 0.1); /* messages when hovered */

    /* accent colors */
    --accent-1: hsl(40, 80%, 60%); /* links and other accent text */
    --accent-2: hsl(40, 80%, 48%); /* small accent elements */
    --accent-3: hsl(40, 80%, 42%); /* accent buttons */
    --accent-4: hsl(40, 80%, 36%); /* accent buttons when hovered */
    --accent-5: hsl(40, 80%, 30%); /* accent buttons when clicked */
    --accent-new: hsl(
        40,
        80%,
        50%
    ); /* stuff that's normally red like mute/deafen buttons */
    --mention: linear-gradient(
        to right,
        color-mix(in hsl, var(--blue-2), transparent 90%) 40%,
        transparent
    ); /* background of messages that mention you */
    --mention-hover: linear-gradient(
        to right,
        color-mix(in hsl, var(--blue-2), transparent 95%) 40%,
        transparent
    ); /* background of messages that mention you when hovered */
    --reply: linear-gradient(
        to right,
        color-mix(in hsl, var(--text-3), transparent 90%) 40%,
        transparent
    ); /* background of messages that reply to you */
    --reply-hover: linear-gradient(
        to right,
        color-mix(in hsl, var(--text-3), transparent 95%) 40%,
        transparent
    ); /* background of messages that reply to you when hovered */

    /* status indicator colors */
    --online: var(--green-2); /* change to #43a25a for default */
    --dnd: var(--red-2); /* change to #d83a42 for default */
    --idle: var(--yellow-2); /* change to #ca9654 for default */
    --streaming: var(--purple-2); /* change to #593695 for default */
    --offline: var(--text-4); /* change to #83838b for default offline color */

    /* border colors */
    --border-light: hsl(230, 20%, 40%, 0.1); /* light border color */
    --border: hsl(230, 20%, 40%, 0.2); /* normal border color */
    --button-border: hsl(
        0,
        0%,
        100%,
        0.1
    ); /* neutral border color of buttons */
    --border-light: transparent;
    --border: transparent;
    --button-border: transparent;

    /* base colors */
    --red-1: hsl(360, 90%, 60%);
    --red-2: hsl(360, 90%, 60%); /* dnd mode */
    --red-3: hsl(360, 90%, 60%);
    --red-4: hsl(360, 90%, 60%);
    --red-5: hsl(360, 90%, 60%);

    --green-1: hsl(150, 80%, calc(60% - 20%));
    --green-2: hsl(150, 80%, calc(50% - 20%));
    --green-3: hsl(150, 80%, calc(36% - 20%));
    --green-4: hsl(150, 80%, calc(36% - 20%));
    --green-5: hsl(150, 80%, calc(30% - 20%));

    --blue-1: oklch(76% 0.1 215);
    --blue-2: oklch(70% 0.1 215);
    --blue-3: oklch(64% 0.1 215);
    --blue-4: oklch(58% 0.1 215);
    --blue-5: oklch(52% 0.1 215);

    --yellow-1: oklch(80% 0.11 90);
    --yellow-2: oklch(74% 0.11 90);
    --yellow-3: oklch(68% 0.11 90);
    --yellow-4: oklch(62% 0.11 90);
    --yellow-5: oklch(56% 0.11 90);

    --purple-1: oklch(76% 0.11 310);
    --purple-2: oklch(70% 0.11 310);
    --purple-3: oklch(64% 0.11 310);
    --purple-4: oklch(58% 0.11 310);
    --purple-5: oklch(52% 0.11 310);
}

@container root style(--colors: on) {
    .visual-refresh body,
    .visual-refresh .theme-dark {
        --activity-card-background: red;
        --alert-bg: red;
        --autocomplete-bg: var(--bg-3);

        --background-accent: var(--bg-2);
        --background-floating: var(--bg-3);
        --background-nested-floating: var(--bg-4);
        --background-mentioned: var(--mention);
        --background-mentioned-hover: var(--mention-hover);
        --background-message-automod: red;
        --background-message-automod-hover: red;
        --background-message-highlight: var(--reply);
        --background-message-highlight-hover: var(--reply-hover);
        --background-message-hover: var(--message-hover);

        --background-primary: var(--bg-4);
        --background-secondary: var(--bg-3);
        --background-secondary-alt: var(--bg-3);
        --background-tertiary: var(--bg-4);

        --bg-base-primary: red;
        --bg-base-secondary: var(--bg-4);
        --bg-base-tertiary: var(--bg-3);
        --background-mod-subtle: var(--bg-3);
        --background-mod-normal: var(--bg-3);
        --background-mod-strong: var(--bg-3);
        --background-base-low: var(--bg-4);
        --background-base-lower: var(--bg-4);
        --background-base-lowest: var(--bg-4);
        --background-surface-high: var(--bg-3);
        --background-surface-higher: var(--bg-3);
        --background-surface-highest: var(--bg-3);
        --bg-surface-overlay: var(--bg-4);
        --bg-surface-raised: var(--bg-3);
        --chat-background-default: var(--bg-3);
        --input-background: var(--bg-3);
        --modal-background: var(--bg-4);
        --modal-footer-background: var(--bg-4);

        --background-modifier-accent: var(--hover);
        --background-modifier-active: var(--active);
        --background-modifier-hover: var(--hover);
        --background-modifier-selected: var(--active);

        --bg-mod-faint: var(--hover);
        --bg-mod-subtle: var(--bg-2);
        --bg-mod-strong: var(--bg-2);
        --bg-brand: var(--accent-2);

        --border-faint: var(--border-light);
        --border-subtle: var(--border);
        --border-normal: var(--border);
        --border-strong: var(--border);
        --input-border: var(--border);

        --button-danger-background: var(--red-3);
        --button-danger-background-active: var(--red-5);
        --button-danger-background-hover: var(--red-4);
        --button-danger-background-disabled: var(--red-5);
        --button-danger-border: var(--button-border);

        --button-filled-brand-text: var(--text-0);
        --button-filled-brand-background: var(--accent-3);
        --button-filled-brand-background-active: var(--accent-5);
        --button-filled-brand-background-hover: var(--accent-4);
        --button-filled-brand-border: var(--button-border);

        --button-filled-brand-inverted-background: var(--text-1);
        --button-filled-brand-inverted-background-active: var(--text-3);
        --button-filled-brand-inverted-background-hover: var(--text-2);
        --button-filled-brand-inverted-text: var(--bg-4);
        --button-filled-white-background: var(--text-1);
        --button-filled-white-background-active: var(--text-3);
        --button-filled-white-background-hover: var(--text-2);
        --button-filled-white-text: var(--bg-4);

        --button-outline-danger-background: var(--bg-2);
        --button-outline-danger-background-active: var(--text-5);
        --button-outline-danger-background-hover: var(--bg-1);
        --button-outline-danger-border: var(--border-light);
        --button-outline-danger-border-active: var(--border-light);
        --button-outline-danger-border-hover: var(--border-light);
        --button-outline-danger-text: var(--red-1);
        --button-outline-danger-text-active: var(--red-1);
        --button-outline-danger-text-hover: var(--red-1);

        --button-outline-primary-background: red;
        --button-outline-primary-background-active: var(--active);
        --button-outline-primary-background-hover: var(--hover);
        --button-outline-primary-border: var(--text-5);
        --button-outline-primary-border-active: var(--text-5);
        --button-outline-primary-border-hover: var(--text-5);
        --button-outline-primary-text: var(--text-3);
        --button-outline-primary-text-active: var(--text-3);
        --button-outline-primary-text-hover: var(--text-3);

        --button-outline-positive-background: red;
        --button-outline-positive-background-active: var(--green-4);
        --button-outline-positive-background-hover: var(--green-3);
        --button-outline-positive-border: var(--green-2);
        --button-outline-positive-border-active: var(--green-4);
        --button-outline-positive-border-hover: var(--green-3);
        --button-outline-positive-text: var(--text-3);
        --button-outline-positive-text-active: var(--text-0);
        --button-outline-positive-text-hover: var(--text-0);

        --button-positive-background: var(--green-2);
        --button-positive-background-active: var(--green-4);
        --button-positive-background-hover: var(--green-3);
        --button-positive-background-disabled: var(--green-4);
        --button-positive-border: var(--button-border);

        --button-secondary-background: var(--bg-2);
        --button-secondary-background-active: var(--text-5);
        --button-secondary-background-hover: var(--bg-1);
        --button-secondary-background-disabled: var(--bg-3);
        --button-secondary-text: var(--text-3);

        --button-transparent-background: var(--hover);
        --button-transparent-background-active: var(--active-2);
        --button-transparent-background-hover: var(--active);
        --button-transparent-text: var(--text-3);

        --redesign-button-secondary-text: var(--text-3);

        --polls-voted-fill: color-mix(in hsl, var(--accent-2), transparent 90%);
        --polls-victor-fill: color-mix(in hsl, var(--green-2), transparent 90%);

        --card-primary-bg: var(--bg-3);
        --card-secondary-bg: red;
        --channel-icon: var(--text-4);
        --channels-default: var(--text-4);

        --header-primary: var(--text-3);
        --header-secondary: var(--text-4);
        --header-muted: var(--text-4);

        --icon-muted: var(--text-5);
        --icon-primary: var(--text-3);
        --icon-secondary: var(--text-4);
        --icon-tertiary: var(--text-4);

        --info-danger-background: red;
        --info-danger-text: red;
        --info-help-background: color-mix(
            in hsl,
            var(--blue-2),
            transparent 80%
        );
        --info-help-foreground: var(--blue-1);
        --info-help-text: var(--blue-1);
        --info-positive-background: color-mix(
            in hsl,
            var(--yellow-1),
            transparent 80%
        );
        --info-positive-text: var(--green-1);
        --info-warning-background: color-mix(
            in hsl,
            var(--yellow-2),
            transparent 80%
        );
        --info-warning-text: var(--yellow-1);

        --text-brand: var(--accent-1);
        --text-danger: var(--red-1);
        --text-link: var(--accent-1);
        --text-link-low-saturation: red;
        --text-low-contrast: var(--text-4);
        --text-message-preview-low-sat: red;
        --text-muted: var(--text-5);
        --text-muted-on-default: var(--text-4);
        --text-normal: var(--text-3);
        --text-positive: var(--green-1);
        --text-primary: var(--text-3);
        --text-secondary: var(--text-4);
        --text-warning: var(--yellow-1);
        --text-default: var(--text-3);
        --text-feedback-critical: var(--red-1);
        --text-feedback-positive: var(--green-1);
        --text-feedback-info: red;
        --text-feedback-warning: red;
        --text-tertiary: var(--text-4);

        --status-danger: var(--red-2);
        --status-danger-background: var(--red-3);
        --status-danger-text: var(--white);
        --status-dnd: var(--dnd); /* server profiles */
        --status-idle: var(--idle);
        --status-offline: var(--offline);
        --status-online: var(--online);
        --status-positive: var(--green-2);
        --status-positive-background: var(--green-2);
        --status-positive-text: var(--white);
        --status-speaking: var(--green-2);
        --status-warning: var(--yellow-2);
        --status-warning-background: red;
        --status-warning-text: var(--black);

        --background-feedback-critical: color-mix(
            in hsl,
            var(--red-2),
            transparent 80%
        );
        --background-feedback-info: color-mix(
            in hsl,
            var(--blue-2),
            transparent 80%
        );
        --background-feedback-positive: color-mix(
            in hsl,
            var(--green-2),
            transparent 80%
        );
        --background-feedback-warning: color-mix(
            in hsl,
            var(--yellow-2),
            transparent 80%
        );

        --interactive-normal: var(--text-4);
        --interactive-hover: var(--text-3);
        --interactive-active: var(--text-3);
        --interactive-muted: var(--text-5);

        --mention-foreground: var(--accent-1);
        --mention-background: color-mix(
            in hsl,
            var(--accent-2),
            transparent 90%
        );

        --channel-text-area-placeholder: var(--text-5);

        --message-reacted-background: color-mix(
            in hsl,
            var(--accent-2),
            transparent 80%
        );

        --custom-channel-members-bg: var(--bg-4);

        --redesign-input-control-selected: var(--accent-2);

        --scrollbar-auto-thumb: var(--bg-3);
        --scrollbar-auto-track: transparent;
        --scrollbar-thin-thumb: var(--bg-3);
        --scrollbar-thin-track: transparent;

        --white: var(--text-0);
        --white-500: var(--text-0);
        --redesign-button-overlay-alpha-text: var(--text-2);

        --brand-360: var(--accent-2);
        --brand-500: var(--accent-2);
        --blurple-50: var(--accent-2);

        --red-400: var(--red-2);
        --red-500: var(--red-3);

        --green-360: var(
            --green-2
        ); /* seems to be mostly used by vencord plugins */
        --primary-400: var(--text-4);
    }

    .visual-refresh {
        ::placeholder {
            color: var(--text-5);
        }

        .modeUnreadImportant__2ea32 .icon__2ea32,
        .wrapper__2ea32:hover .icon__2ea32 /* correct channel icon color */ {
            color: var(--text-3);
        }

        .text_b88801 > strong /* xxx is typing.. */ {
            color: var(--text-3);
        }

        .folder__48112[aria-expanded="false"] > .folderIconWrapper__48112 /* collapsed folders */ {
            --background-primary: var(--bg-3);
        }

        .panel__5dec7 /* game activity panel */,
        #vc-spotify-player /* vencord spotify plugin */ {
            background: none;
        }

        .side_b3f026 .item_b3f026:hover /* settings tab */ {
            background-color: var(--bg-3) !important;
        }
        .side_b3f026 .item_b3f026:active,
        .side_b3f026 .item_b3f026.selected_b3f026 {
            background-color: var(--bg-2) !important;
        }

        .wrapper_cb9592 > .callContainer_cb9592 /* dm vc */ {
            background-color: var(--bg-4);
        }

        .quickSelectPopout_ebaca5 /* dm vc region select popout */,
        .participantsButton__211d1 /* vc participants button */,
        .voiceBar__7aaec /* n in voice bar (channel list) */,
        .mainCard_f369db /* form posts */ {
            background-color: var(--bg-3);
        }

        .colorable_f1ceac.primaryDark_f1ceac,
        .reaction_f8896c /* forum post reaction */ {
            background-color: var(--bg-2);
        }

        .expandedFolderIconWrapper__48112 > svg[style="color: rgb(88, 101, 242);"] /* folder icon */ {
            color: var(--accent-2) !important;
        }
        .colorPickerSwatch__459fb[style="background-color: rgb(88, 101, 242);"] /* folder color picker swatch */,
        .newBadge__9a337 /* forum post new badge */,
        .mentioned__5126c:before /* mention message left edge */ {
            background-color: var(--accent-2) !important;
        }
        .replying__5126c:before /* reply message left edge */ {
            background-color: var(--text-2) !important;
        }

        #app-mount .message__5126c.replying__5126c:hover /* override fix for message reply hover */ {
            background: var(--reply-hover);
        }

        .ephemeral__5126c /* ephemeral messages */ {
            background: var(--mention) !important;
        }
        .ephemeral__5126c:hover {
            background: var(--mention-hover) !important;
        }

        .botTagRegular__82f07 /* bot tag */ {
            background-color: var(--accent-2);
        }

        .container__87bf1 /* settings checkbutton background */ {
            background-color: var(--bg-1) !important;
            transition: background-color 0.2s ease;
        }
        .container__87bf1.checked__87bf1 /* settings checkbutton background */ {
            background-color: var(--accent-2) !important;
        }
        .container__87bf1 .slider__87bf1 > svg > path /* settings checkbutton check */ {
            fill: var(--bg-1) !important;
            transition: fill 0.2s ease;
        }
        .container__87bf1.checked__87bf1 .slider__87bf1 > svg > path /* settings checkbutton check */ {
            fill: var(--accent-2) !important;
        }
        .container__87bf1 rect[fill='white'] /* settings checkbutton slider */ {
            fill: var(--text-3) !important;
            transition: fill 0.2s ease;
        }
        .container__87bf1.checked__87bf1 rect[fill='white'] /* settings checkbutton slider */ {
            fill: var(--text-0) !important;
        }

        .refreshIcon__001a7 /* settings radiobutton center */ {
            fill: var(--text-0);
        }

        .categoryText_d02962 /* gif chooser category names */,
        .bannerColor_fb7f94 /* profile banner button */,
        .backButton_e4cb9a /* stream preview back button */,
        .viewersIcon_d6b206 /* stream preview viewers icon */,
        .bottomControls_e4cb9a /* stream preview viewer number */,
        .pictureInPictureVideo_e4cb9a .controlIcon_f1ceac /* stream preview control icon */,
        .bannerVisible_f37cb1 .name_f37cb1 /* server name over banner image */,
        .dropdownButtonBannerVisible__2637a /* server name over banner dropdown button */ {
            color: var(--text-1);
        }
        .headerText_e4cb9a.base_eb1a4c /* stream preview header text */,
        .participantName__2cdb8 /* stream preview participant name */ {
            color: var(--text-1) !important;
        }
        .playPausePopIcon_cf09d8 > path /* video play/pause popup */ {
            fill: var(--text-1);
        }
        .headerTitle_e4cb9a:hover /* stream preview header title hover underline */ {
            border-color: var(--text-1) !important;
        }
        .controlIcon_cf09d8 /* video play button */,
        .wrapper_cf09d8 /* video time */,
        .iconWrapper__6eb54 /* video initial play button */,
        .wrapper__926d7 /* youtube embed play button */,
        .viewersIcon_d6b206:hover /* stream preview viewers icon */ ,
        .headerTitle_e4cb9a:hover .backButton_e4cb9a /* stream preview back button hover */,
        .viewersIcon_d6b206:hover /* stream preview viewers icon */,
        .pictureInPictureVideo_e4cb9a .controlIcon_f1ceac:hover /* stream preview control icon */ {
            color: var(--text-2);
        }
        .wrapper__926d7 a:link,
        .wrapper__926d7 a:visited,
        .headerTitle_e4cb9a:hover .headerText_e4cb9a.base_eb1a4c /* stream preview back button hover */ {
            color: var(--text-2) !important;
        }
        .downloadHoverButtonIcon__6c706 /* video download button */,
        .iconContainer__211d1>svg /* vc participants button icon */,
        .selectedIcon__2f4f7 /* vc selected camera icon */,
        .colorable_f1ceac.primaryDark_f1ceac .centerIcon_f1ceac /* vc icon button */,
        .colorable_f1ceac.primaryDark_f1ceac /* vc icon button nub */,
        .iconBadge__650eb.base__2b1f5 /* server vc badge */,
        #app-mount .akaBadge__488b1 /* aka badge */,
        .message_fcf29c /* you have unsaved settings message */,
        .friendRequestsButton__523aa .base__2b1f5 /* inbox friend request number */,
        .textBadge__2b1f5[style='background-color: var(--background-accent);'],
        .tooltipBlack__382e7 /* server boost tooltip */ {
            color: var(--text-3);
        }
        .status__2f4f7 path[fill='var(--white)'],
        .emptyChannelIcon__00de6 path[fill='var(--white)'] /* channel start icon */ {
            fill: var(--text-3);
        }
        .grabber_a562c8 /* vc volume slider grabber */ {
            background-color: var(--text-3);
        }
        .textBadge__2b1f5 /* new text badge (right click on person in vc) */ {
            color: var(--text-0);
        }

        .unread__3b95d /* new unreads bar (channel list */ {
            color: var(--text-4);
        }

        .colorable_f1ceac.white_f1ceac /* vc icon button nub when white */ {
            background-color: var(--primary-130);
            color: var(--bg-4);
        }

        .iconBadge__650eb.isCurrentUserConnected__650eb /* green vc badge when connected */ {
            color: var(--text-0);
        }

        .container__37e49 /* user panel buttons */,
        .numberBadge__2b1f5  /* unread number badge */,
        .toolbar__9293f /* toolbar button strikethroughs */ {
            --status-danger: var(--accent-new);
        }

        .container__37e49 .button__67645.redGlow__67645 /* user panel button backgrounds*/ {
            background-color: color-mix(
                in hsl,
                var(--accent-new),
                transparent 90%
            );
        }
        .container__37e49 .button__67645.enabled__67645.redGlow__67645:hover /* user panel button backgrounds hover */ {
            background-color: color-mix(
                in hsl,
                var(--accent-new),
                transparent 80%
            );
        }

        .divider__5126c /* unread divider */ {
            --divider-color: var(--accent-new);
        }

        .iconBadge__9293f /* icon badge */,
        .mentionsBar__7aaec /* new mention pill */,
        .mention__3b95d /* server list new mention pill */ {
            background-color: var(--accent-new);
        }

        .newMessagesBar__0f481 /* unread bar */ {
            background-color: var(--accent-3);
        }
        .barButtonAlt__0f481 /* unread bar mark as read button */ {
            --button-secondary-background: var(--accent-3);
            --button-secondary-background-hover: var(--accent-4);
        }

        .updateIconForeground__49676 /* update button */ {
            fill: var(--green-1);
        }

        .colorable_f1ceac.red_f1ceac:hover /* vc disconnect button hover */ {
            background-color: var(--red-4);
        }
        .button_f7ecac.dangerous_f7ecac:hover /* image attachment delete button hover in chat bar */ {
            color: var(--red-4);
        }
        .contentWrapper__08434 ::-webkit-scrollbar-thumb /* gif picker scrollbar */ {
            background-color: var(--bg-1);
        }

        .circleIconButton__5bc7e /* new server button */ {
            color: var(--text-3);
        }
        .circleIconButton__5bc7e:hover {
            color: var(--bg-4);
        }

        .tooltipGrey__382e7 /* spotify plugin time tooltip */ {
            color: var(--text-3);
            background-color: var(--bg-3);
        }

        .textContentFooter__9a337 /* forum post image fade */ {
            background: linear-gradient(0deg, var(--bg-4), transparent);
        }

        .result__2dc39:after /* remove gif hover overlay */ {
            display: none;
        }
        .result__2dc39:hover /* gif hover */ {
            outline: 2px solid var(--accent-2);
        }

        .reactionBtn__23977.forceShow__23977:hover /* fix add reaction button border hover */ {
            border-color: var(--bg-2);
        }

        /* status indicators */
        rect[fill="#83838b"] {
            fill: var(--offline);
        }
        .status_a423bd[style="background-color: rgb(131, 131, 139);"] {
            background-color: var(--offline) !important;
        }
        rect[fill='#43a25a'],
        path[fill='#43a25a'] /* status activity icon */ {
            fill: var(--online);
        }
        .status_a423bd[style="background-color: rgb(68, 162, 91);"] {
            background-color: var(--online) !important;
        }
        rect[fill="#ca9654"] {
            fill: var(--idle);
        }
        .status_a423bd[style="background-color: rgb(201, 150, 86);"] {
            background-color: var(--idle) !important;
        }
        rect[fill="#d83a42"] {
            fill: var(--dnd);
        }
        .status_a423bd[style="background-color: rgb(216, 58, 66);"] {
            background-color: var(--dnd) !important;
        }
        rect[fill="#593695"] {
            fill: var(--streaming);
        }
        div[style="display: flex; justify-content: center; align-items: center; border-radius: 5px; background-color: rgb(67, 162, 90); height: 10px; width: 25px;"] {
            background-color: var(--online) !important;
        }

        /* fix radio bar button colors */
        .radioBar__001a7[style="--radio-bar-accent-color: var(--yellow-360); padding: 10px;"] {
            --radio-bar-accent-color: var(--yellow-2) !important;
        }
        .radioBar__001a7[style="--radio-bar-accent-color: var(--green-360); padding: 10px;"] {
            --radio-bar-accent-color: var(--green-2) !important;
        }
        .radioBar__001a7[style="--radio-bar-accent-color: var(--red-400); padding: 10px;"] {
            --radio-bar-accent-color: var(--red-2) !important;
        }

        #vc-spotify-player {
            --vc-spotify-green: var(--accent-new);
        }

        ::selection,
        .highlight {
            background: var(--accent-3);
            color: var(--text-0);
        }
    }
}

/* dms-button.css */
@property --dms-icon {
    syntax: "default | off | on";
    inherits: false;
    initial-value: on;
}

body {
    --dms-icon-svg-url: url("https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg"); /* icon svg url. MUST BE A SVG. */
    --dms-icon-svg-size: 90%; /* size of the svg (css mask-size) */
    --dms-icon-color-before: var(--icon-secondary);
    --dms-icon-color-after: var(--white);
    --dms-background-image-url: url("https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png");
    --dms-background-image-size: cover; /* size of the background image (css background-size) */
    --dms-background-color: linear-gradient(
        70deg,
        var(--blue-2),
        var(--purple-2),
        var(--red-2)
    ); /* color of the background image (css background) */
}

@container body style(--dms-icon: on) {
    .wrapper__6e9f8[data-list-item-id="guildsnav___home"]
        > .childWrapper__6e9f8
        > svg {
        display: none;
    }
    .wrapper__6e9f8[data-list-item-id="guildsnav___home"]
        > .childWrapper__6e9f8::before {
        content: "";
        display: block;
        position: absolute;
        width: 65%;
        height: 65%;
        background: var(--dms-icon-color-before);
        mask-image: var(--dms-icon-svg-url);
        mask-size: var(--dms-icon-svg-size);
        mask-position: center;
        mask-repeat: no-repeat;
        transition: background-color 0.15s ease-out;
    }
    .wrapper__6e9f8[data-list-item-id="guildsnav___home"]:hover
        > .childWrapper__6e9f8::before {
        transform: rotate(0deg) scale(1);
    }
    .wrapper__6e9f8[data-list-item-id="guildsnav___home"]:hover
        > .childWrapper__6e9f8::before,
    .wrapper__6e9f8[data-list-item-id="guildsnav___home"].selected__6e9f8
        > .childWrapper__6e9f8::before {
        background: var(--dms-icon-color-after);
        transform: rotate(-360deg) scale(0.8);
    }

    @container body style(--animations: on) {
        .wrapper__6e9f8[data-list-item-id="guildsnav___home"]
            .childWrapper__6e9f8::before {
            transition:
                background-color 0.15s ease-out,
                transform var(--dms-icon-svg-transition);
        }
    }
}

@container body style(--dms-icon: off) {
    .wrapper__6e9f8[data-list-item-id="guildsnav___home"]
        > .childWrapper__6e9f8
        > svg {
        display: none;
    }
}

@property --dms-background {
    syntax: "off | image | color";
    inherits: false;
    initial-value: off;
}

@container body style(--dms-background: image) {
    .wrapper__6e9f8[data-list-item-id="guildsnav___home"]
        > .childWrapper__6e9f8 {
        background-image: var(--dms-background-image-url);
        background-color: transparent !important;
        background-size: cover;
        background-position: var(--dms-background-image-position);
    }
}

@container body style(--dms-background: color) {
    .wrapper__6e9f8[data-list-item-id="guildsnav___home"]
        > .childWrapper__6e9f8 {
        background: var(--dms-background-color);
    }
}

/* top-bar.css */
@property --move-top-bar-buttons {
    syntax: "on | off";
    inherits: false;
    initial-value: off;
}

@container body style(--move-top-bar-buttons: on) {
    .visual-refresh {
        /* remove help button */
        .trailing_c38106 > a[href="https://support.discord.com"]
        {
            display: none;
        }

        /* make server list inner scroll */
        .stack_dbd263 {
            overflow: hidden scroll;
            scrollbar-width: none;
        }
        /* create space for inbox button */
        .tutorialContainer__1f388 {
            margin-bottom: 48px;
        }
        /* move inbox button */
        .recentsIcon_c99c29 {
            position: fixed;
            width: 40px;
            height: 40px;
            top: calc(
                var(--custom-app-top-bar-height) + 1px +
                    var(--custom-guild-list-padding) + 48px
            );
            left: calc(var(--gap) + 1px + var(--custom-guild-list-padding));
        }
        /* style inbox button */
        .recentsIcon_c99c29 .button__85643 {
            width: 100%;
            height: 100%;
            background-color: var(--background-surface-higher);
            border-radius: var(--radius-md);
            transition: background-color 0.15s ease-out;

            &:hover {
                background-color: var(--bg-brand);

                .icon__9293f {
                    color: var(--white);
                }
            }
        }
        .recentsIcon_c99c29 .svg__2338f {
            transition: color 0.15s ease-out;
            width: 24px;
            height: 24px;
        }
        /* shift inbox popup panel into view */
        .recentMentionsPopout__95796 {
            transform: translateX(100%);
        }
        /* move top bar title */
        .title_c38106 {
            padding-left: var(--gap);
            justify-content: flex-start;
        }
        .title__85643 {
            gap: 4px;
        }
        /* style top bar title */
        .title__85643 .icon_f34534 {
            width: 16px;
            height: 16px;
            display: none;
        }
        .title__85643 .text-sm\/medium_cf4812 {
            line-height: 90%;
            color: var(--text-muted);
            font-weight: 700;
        }

        /* fix settings animation transform */
        .layer__960e4.baseLayer__960e4 {
            transform: none !important;
        }
        .layers__960e4 > .layer__960e4.animating__960e4 {
            will-change: opacity;
        }

        /* unread icon */
        .recentsIcon_c99c29 .iconBadge__9293f {
            --custom-icon-offset: 8px;
            width: 10px;
            height: 10px;
            transition: background 0.15s ease-out;
        }

        .recentsIcon_c99c29:hover .iconBadge__9293f {
            background: var(--white);
        }
    }
}

/* transparency-blur.css */
@property --panel-blur {
    syntax: "on | off";
    inherits: false;
    initial-value: off;
}

@container body style(--panel-blur: on) {
    .visual-refresh {
        #app-mount {
            --panel-backdrop-filter: blur(var(--blur-amount));
        }

        .popoverReactionHoverBar_f84418 /* message hover quick action bar */,
        .tooltip__382e7 /* tooltips */ {
            background: var(--bg-floating);
        }
        .menu_c1e9c4 /* context menus */,
        .contentWrapper__08434 /* emoji/gif panel */,
        .root__49fc1 /* modals like invite */,
        .outer_c0bea0 /* small profile popup */,
        .autocomplete__6b0e0 /* autocomplete */,
        .container__55c99 /* search suggestions */,
        .messagesPopoutWrap__45690 /* inbox */,
        .popout__76f04 /* channel hover popout */ {
            background: var(--bg-floating);
        }
    }
}

@property --transparency-tweaks {
    syntax: "on | off";
    inherits: false;
    initial-value: off;
}

@container body style(--transparency-tweaks: on) {
    .visual-refresh {
        .formWithLoadedChatInput_f75fb0:before,
        .children__9293f:after {
            display: none;
        }
    }
}

@property --remove-bg-layer {
    syntax: "on | off";
    inherits: false;
    initial-value: off;
}

@container body style(--remove-bg-layer: on) {
    .bg__960e4 {
        background: transparent !important;
    }
}

/* user-panel.css */
@property --small-user-panel {
    syntax: "on | off";
    inherits: false;
    initial-value: off;
}

@container body style(--small-user-panel: on) {
    .visual-refresh {
        .base_c48ade {
            grid-template-areas:
                "titleBar titleBar titleBar"
                "guildsList notice notice"
                "guildsList channelsList page"
                "guildsList userPanel page";
        }
    }
}

/* window-controls.css */
@property --custom-window-controls {
    syntax: "on | off";
    inherits: false;
    initial-value: off;
}

body {
    --window-control-size: 14px;
}

@container body style(--custom-window-controls: on) {
    .winButtons_c38106 {
        gap: 0;
        padding-right: calc(
            var(--gap) - (var(--window-control-size) / 2) + 1px
        );
    }
    .winButtons_c38106::before {
        margin-right: calc(var(--custom-app-top-bar-height) / 4);
    }
    .winButton_c38106 > svg {
        display: none;
    }
    .winButton_c38106 {
        background: none !important;
        width: calc(var(--window-control-size) * 2);
        height: var(--custom-app-top-bar-height);
    }
    .winButton_c38106::after {
        display: block;
        content: "";
        height: var(--window-control-size);
        width: var(--window-control-size);
        border-radius: 50%;
    }
    .winButton_c38106:hover::after {
        filter: brightness(0.7);
    }
    .winButton_c38106:active::after {
        transform: scale(0.9);
    }
    .winButtonClose_c38106::after {
        background-color: var(--dnd) !important;
    }
    .winButtonMinMax_c38106:nth-child(1)::after {
        background-color: var(--idle) !important;
    }
    .winButtonMinMax_c38106:nth-child(2)::after {
        background-color: var(--online) !important;
    }
}