Performance issue

[itsh1r0]

The theme make discord laggier:

• Animation feel suttered.
• Text in chatbox delay when typing with high speed (not instant display the characters you typed).
• Delay when changing server / open setting menu

Client used: Discord + Equicord.
More tested on:

• Equibop
• Legcord

[itsh1r0]

Further test: Seem like the problem is from midnight theme side. My suggestion is make the theme independent.

[khaniare]

This has been talked about and is still present:
#162
#163

[refact0r]

Further test: Seem like the problem is from midnight theme side. My suggestion is make the theme independent.

making the theme independent would introduce the same issues, its not like we can just magically remove half the code and still make the theme work the exact same

[Getbricked]

I found out the main cause of the lag is from this function of mid-night import:

@container body style(--top-bar-button-position: titlebar) {
    #app-mount {
    --custom-channel-header-height: calc(var(--guildbar-avatar-size) + var(--space-xs) + var(--border-thickness) * 2);
    }
    .title_c38106,
    .trailing_c38106 > a[href='https://support.discord.com'] {
        display: none;
    }
    .trailing_c38106 {
        position: absolute;
        top: calc(var(--top-bar-height) + 8px + var(--border-thickness));
        right: calc(var(--gap) + var(--border-thickness));
        gap: var(--space-xs);
        z-index: 1000;
        padding-right: var(--space-xs);
        height: 32px;
        transition:
        transform 0.2s ease-in-out,
        opacity 0.2s ease-in-out;
    }
    .popout__0bd4a .trailing_c38106 {
        z-index: 1100;
    }
    /* Fix window controls overlapping certain modals */
    #app-mount,
    .modal_e44912 {
        --custom-viewport-padding: calc(var(--space-40) + var(--custom-app-top-bar-height));
    }
    .layerContainer__59d0d .carouselModal_d3a6f0 {
        margin-top: var(--custom-viewport-padding);
    }
    /* Move window controls when mod view is open */
    .base__5e434:has(> .content__5e434 > .page__5e434 > [style^='width'] > :is(.guildSidebar_f75fb0, .sidebarContainer__656be)) .trailing_c38106 {
        right: calc(var(--gap) + var(--border-thickness) + 480px);
    }
    .page__5e434 div[style='width: 480px;'] {
        min-width: 480px;
    }
    .winButtons_c38106 {
        padding: 0;
    }
    .winButton_c38106 {
        height: calc(var(--window-control-size) * 2);
    }
    .winButtons_c38106::before {
        height: 16px;
        width: var(--space-xs);
        box-sizing: border-box;
        margin: 0;
    }
    .toolbar__9293f {
        padding-right: var(--top-bar-right-margin);
    }
    /* Remove unused space when thread or VC chat is open */
    .page__5e434:has(> div > .chatLayerWrapper__01ae2) .chat_f75fb0.threadSidebarOpen_f75fb0 .toolbar__9293f,
    .video_cb9592.sidebarOpen_cb9592 .toolbar__9293f {
        padding-right: 0;
    }
    .navBarContent__131a1,
    .headerBarContent__1a9ce {
        padding-right: var(--top-bar-right-margin);
    }
    .headerBar__8a7fc {
        padding-right: calc(var(--top-bar-right-margin) + var(--space-sm));
    }
    .searchFloating__1ac1c {
        right: calc(var(--top-bar-right-margin) + var(--space-sm));
    }
    .balanceWidgetMenu__80679 {
        margin-right: var(--top-bar-right-margin);
    }
    .inviteToolbar__133bf {
        padding-right: 0;
    }
    .chat_f75fb0 > .layerContainer__59d0d {
        z-index: 999;
    }
    .subtitleContainer_f75fb0 {
        height: var(--custom-channel-header-height);
    }
    .title_f75fb0.container__9293f {
        min-height: 0;
        height: auto;
    }
    .followButton_f75fb0 {
        padding-top: 0;
        padding-bottom: 0;
    }
    .base__5e434:has(> .notice__6e2b9) > .bar_c38106 > .trailing_c38106 {
        top: calc(var(--top-bar-height) + 8px + 40px + var(--gap) + var(--border-thickness));
    }

    .base__5e434:has(> .notice__29487) > .bar_c38106 > .trailing_c38106 {
        top: calc(var(--top-bar-height) + 8px + 40px + var(--gap) + var(--border-thickness));
    }
