html[data-theme="dark"] {
    color-scheme: dark;
    color: var(--foreground);
}

html[data-theme="dark"] body {
    background-color: var(--background) !important;
    color: var(--foreground);
}

html[data-theme="dark"] ._dash-loading {
    mix-blend-mode: lighten;
}

html[data-theme="dark"] ._dash-loading::after {
    filter: invert(1) hue-rotate(180deg);
    border-radius: 12px;
}

html[data-theme="dark"] .new-sidebar .ns-brand-logo,
html[data-theme="dark"] .login-modal-img {
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] .new-sidebar .ns-icon,
html[data-theme="dark"] .new-sidebar .ns-collapse-icon,
html[data-theme="dark"] .new-sidebar .ns-avatar,
html[data-theme="dark"] .ns-user-popover .ns-pop-icon,
html[data-theme="dark"] .ns-user-popover .ns-theme-icon {
    filter: invert(1);
    opacity: 0.75;
}

html[data-theme="dark"] .new-sidebar .new-nav:hover .ns-icon,
html[data-theme="dark"] .new-sidebar .new-nav.active .ns-icon {
    opacity: 1;
}

html[data-theme="dark"] .new-sidebar .new-nav.active .ns-label {
    font-weight: 500;
}

html[data-theme="dark"] .ns-pop-avatar {
    background-color: transparent;
    filter: invert(1);
}

html[data-theme="dark"] .page-breadcrumb .breadcrumb-separator {
    filter: invert(1);
    opacity: 0.6;
}

html[data-theme="dark"] .sc-icon-mono {
    filter: invert(1);
}