/* ------------------------------------------------------------------- */
    /* Fix header icons and window controls overlap */
    .base__5e434 {
        /* Supports up to 6 buttons */
        &:has(> .bar_c38106 > .trailing_c38106 > div:not(.winButtons_c38106):nth-of-type(1)) {
            --button-count: 1;
        }
        &:has(> .bar_c38106 > .trailing_c38106 > div:not(.winButtons_c38106):nth-of-type(2)) {
            --button-count: 2;
        }
        &:has(> .bar_c38106 > .trailing_c38106 > div:not(.winButtons_c38106):nth-of-type(3)) {
            --button-count: 3;
        }
        &:has(> .bar_c38106 > .trailing_c38106 > div:not(.winButtons_c38106):nth-of-type(4)) {
            --button-count: 4;
        }
        &:has(> .bar_c38106 > .trailing_c38106 > div:not(.winButtons_c38106):nth-of-type(5)) {
            --button-count: 5;
        }
        &:has(> .bar_c38106 > .trailing_c38106 > div:not(.winButtons_c38106):nth-of-type(6)) {
            --button-count: 6;
        }

        &:has(> .bar_c38106 > .trailing_c38106 > .winButtons_c38106) {
            --top-bar-right-margin: calc(32px * var(--button-count) + (var(--button-count) + 2) * var(--space-xs) + 6 * var(--window-control-size) + var(--window-controls-padding));
        }

        /* Revert icon sizing changes */
        .trailing_c38106 {
            > div:not(.winButtons_c38106),
            div.clickable__81391 {
                width: 32px !important;
                height: 32px !important;
                display: flex;
                justify-content: center;
                align-items: center;

                svg {
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }
    /* Mac / Vesktop users */
    .base__5e434 {
        --top-bar-right-margin: calc(32px * var(--button-count) + var(--button-count) * var(--space-xs));
    }
    /* VC popout */
    .popout__0bd4a:has(> .titleBar__0bd4a) {
        --top-bar-right-margin: calc((var(--window-control-size) * 6) + var(--window-controls-padding) + var(--space-xs));
    }
    /* Settings modal in portrait mode */
    @media screen and (max-width: 1080px) {
        #app-mount:has(> .appAsidePanelWrapper_a3002d > div > .layerContainer__59d0d .modal_e44912) {
        .modal_e44912 {
            padding-top: 0;
        }

        .trailing_c38106 {
            top: calc(8.5px + var(--border-thickness));
            right: var(--border-thickness);
        }

        .contentHeader_e9e3ed {
            padding-right: calc((var(--window-control-size) * 6) + var(--window-controls-padding) + var(--space-xs) * 2);
        }
        }
    }

    /* Hide page seek arrows */
    .bar_c38106 .backForwardButtons__63abb {
        display: none;
    }

    /* Hide trailing in VC wrapper */
    .base__5e434,
    .popout__0bd4a {
        &:has(:is(& > .content__5e434 > .page__5e434 .chat_f75fb0, & > .content__0bd4a .root) > .video_cb9592:not(.sidebarOpen_cb9592) .callContainer_cb9592 > .root_bfe55a.idle_bfe55a)
        .trailing_c38106 {
            transform: translateY(-8px);
            opacity: 0;

            &:hover {
                transform: translateY(0);
                opacity: 1;
            }
        }
    }
}

removing this from the source of mid-night solve both chatinput lag and also global lag issue might be due to some bad nested :has() render I am not so sure haven't digged deeper into the whole block

Suggestion solution: reduce the :has() and :has(:is())

@container body style(--top-bar-button-position: titlebar) {
    #app-mount {
        --custom-channel-header-height: calc(var(--guildbar-avatar-size) + var(--space-xs) + var(--border-thickness) * 2);
    }

    .title_c38106,
    .trailing_c38106 > a[href='https://support.discord.com'] {
        display: none;
    }

    .trailing_c38106 {
        position: absolute;
        top: calc(var(--top-bar-height) + 8px + var(--border-thickness));
        right: calc(var(--gap) + var(--border-thickness));
        gap: var(--space-xs);
        z-index: 1000;
        padding-right: var(--space-xs);
        height: 32px;
        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }

    .popout__0bd4a .trailing_c38106 {
        z-index: 1100;
    }

    #app-mount,
    .modal_e44912 {
        --custom-viewport-padding: calc(var(--space-40) + var(--custom-app-top-bar-height));
    }

    .layerContainer__59d0d .carouselModal_d3a6f0 {
        margin-top: var(--custom-viewport-padding);
    }

    .winButtons_c38106 {
        padding: 0;
    }

    .winButton_c38106 {
        height: calc(var(--window-control-size) * 2);
    }

    .winButtons_c38106::before {
        height: 16px;
        width: var(--space-xs);
        box-sizing: border-box;
        margin: 0;
    }

    /* ── Fixed right margin: reserve space for window controls + icons ── */
    /* Assumes at most 6 header icons. Adjust if you have more/less. */
    .base__5e434 {
        --button-count: 6;
        --top-bar-right-margin: calc(32px * var(--button-count) + (var(--button-count) + 2) * var(--space-xs) + 6 * var(--window-control-size) + var(--window-controls-padding));

        .trailing_c38106 > div:not(.winButtons_c38106),
        .trailing_c38106 div.clickable__81391 {
            width: 32px !important;
            height: 32px !important;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .trailing_c38106 > div:not(.winButtons_c38106) svg,
        .trailing_c38106 div.clickable__81391 svg {
            width: 20px;
            height: 20px;
        }
    }

    .toolbar__9293f {
        padding-right: var(--top-bar-right-margin);
    }

    .navBarContent__131a1,
    .headerBarContent__1a9ce {
        padding-right: var(--top-bar-right-margin);
    }

    .headerBar__8a7fc {
        padding-right: calc(var(--top-bar-right-margin) + var(--space-sm));
    }

    .searchFloating__1ac1c {
        right: calc(var(--top-bar-right-margin) + var(--space-sm));
    }

    .balanceWidgetMenu__80679 {
        margin-right: var(--top-bar-right-margin);
    }

    .inviteToolbar__133bf {
        padding-right: 0;
    }

    .chat_f75fb0 > .layerContainer__59d0d {
        z-index: 999;
    }

    .subtitleContainer_f75fb0 {
        height: var(--custom-channel-header-height);
    }

    .title_f75fb0.container__9293f {
        min-height: 0;
        height: auto;
    }

    .followButton_f75fb0 {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* ── Notice bar offset (always applies, non-dynamic) ── */
    .notice__6e2b9 ~ .bar_c38106 .trailing_c38106,
    .notice__29487 ~ .bar_c38106 .trailing_c38106 {
        top: calc(var(--top-bar-height) + 8px + 40px + var(--gap) + var(--border-thickness));
    }

    /* ── Sidebar shift: just target the sidebar directly ── */
    .guildSidebar_f75fb0 ~ .bar_c38106 .trailing_c38106,
    .sidebarContainer__656be ~ .bar_c38106 .trailing_c38106 {
        right: calc(var(--gap) + var(--border-thickness) + 480px);
    }

    /* ── Thread/VC sidebar: remove padding when sidebar open ── */
    .threadSidebarOpen_f75fb0 .toolbar__9293f,
    .sidebarOpen_cb9592 .toolbar__9293f {
        padding-right: 0;
    }

    /* ── Mac/Vesktop override ── */
    /* This still uses --button-count but is static, so no :has() needed */
    .base__5e434 {
        --top-bar-right-margin: calc(32px * var(--button-count) + var(--button-count) * var(--space-xs));
    }

    /* ── VC popout ── */
    .popout__0bd4a {
        --top-bar-right-margin: calc((var(--window-control-size) * 6) + var(--window-controls-padding) + var(--space-xs));
    }

    /* ── Settings modal portrait ── */
    @media screen and (max-width: 1080px) {
        .modal_e44912 {
            padding-top: 0;
        }

        .trailing_c38106 {
            top: calc(8.5px + var(--border-thickness));
            right: var(--border-thickness);
        }

        .contentHeader_e9e3ed {
            padding-right: calc((var(--window-control-size) * 6) + var(--window-controls-padding) + var(--space-xs) * 2);
        }
    }

    /* ── Hide page seek arrows ── */
    .bar_c38106 .backForwardButtons__63abb {
        display: none;
    }

    /* ── Hide trailing in idle VC ── */
    /* Uses .idle class directly on root_bfe55a inside callContainer */
    .callContainer_cb9592 > .root_bfe55a.idle_bfe55a ~ .trailing_c38106,
    .callContainer_cb9592:has(.idle_bfe55a) .trailing_c38106 {
        transform: translateY(-8px);
        opacity: 0;
    }

    .callContainer_cb9592 .trailing_c38106:hover,
    .callContainer_cb9592 > .root_bfe55a.idle_bfe55a ~ .trailing_c38106:hover {
        transform: translateY(0);
        opacity: 1;
    }
}
I have tested this replacement and seem to solve the issue without largely change the theme, might need deeper test to check if there is any conflict or visual change

[refact0r]

there's a reason we have the :has() there. using a fixed button count would create unnecessary space in the header. i will look into it but its really not that simple

[Getbricked]

there's a reason we have the :has() there. using a fixed button count would create unnecessary space in the header. i will look into it but its really not that simple

you are right detail fix is very rough but I just want to point out the issue hope you can find suitable solution soon!

[refact0r]

thx for pointing it out anyway

[JourneyOver]

Was wondering what was going on, been a while (like over a month) since I did a restart (which would of also restarted discord) after a recent restart discord has been super laggy unless I disable the theme.