@media (prefers-color-scheme: dark) {

    /* start dark theme */
    :root {
        /* Backgrounds */
        --main-bg: #2e2e2e;
        /* Soft dark gray — base background */
        --dark-bg: #383838;
        /* Elevated surfaces like cards */
        --light-bg: #424242;
        /* Modals, popups, highlights */

        /* Fonts */
        --main-font: #ffffff;
        /* Clean, light gray text */
        --light-font: #b0b0b0;
        /* Medium emphasis */
        --dark-font: #888888;
        /* Low emphasis */

        /* Theme Colors */
        --main-theme: #5a9bd8;
        /* Soft muted blue (accessible but subtle) */
        --theme-font: #f5f5f5;
        /* White-ish for links and emphasis */

        /* Borders and Effects */
        --border: #3c3c3c;
        /* Subtle border against dark-bg */
        --shadow: rgba(0, 0, 0, 0.15);
        /* Gentle depth */
        --no-shadow: rgba(255, 255, 255, 0.02);

        /* Status Colors */
        --green: #85d0a1;
        /* Softer green */
        --info: #f3b5c9;
        /* Muted pink */
        --error: #ef7676;
        /* Gentle red */

        /* Table Headers */
        --th-color: #a0a0a0;
    }

    /******************
    MAIN PAGE
*****************/

    .option-list {
        background-color: var(--main-bg) !important;
    }

    .option-list li:hover {
        background-color: var(--shadow) !important;
    }

    .star-empty {
        color: var(--dark-font);
    }

    .cur-view-container .fa-star.fas {
        color: var(--dark-font);
    }

    .cur-view-path {
        background: var(--main-bg) !important;
        border-bottom: 1px solid var(--border) !important;
    }

    /* Borders */
    .sf-border-bottom {
        border-bottom: 1px solid var(--border) !important;
    }

    /* Shared with me and Shared with all - bottom borders */
    #files-content-container .libraries-empty-tip-in-list-mode {
        border-bottom: 1px solid var(--border) !important;
    }

    /* Dir listing */
    .dir-content-main {
        background-color: var(--main-bg) !important;
    }

    .grid-item:hover {
        background: var(--shadow) !important;
    }

    /* Sidebar selection */
    .side-panel .side-nav .side-nav-con .nav-item {
        background-color: var(--main-bg) !important;
    }

    .side-panel .nav-pills .nav-item .nav-link.active {
        background-color: var(--shadow) !important;
        color: var(--main-font) !important;
    }

    .side-panel .nav-pills .nav-item .nav-link:hover {
        background-color: var(--shadow) !important;
    }

    /* "Files" tree */
    .tree-section .tree-section-header:hover {
        background-color: var(--shadow) !important;
    }

    .tree-section .tree-section-header-operation:hover {
        background-color: var(--shadow) !important;
    }

    /* Files/folder right buttons */
    .tree-node .right-icon:hover {
        background-color: var(--shadow) !important;
    }

    /* "Others" tree */
    .dir-others .dir-others-item:hover {
        background-color: var(--shadow) !important;
    }

    .dir-others .tree-section-header:hover {
        background-color: var(--shadow) !important;
    }

    /* Collapse button */
    .dir-others .tree-section-header-operation:hover {
        background-color: var(--shadow) !important;
    }

    /* Path buttons and items */
    .cur-view-path-btn:hover {
        background-color: var(--shadow) !important;
    }

    .path-item:hover {
        background-color: var(--shadow) !important;
    }

    /* File details */
    .dirent-detail-item-value:hover {
        background-color: var(--shadow) !important;
    }

    .collaborator-item {
        background: var(--border) !important;
    }

    .cur-view-detail {
        border-left: 1px solid var(--border) !important;
    }

    .detail-control:hover {
        background-color: var(--shadow) !important;
    }

    .file-details-collapse-header-operation:hover {
        background-color: var(--shadow) !important;
    }

    .dirent-detail-item-name-value {
        color: white !important;
    }


    /* Tags popover (and most other popovers i think) */
    .popover {
        background-color: var(--main-bg) !important;
        border: 1px solid var(--border) !important;
    }

    .tag-list-footer {
        border-top: 1px solid var(--border) !important;
    }

    .tag-list-item .hl {
        background: var(--shadow) !important;
    }

    /* Nav bottom button */
    .side-nav .side-nav-bottom-toolbar:hover {
        background: var(--shadow) !important;
    }

    /* Toast */
    .seahub-toast-alert-container {
        background-color: var(--shadow) !important;
    }

    .seahub-toast-alert-container .toast-text-title {
        color: white !important;
    }

    .seahub-toast-alert-container .toast-close {
        color: white !important;
    }

    /* Activities modifiers dropdown */
    .cur-activity-modifiers:hover {
        background-color: var(--shadow) !important;
    }

    .activity-modifier-selector-container {
        background: var(--main-bg) !important;
        border: 1px solid var(--border) !important;
    }

    .activity-selected-modifiers {
        background: var(--main-bg) !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .activity-user-item:hover {
        background: var(--shadow) !important;
    }

    .activity-selected-modifier {
        background: var(--border) !important;
    }

    .empty-tip .empty-tip-title {
        color: white;
         !important;
    }

    /* Trash clear dropdown */
    .css-1xweo3b-control-control {
        background-color: var(--shadow) !important;
    }

    .css-1dimb5e-singleValue {
        color: var(--main-font) !important;
    }

    .css-4l7m3m-option {
        background-color: var(--shadow) !important;
    }

    .css-1nmdiq5-menu {
        background-color: var(--shadow) !important;
    }

    .css-zlgjaa-control {
        background-color: var(--shadow) !important;
        border: 1px solid var(--border) !important;
    }

    .css-1j5ra8z-option {
        background-color: var(--main-bg) !important;
    }

    .css-1xweo3b-control-control:hover {
        background-color: var(--shadow) !important;
    }

    /* Share link buttons */
    .share-dialog-side .nav-pills .nav-item .nav-link.active {
        background-color: var(--shadow) !important;
    }

    .share-dialog-side .nav-pills .nav-item .nav-link:hover {
        background-color: var(--shadow) !important;
    }

    body {
        color: var(--main-font);
        background-color: var(--main-bg);
    }

    #header,
    .main-panel-north,
    .side-panel-north {
        background: var(--dark-bg) !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .dir-content-nav {
        background-color: var(--main-bg);
        border-right: 1px solid var(--border);
    }

    .border-left-show:before {
        background-color: var(--dark-bg);
    }

    .cur-view-path:after {
        border-bottom: 1px solid var(--border) !important;
    }

    .side-search-form .input,
    .side-search-form .input:focus {
        background: var(--light-bg);
        box-shadow: inset 0 1px 2px var(--shadow);
    }

    .btn-white,
    .tabnav button,
    .repo-file-list-topbar .op-btn {
        background: var(--light-bg);
    }

    table th {
        border-bottom: 1px solid var(--border);
        color: var(--th-color);
    }

    table td {
        border-bottom: 1px solid var(--border);
        color: var(--main-font);
    }

    .sf-heading {
        border-bottom: 1px solid var(--main-bg);
        color: var(--theme-font);
    }

    .side-nav-footer {
        background: var(--dark-bg);
        border-top: 1px solid var(--border);
    }

    .side-panel-footer {
        border-right: 1px solid var(--border) !important;
    }

    .side-panel-center {
        border-right: 0px solid var(--border) !important;
    }


    .mobile-operation-menu {
        background: var(--main-bg);
    }

    .side-panel {
        background: var(--main-bg);
    }

    .side-panel-north {
        border-right: 0px solid var(--border);
    }

    .nav-pills .nav-item .nav-link {
        color: var(--main-font);
    }

    .tr-highlight,
    .tree-node-inner-hover {
        background-color: var(--dark-bg);
    }

    .tree-node-hight-light {
        color: var(--main-font);
        background-color: var(--dark-bg) !important;
    }

    .tr-active {
        background-color: var(--dark-bg) !important;
    }

    .grid-selected-active {
        background: var(--shadow) !important;
        border: 0px solid var(--border);
    }

    .grid-file-img-link .thumbnail {
        background: var(--dark-bg);
        border: 0px solid var(--border);
    }

    a,
    a:hover,
    .grid-file-name-link,
    .op-target,
    a:focus {
        color: var(--theme-font);
    }

    .path-link {
        color: var(--theme-font) !important;
    }

    .a-simulate {
        color: var(--theme-font) !important;
    }

    .grid-item:hover a {
        color: var(--theme-font);
    }

    .op-icon:hover,
    .op-icon:focus {
        color: var(--theme-font);
        padding-bottom: 0;
        border-bottom: none;
    }

    .op-icon.sf2-x,
    .op-icon,
    .sf-dropdown-toggle {
        color: var(--main-font);
    }

    .op-icon.sf2-x:hover,
    .op-icon.sf2-x:active,
    .sf-dropdown-toggle:hover,
    .sf-dropdown-toggle:active {
        color: var(--theme-font);
        text-decoration: none;
    }

    .empty-tip {
        border: 1px solid var(--border);
        background-color: var(--dark-bg);
    }

    .empty-tip h2 {
        color: var(--main-font);
    }

    .nav-pills .nav-item .nav-link.active {
        background-color: var(--dark-bg);
    }

    .nav-pills .nav-item .nav-link.active:hover {
        background-color: var(--dark-bg);
    }

    .nav-pills .nav-item .nav-link:hover {
        background-color: var(--dark-bg);
    }

    .nav-tabs {
        border-bottom: 1px solid var(--border);
    }

    .nav .nav-item .nav-link {
        color: var(--dark-font);
        border-bottom: 0rem solid var(--no-shadow);
    }

    .nav .nav-item .nav-link:hover {
        color: var(--main-font);
        border-bottom: 0rem solid var(--no-shadow);
    }

    .nav .nav-item .nav-link.active {
        color: var(--theme-font);
        border-bottom: 0rem solid var(--no-shadow);
    }


    .dropdown-menu {
        background-color: var(--light-bg);
        border: 1px solid var(--border);
    }

    .dropdown-divider {
        border-top: 1px solid var(--border);
    }

    .dropdown-item,
    .link-dropdown-item {
        color: var(--main-font);
    }

    .group-operations .group-op-item,
    .sf-view-mode-btn {
        color: var(--main-font);
        background-color: var(--light-bg);
        border: 1px solid var(--border);
    }

    .detail-btn button {
        color: var(--main-font);
        background-color: var(--light-bg);
        border: 1px solid var(--border);
    }

    .action-icon:focus,
    .action-icon:hover,
    .attr-action-icon:focus,
    .attr-action-icon:hover {
        color: var(--light-font) !important;
    }

    .sf-view-mode-btn.current-mode {
        background-color: var(--main-theme) !important;
        color: var(--light-font) !important;
    }

    .modal-header {
        background-color: var(--main-bg);
        border-bottom: 1px solid var(--border);
    }

    .modal-content {
        background-color: var(--main-bg);
    }

    .modal-footer {
        border-top: 1px solid var(--border);
    }

    .share-dialog-content .share-dialog-side {
        border-right: 1px solid var(--border);
    }

    .close:not(:disabled):not(.disabled):hover,
    .close:not(:disabled):not(.disabled):focus {
        color: var(--main-font);
        background-color: transparent;
    }

    #my-info {
        color: var(--main-font);
    }

    .close {
        color: var(--main-font);
        text-shadow: 0 1px 0 var(--shadow);
    }

    .form-control {
        color: var(--main-font);
        background-color: var(--light-bg);
        border: 1px solid var(--border);
    }

    .form-control:focus {
        color: var(--light-font);
        background-color: var(--light-bg);
        border: 1px solid var(--border);
        box-shadow: 0px 0px 1px var(--shadow);
    }

    .form-control::placeholder {
        color: var(--main-font);
    }

    .form-control:disabled,
    .form-control[readonly] {
        color: var(--dark-font);
        background-color: var(--light-bg);
    }

    input[type=text]:focus,
    input[type="password"]:focus {
        color: var(--light-font);
        background-color: var(--light-bg);
        border: 1px solid var(--border);
    }

    .sf-popover {
        background: var(--light-bg);
        border: 1px solid var(--border);
        box-shadow: 0 0 1px var(--no-shadow);
    }

    .up-outer-caret .inner-caret {
        border-bottom-color: var(--light-bg);
        border-color: var(--light-bg) transparent;
    }

    .inner-caret {
        border-top-color: var(--light-bg);
    }

    .outer-caret,
    .inner-caret {
        border-color: var(--light-bg) transparent;
    }

    .account-popup .item {
        border-bottom: 1px solid var(--light-bg);
    }

    .account-popup a.item:hover {
        background: var(--main-theme);
        color: var(--main-font);
    }

    .account-popup a.item {
        background: var(--light-bg);
        color: var(--main-font);
    }

    #quota-bar {
        border: 1px solid var(--no-shadow);
        background: var(--main-bg);
    }

    #quota-usage {
        background: var(--main-theme);
    }


    #notifications .title {
        color: var(--main-font);
    }

    #notice-popover .sf-popover-hd {
        border-bottom: 1px solid var(--light-bg);
    }

    #notice-popover .view-all,
    .detail-header .detail-title .name {
        color: var(--theme-font);
    }

    .notification-container {
        background: var(--main-bg);
    }

    .notification-body .notification-footer {
        background: var(--main-bg);
        border-top: 1px solid var(--no-shadow);
    }

    .notification-container .notification-header {
        border-bottom: 1px solid var(--no-shadow);
    }

    .notification-container .notification-body .mark-notifications {
        border-bottom: 1px solid var(--no-shadow);
    }

    #notice-popover li {
        border-bottom: 1px solid var(--no-shadow);
    }

    #notice-popover li:hover {
        background: var(--no-shadow);
    }

    .path-toolbar .toolbar-item a:hover {
        color: var(--theme-font);
    }

    .file-internal-link:hover {
        color: var(--theme-font);
    }

    .cur-view-detail {
        background-color: var(--main-bg);
        -webkit-box-shadow: -1px 0 2px 0 var(--shadow);
        box-shadow: -1px 0 2px 0 var(--shadow);
    }

    .detail-header {
        background-color: var(--main-bg);
        border-bottom: 0px solid var(--border);
    }

    .detail-container {
        border-left: 1px solid var(--border);
    }

    .detail-body {
        background-color: var(--main-bg);
    }

    .file-details-container {
        box-shadow: none;
    }

    .text-secondary {
        color: var(--main-font) !important;
    }


    .btn-secondary,
    .btn-primary {
        color: var(--main-font) !important;
        background-color: var(--light-bg) !important;
        border-color: var(--border) !important;
    }

    .btn-secondary:hover,
    .btn-primary:hover {
        color: var(--light-font) !important;
        background-color: var(--main-theme) !important;
        border-color: var(--border) !important;
    }

    .btn-secondary:focus,
    .btn-secondary.focus,
    .btn-primary:focus,
    .btn-primary.focus {
        box-shadow: 0 0 0 0px var(--shadow) !important;
    }

    .btn-secondary.disabled,
    .btn-secondary:disabled,
    .btn-primary.disabled,
    .btn-primary:disabled,
    .btn-outline-primary:disabled {
        color: var(--dark-font) !important;
        background-color: var(--main-bg) !important;
        border-color: var(--border) !important;
    }

    .btn-secondary:not(:disabled):not(.disabled):active,
    .btn-secondary:not(:disabled):not(.disabled).active,
    .show>.btn-secondary.dropdown-toggle,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show>.btn-primary.dropdown-toggle {
        color: var(--main-font) !important;
        background-color: var(--light-bg) !important;
        border-color: var(--border) !important;
    }

    .btn-secondary:not(:disabled):not(.disabled):active:focus,
    .btn-secondary:not(:disabled):not(.disabled).active:focus,
    .show>.btn-secondary.dropdown-toggle:focus,
    .btn-primary:not(:disabled):not(.disabled):active:focus,
    .btn-primary:not(:disabled):not(.disabled).active:focus,
    .show>.btn-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 0px var(--shadow) !important;
    }

    .btn-outline-primary {
        color: var(--main-font);
        border-color: var(--border);
    }

    .btn-outline-primary:hover {
        color: var(--light-font);
        background-color: var(--main-theme);
        border-color: var(--border);
    }

    .btn-outline-primary:focus,
    .btn-outline-primary.focus {
        box-shadow: 0 0 0 0px var(--shadow);
    }

    .btn-outline-primary.disabled,
    .btn-outline-primary:disabled {
        color: var(--dark-font);
    }

    .btn-outline-primary:not(:disabled):not(.disabled):active,
    .btn-outline-primary:not(:disabled):not(.disabled).active,
    .show>.btn-outline-primary.dropdown-toggle {
        color: var(--main-font);
        background-color: var(--light-bg);
        border-color: var(--border);
    }

    .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
    .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
    .show>.btn-outline-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 0px var(--shadow);
    }

    .uploader-list-view {
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 6px var(--shadow);
        box-shadow: 0 0 6px var(--shadow);
        background-color: var(--light-bg);
    }

    .uploader-list-header {
        background-color: var(--light-bg);
        color: var(--theme-font);
    }

    .uploader-list-content {
        background-color: var(--light-bg);
    }

    .progress-bar {
        color: var(--light-bg);
        background-color: var(--main-theme);
    }

    .progress {
        background-color: var(--main-bg);
    }

    .file-chooser-item .item-active {
        background: var(--main-theme) !important;
        color: var(--main-font);
    }

    .list-view-header:hover {
        background-color: var(--dark-bg);
    }

    .file-chooser-item .item-active .icon {
        color: var(--main-font) !important;
    }

    .op-bar {
        background: var(--main-bg);
    }

    .rename-container input:focus {
        background-color: var(--light-bg);
        border-color: var(--border);
        box-shadow: 0 0 0 2px var(--shadow);
        color: var(--main-font);
    }

    .rename-container input {
        border: 1px solid var(--border);
        color: var(--dark-font);
    }

    .side-nav-con [class^="sf2-icon-"],
    .side-nav-con [class^="sf3-font-"] {
        color: var(--dark-font);
    }

    .side-nav-con .active [class^="sf2-icon-"],
    .side-nav-con .active [class^="sf3-font-"],
    .side-nav-con .active .sharp {
        color: var(--theme-font);
    }

    .big-new-file-button {
        background: var(--light-bg);
        border: 1px solid var(--border);
    }

    .big-new-file-button:focus,
    .big-new-file-button:hover {
        border-color: var(--border);
        color: var(--main-font);
        background: var(--main-theme);
    }

    .repo-info-bar {
        border: 1px solid var(--light-bg);
        background-color: var(--light-bg);
    }

    .used-tag-files {
        color: var(--theme-font);
    }

    .tag-list-stacked .file-tag {
        border: 0.125rem solid var(--dark-bg);
    }

    .table-drop-active:before {
        border: 1px solid var(--main-theme);
    }

    .tr-drop-effect {
        background-color: var(--dark-bg)
    }

    /******************
    ADMIN MENU 
*****************/

    #right-panel .hd,
    .tabnav,
    .repo-file-list-topbar,
    .commit-list-topbar,
    .file-audit-list-topbar,
    #dir-view .repo-op,
    .wiki-top {
        background: var(--main-bg);
        border-bottom: 1px solid var(--border);
    }

    .seahub-web-settings h4,
    .header-bar h3 {
        background: var(--main-bg);
        border-bottom: 1px solid var(--border);
    }

    .side-nav {
        border-right: 1px solid var(--border);
        background-color: var(--main-bg);
        box-shadow: 0 0 4px var(--shadow);
    }

    .logo-container {
        background: var(--dark-bg);
        border-bottom: 1px solid var(--border);
    }

    .side-tabnav-tabs .tab a:hover {
        background-color: var(--dark-bg);
    }

    .side-tabnav-tabs .tab a:focus {
        color: var(--main-font);
    }


    .side-tabnav-tabs .tab a {
        color: var(--main-font);
    }

    .side-tabnav-tabs .tab-cur [class^="sf2-icon-"],
    .side-tabnav-tabs .tab-cur [class^="sf3-font-"] {
        color: var(--light-font);
    }

    .side-tabnav-tabs .tab-cur a:hover {
        background-color: var(--main-theme);
        color: var(--light-font);
    }

    .side-tabnav-tabs .tab-cur a:focus {
        color: var(--light-font);
    }

    .side-tabnav-tabs .tab-cur a {
        background-color: var(--main-theme);
        color: var(--light-font);
    }

    .header-bar {
        background: var(--main-bg);
    }

    .side-tabnav h3.hd,
    .side-tabnav .hd h3 {
        color: var(--theme-font);
    }

    .tabnav-tab-cur a,
    .tabnav-tab a:hover,
    .wiki-nav .cur-item .link,
    .wiki-nav .link:hover,
    #right-panel .hd .ui-state-active .a,
    #right-panel .hd .a:hover {
        color: var(--theme-font);
        border-bottom-color: var(--main-theme);
    }

    #right-panel .hd .a,
    .tabnav-tab a,
    .wiki-nav .link {
        color: var(--dark-font);
        border-bottom: 3px solid transparent;
    }

    #simplemodal-container {
        background-color: var(--main-bg);
    }

    .hl {
        background-color: var(--dark-bg);
    }

    .empty-tips {
        background-color: var(--dark-bg);
        border: solid 1px var(--border);
        box-shadow: inset 0 0 4px var(--shadow);
    }

    dt,
    h2 {
        color: var(--main-font);
    }

    h4,
    h3 {
        color: var(--theme-font);
    }

    input {
        color: var(--light-font);
        background-color: var(--light-bg);
        background: var(--light-bg);
        border: 1px solid var(--border);
    }

    textarea {
        background-color: var(--light-bg) !important;
    }

    input:focus,
    button:focus,
    select:focus,
    textarea:focus {
        border-color: var(--border);
    }

    input,
    button,
    select {
        border-color: var(--main-bg);
    }

    textarea {
        border-color: var(--main-bg) !important;
        border-radius: 0px !important;
    }

    body,
    input,
    textarea,
    button,
    select {
        color: var(--main-font);
    }

    #info-bar {
        color: var(--theme-font);
        background: var(--dark-bg);
        border: 1px solid var(--main-theme);
    }

    button,
    input[type=submit],
    input[type=button],
    input.submit,
    .sf-btn-link,
    .fileinput-button,
    select {
        background: var(--light-bg);
        border: 1px solid var(--border);
        color: var(--main-font);
    }

    input[type=submit]:hover,
    input[type=reset]:hover,
    input[type=button]:hover,
    button:hover,
    .sf-btn-link:hover,
    .fileinput-button:hover {
        background: var(--main-theme);
        color: var(--light-font);
    }

    .web-setting-form .cancel,
    .inline-rename-form .cancel {
        color: var(--error);
    }

    .select2-drop {
        background: var(--light-bg);
        color: var(--main-font);
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 4px 5px var(--shadow);
        box-shadow: 0 4px 5px var(--shadow);
    }

    .select2-results .select2-highlighted {
        background: var(--main-theme);
        color: var(--main-font);
    }

    .select2-default {
        color: var(--main-font) !important;
    }

    .select2-container-multi .select2-choices {
        border: 1px solid var(--border);
        background-color: var(--light-bg);
        color: var(--main-font);
    }

    .select2-results .select2-no-results,
    .select2-results .select2-searching,
    .select2-results .select2-ajax-error,
    .select2-results .select2-selection-limit {
        background: var(--light-bg);
        color: var(--main-font);
    }

    .select2-drop-active {
        border: 1px solid var(--border);
        color: var(--main-font);
    }

    .select2-drop.select2-drop-above.select2-drop-active {
        border-top: 1px solid var(--border);
    }

    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices {
        color: var(--main-font);
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 5px var(--shadow);
        box-shadow: 0 0 5px var(--shadow);
    }

    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices {
        color: var(--main-font);
        border: 1px solid var(--border);
    }

    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 5px var(--shadow);
        box-shadow: 0 0 5px var(--shadow);
        color: var(--main-font);
    }

    .select2-container-multi .select2-choices .select2-search-choice {
        background: var(--main-theme);
        color: var(--main-font);
    }

    .select2-container-multi .select2-choices .select2-search-choice {
        color: var(--main-font);
        box-shadow: 0 0 2px var(--shadow) inset, 0 1px 0 var(--shadow);
    }


    .select2-container-multi .select2-choices .select2-search-field input.select2-active {
        background: var(--light-bg) url("select2-spinner.7b9776076d5f.gif") no-repeat 100% !important;
        color: var(--main-font);
    }

    .select2-results .select2-disabled.select2-highlighted,
    .select2-container-multi .select2-choices .select2-search-field input {
        color: var(--main-font);
        background: var(--light-bg);
    }

    .fileinput-button {
        background: var(--dark-bg);
    }

    .fileinput-button:hover {
        background: var(--light-bg);
    }

    .input-tip {
        color: var(--dark-font);
    }

    .select-white,
    .folder-perm-select,
    .share-permission-select,
    .user-role-select,
    .admin-role-select,
    .user-status-select {
        background: var(--light-bg);
        border: 1px solid var(--border);
    }

    .messages .info {
        background: var(--info);
        color: var(--light-font);
    }

    .messages .success {
        background: var(--green);
        color: var(--light-font);
    }

    .messages .error {
        background: var(--error);
        color: var(--light-font);
    }


    .info-item-heading {
        border-bottom: 1px solid var(--border) !important;
    }

    .border-left-show:before {
        background-color: var(--dark-bg) !important;
    }

    /******************
    PROFILE PAGE
*****************/

    .top-header {
        background: var(--dark-bg);
        border-bottom: 1px solid var(--border);
    }

    .heading {
        background: var(--main-bg) !important;
        color: var(--theme-font) !important;
    }

    .btn-outline-primary:hover {
        color: var(--main-font);
        background-color: var(--dark-bg);
        border-color: var(--border);
    }

    .btn-outline-primary {
        color: var(--main-font);
        background-color: var(--light-bg);
        border-color: var(--border);
    }

    .setting-item-heading {
        border-bottom: 1px solid var(--border);
    }

    .side-panel {
        border-right: 0px solid var(--border);
    }

    .user-setting-nav .nav-item .nav-link:hover {
        color: var(--theme-font);
    }

    .user-setting-nav .nav-item .nav-link {
        color: var(--main-font);
    }

    .user-setting-nav .nav-item.active .nav-link {
        color: var(--theme-font);
        border-color: var(--main-theme);
    }


    #user-profile {
        background: var(--dark-bg);
        border: 2px solid var(--shadow);

    }

    .user-profile-info {
        border-top: 1px solid var(--border);
    }

    .dirent-table-container td {
        text-align: right;
    }

    .text-orange {
        color: var(--theme-font) !important;
    }

    /******************
    LOGIN PAGE
*****************/

    .login-panel .name-input {
        border-radius: 3px 3px 0 0;
    }

    .login-panel {
        background: var(--shadow);
        box-shadow: 0 0 8px var(--shadow);
    }

    .login-panel .input {
        border: 1px solid var(--shadow);
    }

    .login-panel .passwd-input {
        border-radius: 0 0 3px 3px;
    }

    .new-narrow-panel {
        border: 1px solid var(--border);
        box-shadow: 0 3px 2px var(--shadow);
    }

    .new-narrow-panel .hd {
        color: var(--main-font);
        background: var(--dark-bg);
        border-bottom: 1px solid var(--border);
    }


    #lang-context-selector a {
        color: var(--main-font);
    }

    #lang-context-selector a:hover {
        color: var(--light-font);
        background: var(--light-bg);
    }

    /******************
    FILE EDITOR
*****************/


    .file-view-content {
        background: var(--light-bg);
        border-bottom: 1px solid var(--border);
    }

    .file-view-tip {
        background: var(--light-bg);
        border: 1px solid var(--dark-bg);
        box-shadow: 0 0 6px var(--shadow);
    }

    .file-view-header {
        border-bottom: 1px solid var(--border);
        background: var(--main-bg);
    }

    .ReactCodeMirror {
        -webkit-box-shadow: 0 0 6px var(--shadow);
        box-shadow: 0 0 6px var(--shadow);
        border: 1px solid var(--border);
    }

    .CodeMirror {
        color: var(--main-font);
    }

    .CodeMirror-cursor {
        border-left: 1px solid var(--light-font);
    }

    .CodeMirror-linenumber {
        color: var(--dark-font);
    }

    .CodeMirror-selected,
    .CodeMirror-focused .CodeMirror-selected {
        filter: invert(70%);
    }

    .CodeMirror-gutter-filler,
    .CodeMirror-scrollbar-filler {
        background-color: var(--main-bg)
    }

    .CodeMirror-gutters {
        border-right: 1px solid var(--dark-bg);
        background-color: var(--main-bg);
    }

    .CodeMirror-lines {
        background: var(--main-bg);
    }

    dd {
        color: var(--theme-font);
    }

    .page {
        background: var(--main-bg);
        -webkit-box-shadow: 0 0 6px var(--shadow);
        box-shadow: 0 0 6px var(--shadow);
    }

    .ril__navButtonPrev:hover {
        background: rgba(0, 0, 0, .4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==") no-repeat 50%
    }

    .ril__navButtonNext:hover {
        background: rgba(0, 0, 0, .4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+") no-repeat 50%
    }

    .ril__closeButton:hover {
        background: rgba(0, 0, 0, .4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…UgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=") no-repeat 50%;
    }

    .ril__closeButton:hover {
        background: rgba(0, 0, 0, .4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=") no-repeat 50%
    }

    .ril__zoomInButton:hover {
        background: rgba(0, 0, 0, .4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+") no-repeat 50%
    }

    .ril__zoomOutButton:hover {
        background: rgba(0, 0, 0, .4) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=") no-repeat 50%
    }

    .seafile-ed-hovermenu {
        background-color: var(--light-bg);
        border: 1px solid var(--main-bg);
        -webkit-box-shadow: 0 1px 2px 0 var(--shadow);
    }


    /******************
  MD REDACTOR
 *****************/

    .sf-md-viewer-topbar-first,
    .sf-md-viewer-topbar-first-narrow {
        background-color: var(--dark-bg);
        border-bottom: 1px solid var(--border);
        -webkit-box-shadow: 0 3px 2px -2px var(--shadow);
        box-shadow: 0 3px 2px -2px var(--shadow);
    }

    .sf-editor-rich-menu {
        background-color: var(--main-bg);
    }

    .plain-editor-left-panel {
        background-color: var(--light-bg);
        border-right: 1px solid var(--border);
    }

    .editor,
    .plain-editor-right-panel {
        background: var(--main-bg);
        border: 1px solid var(--dark-bg);
    }

    .seafile-editor-topbar,
    .seafile-rich-editor-topbar {
        background-color: var(--main-bg);
        border-bottom: 1px solid var(--border);
        -webkit-box-shadow: 0 2px 1px -1px var(--shadow);
        box-shadow: 0 2px 1px -1px var(--shadow);
    }

    .header-list-container,
    .seafile-rich-editor-topbar .editor-btn-group {
        border-right: 1px solid var(--border);
        border-left: 1px solid var(--border);
    }

    .btn-active[data-active=true],
    .rich-icon-btn[data-active=true] {
        color: var(--light-font);
    }

    .button-container .btn,
    .button-container .rich-icon-btn,
    .rich-icon-btn {
        background-color: var(--main-bg);
    }


    .seafile-rich-editor-topbar .editor-btn-group {
        border-right: 1px solid var(--border);
        color: var(--main-font);
    }

    .upload-localimg-hover .btn:hover,
    .insert-file:hover,
    .rich-icon-btn-hover:hover {
        /*background-color: var(--main-theme);*/
        color: var(--light-font);
    }

    .custom-dropdown-list .dropdown-list-toggle:hover {
        background-color: var(--main-theme);
        border-radius: 3px;
    }

    .custom-dropdown-list .custom-dropdown-menu {
        background-color: var(--light-bg);
    }

    .header-list-container .header-list-body-highlight,
    .header-list-container .header-list-body-hover:hover {
        background-color: var(--main-bg);
    }

    .header-list-container .list-dropdown {
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 2px var(--shadow);
        box-shadow: 0 0 2px var(--shadow);
        background-color: var(--main-bg);
    }

    .header-list-container .header-list .list-dropdown-item:hover {
        background-color: var(--main-theme);
        color: var(--light-font);
    }

    .upload-localimg .btn,
    .rich-icon-btn {
        color: var(--main-font);
    }

    .upload-localimg-disable .btn {
        color: var(--dark-font);
    }

    .rich-icon-btn-disabled {
        color: var(--dark-font);
    }

    .rich-icon-btn-disabled:hover {
        color: var(--dark-font);
    }

    .article h1,
    .article h2,
    .article h3,
    .article h4,
    .article h5,
    .article h6 {
        color: var(--dark-font);
    }

    .article {
        color: var(--main-font);
    }

    .seafile-editor-main-panel {
        background-color: var(--light-bg);
    }

    .article tr:nth-child(2n+1) {
        background-color: var(--light-bg);
    }

    .article pre {
        background: var(--light-bg);
    }

    .article h2 {
        border-bottom: 1px solid var(--dark-font);
    }

    .article table td,
    .article table th,
    table {
        border-color: var(--dark-font);
    }

    .article table {
        border-left: 1px solid var(--dark-font);
        border-top: 1px solid var(--dark-font);
    }

    .article hr.active {
        border-top: 1px solid var(--dark-font);
    }

    .article .selected-cell {
        background-color: var(--dark-bg);
    }

    .article .selected-cell-top:before {
        border-top: 1px double var(--main-theme)
    }

    .article .selected-cell-bottom:before {
        border-bottom: 1px double var(--main-theme)
    }

    .article .selected-cell-left:before {
        border-left: 1px double var(--main-theme)
    }

    .article .selected-cell-right:before {
        border-right: 1px double var(--main-theme)
    }

    .seafile-editor-side-panel {
        border-left: 1px solid var(--border);
    }

    .outline-h2 {
        color: var(--dark-font);
    }

    .outline-h2:hover {
        color: var(--theme-font);
    }

    .outline-h3,
    .dirent-table-container td,
    .old-history-main h2 {
        color: var(--main-font);
    }

    .outline-h3:hover {
        color: var(--theme-font);
    }


    .side-panel .nav .nav-link.active {
        color: var(--theme-font);
    }

    .old-history-main .file-name,
    .old-history-main .commit-list .username,
    .old-history-main .go-back:hover {
        color: var(--theme-font);
    }

    .issue-card {
        background-color: var(--light-bg);
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 5px 5px -2px var(--shadow);
        box-shadow: 0 5px 5px -2px var(--shadow);
    }

    .seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:hover {
        color: var(--light-font);
        background-color: var(--no-shadow);
    }

    .seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button {
        background-color: var(--no-shadow);
        color: var(--main-font);
    }

    .seafile-comment-item .seafile-comment-info .seafile-comment-dropdown .seafile-comment-dropdown-btn {
        color: var(--light-font);
        background-color: var(--no-shadow);
    }

    .seafile-comment-item .seafile-comment-info .seafile-comment-dropdown:hover .seafile-comment-dropdown-btn {
        color: var(--main-font);
    }

    .seafile-comment-item-resolved {
        background-color: var(--green);
    }

    .seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:focus {
        background-color: var(--no-shadow);
    }

    .seafile-comment-item .seafile-comment-info .review-time {
        color: var(--theme-font);
    }

    .file-chooser-item .item-active {
        background: var(--dark-bg) !important;
        color: var(--main-font)
    }

    .file-chooser-item .item-active,
    .file-chooser-item .item-info:hover {
        -webkit-box-shadow: inset 0 0 1px var(--shadow);
        box-shadow: inset 0 0 1px var(--shadow);
    }

    .file-chooser-item .item-info:hover {
        background: var(--dark-bg);
    }

    .file-chooser-item .item-active .icon {
        color: var(--main-font);
    }

    .lds-ripple div {
        border: 4px solid var(--theme-font);
    }

    .article blockquote {
        color: var(--main-font);
        border-left: 4px solid var(--dark-font);
    }

    .add-tag-link {
        color: var(--main-font);
        background: var(--light-bg);
    }

    .add-tag-link:hover {
        color: var(--theme-font);
        background: var(--light-bg);
    }

    .add-related-file-link {
        color: var(--main-font);
    }

    .add-related-file-link:hover {
        color: var(--theme-font);
    }

    .tag-list-item .tag-demo {
        color: var(--dark-bg);
    }

    .file-tag-list .file-tag-item {
        background-color: var(--light-bg);
    }

    .file-tag-list .file-tag-item:hover {
        background-color: var(--dark-bg);
    }

    .table thead th,
    .text-wrap table thead th {
        border-bottom: 1px solid var(--border);
    }

    .image-full-button {
        border: 1px solid rgba(0, 40, 100, .12);
        background-color: var(--light-bg);
    }

    .image-full-button:hover {
        background-color: var(--light-bg)
    }

    .seafile-ed-hovermenu .seafile-ed-hovermenu-btn {
        background-color: var(--light-bg);
    }

    .seafile-ed-hovermenu .seafile-ed-hovermenu-triangle {
        background: var(--light-bg);
    }

    .seafile-editor-help {
        background-color: var(--light-bg);
        border-left: 1px solid var(--border);
    }

    .seafile-editor-help .help-header {
        background-color: var(--light-bg);
        border-bottom: 1px solid var(--border);
    }


    .help-shortcut {
        color: var(--main-font);
        border-bottom: 1px solid var(--border);
    }

    .help-content .help-shortcut-type {
        border-bottom: 1px solid var(--border);
    }

    .help-shortcut .key {
        background-color: var(--dark-bg);
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 1px 0 var(--border);
        box-shadow: 0 1px 0 var(--shadow);
    }

    .article .language-type select {
        background-color: var(--dark-bg);
    }


    /******************
  comment
*****************/

    .seafile-comment-footer .submit-comment {
        width: 80px;
    }

    .seafile-comment-list {
        background-color: var(--main-bg);
    }

    .seafile-comment-footer {
        background-color: var(--dark-bg);
        border-top: 1px solid var(--border);
    }

    textarea {
        color: var(--main-font);
    }

    .side-panel .nav {
        border-bottom: 1px solid var(--border);
    }

    .seafile-comment-title,
    .seafile-history-title {
        border-bottom: 1px solid var(--border);
        background-color: var(--dark-bg);
    }

    .seafile-comment-toggle-resolved {
        border-bottom: 1px solid var(--border);
        background-color: var(--dark-bg);
    }

    .seafile-comment {
        border-left: 0px solid var(--border);
    }

    .seafile-comment-footer .add-comment-input,
    .seafile-edit-comment .edit-comment-input {
        border: 1px solid var(--border);
        background-color: var(--light-bg);
    }

    .custom-switch-input:checked~.custom-switch-indicator {
        background: var(--dark-font);
    }

    .custom-switch-indicator:before {
        background: var(--light-bg);
    }

    .custom-switch-input:focus~.custom-switch-indicator {
        box-shadow: 0 0 0 0px var(--shadow);
        border-color: var(--border);
    }

    .custom-switch-indicator {
        background: var(--main-bg);
        border: 1px solid var(--dark-bg);
    }

    .participants .add-participants i {
        color: var(--main-font);
        border: 0px solid var(--border);
    }

    .participants .avatar {
        border: 0px solid var(--border);
    }

    .seafile-editor-module .side-panel .nav {
        border-bottom: 1px solid var(--border);
    }

    .seafile-editor-module .side-panel {
        background-color: var(--main-bg);
    }

    .seafile-editor-module .side-panel .nav .nav-link.active {
        color: var(--main-theme);
    }

    .comment-dialog,
    .comment-dialog-triangle {
        background-color: var(--main-bg);
    }

    .comment-dialog {
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 3px var(--shadow);
        box-shadow: 0 0 3px var(--shadow);
    }

    .comment-dialog textarea {
        background-color: var(--light-bg) !important;
    }

    .seafile-viewer-comment-btn:hover {
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 1px 2px 0 var(--shadow);
        box-shadow: 0 1px 2px 0 var(--shadow);
        background-color: var(--main-theme);
    }

    .seafile-viewer-comment-btn {
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 1px 2px 0 var(--shadow);
        box-shadow: 0 1px 2px 0 var(--shadow);
        background-color: var(--border);

    }

    /******************
       SHARE
*****************/


    .shared-file-view-md-header {
        background: var(--dark-bg);
        border-bottom: 1px solid var(--border);
    }

    .shared-file-view-body {
        background: var(--light-bg);
        border: 1px solid var(--border);
    }

    .shared-file-view-head {
        background: var(--main-bg);
    }

    .shared-file-view-head h2 {
        color: var(--theme-font);
    }

    .btn-success {
        color: var(-);
        background-color: var(--main-theme);
        border-color: var(--main-theme);
    }

    .btn-success:hover {
        color: var(--main-font);
        background-color: var(--green);
        border-color: var(--green);
    }

    .btn-success:focus,
    .btn-success.focus {
        box-shadow: 0 0 1px var(--no-shadow);
    }

    .btn-success.disabled,
    .btn-success:disabled {
        color: var(--dark-font);
        background-color: var(--main-theme);
        border-color: var(--main-theme);
    }

    .btn-success:not(:disabled):not(.disabled):active,
    .btn-success:not(:disabled):not(.disabled).active,
    .show>.btn-success.dropdown-toggle {
        color: var(--main-font);
        background-color: var(--green);
        border-color: var(--green);
    }

    .btn-success:not(:disabled):not(.disabled):active:focus,
    .btn-success:not(:disabled):not(.disabled).active:focus,
    .show>.btn-success.dropdown-toggle:focus {
        box-shadow: 0 0 2px var(--no-shadow);
    }

    #image-view {
        background: var(--main-bg);
        border: 1px solid var(--no-shadow);
    }

    .shared-file-view-body .md-view {
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 6px var(--shadow);
        box-shadow: 0 0 6px var(--shadow);
        background: var(--main-bg);
    }


    /******************
    HELP PAGE
*****************/


    .side-textnav-tabs .tab a {
        color: var(--main-font);
        border-bottom: 1px solid var(--no-shadow);
    }

    .side-textnav .hd,
    .side-info .hd {
        border-bottom: 1px solid var(--no-shadow);
    }

    .side-textnav-tabs .tab-cur a,
    .side-textnav-tabs .tab a:hover {
        color: var(--theme-font);
    }

    /******************
 EDITOR TEXT COLOR
*****************/

    pre {
        color: var(--main-font);
        text-shadow: none;
    }

    .CodeMirror pre {
        color: var(--main-font);
    }

    .cm-s-default .cm-atom {
        color: #63c3e3;
    }

    .cm-s-default .cm-tag {
        color: #ff4747;
    }

    .cm-s-default .cm-qualifier {
        color: #ffa347;
    }

    .cm-s-default .cm-metar {
        color: #ff6347;
    }

    .cm-s-default .cm-number {
        color: #a3d175;
    }

    .cm-s-default .cm-string {
        color: #75d1ba;
    }

    .article .virtual-link {
        color: #47a3ff;
    }

    .cm-s-default .cm-type {
        color: #ff4747;
    }

    .cm-s-default .cm-variable-2 {
        color: #ff6347;
    }

    .cm-s-default .cm-variable-3 {
        color: #ff7547;
    }

    .cm-s-default .cm-builtin {
        color: #75d1ba;
    }

    .cm-s-default .cm-header {
        color: #5ec6e8;
    }

    .cm-s-default .cm-link {
        color: var(--theme-font);
    }

    .cm-s-default .cm-comment {
        color: var(--dark-font);
    }

    .cm-s-default .cm-keyword {
        color: #ba75d1;
    }

    .cm-s-default .cm-def {
        color: #63a3e3;
    }

    .cm-s-default .cm-quote {
        color: #75d1a3;
    }

    .cm-s-default .cm-meta {
        color: #da7d6c;
    }

    .cm-s-default .cm-attribute {
        color: #8888dd;
    }


    /*INNER*/


    .css-vj8t7z {
        background-color: var(--light-bg) !important;
        border-color: var(--border) !important;
    }

    .css-2o5izw {
        background-color: var(--light-bg) !important;
        border-color: var(--border) !important;
        box-shadow: 0 0 2px var(--shadow) !important;
    }

    .css-xp4uvy {
        color: var(--main-font) !important;
    }

    .css-d8oujb {
        background-color: var(--dark-font) !important;
    }

    .css-15k3avv {
        background-color: var(--light-bg) !important;
    }

    .css-15agui6,
    [data-css-15agui6],
    .css-16hxgpx,
    [data-css-16hxgpx] {
        background-color: var(--light-bg) !important;
        box-shadow: 0 0 2px var(--shadow) !important;
    }

    .css-1tlqf55 {
        color: var(--main-font) !important;
    }

    .css-6lwhe4,
    [data-css-6lwhe4] {
        /* Error toast background */
        background-color: var(--main-bg) !important;
    }

    #wiki-file-content {
        background: var(--main-bg);
    }

    .panel-top {
        border-bottom: 1px solid var(--border);
        border-right: 1px solid var(--border);
    }

    .wiki-side-panel .panel-top {
        background: var(--main-bg);
    }

    .wiki-side-nav {
        border-right: 1px solid var(--border);
    }

    .side-panel .side-nav-folded,
    .side-panel .side-nav-folded .side-nav-con {
        background-color: var(--main-bg) !important;
    }

    .side-nav-folded #files-sub-nav {
        background-color: var(--border) !important;
    }

    .uploader-content-bar button {
	color: white
   }

.lib-setting-nav .nav-pills .nav-item .nav-link.active {
    background: #ededed3b;
    color: inherit;
    position: relative;
}
article sdoc-editor__article {
	background-color: #212529;
}

wiki2-side-panel {
	background-color: #212529;
}

.wiki-nav .wiki-page-item.selected-page {
    background-color: #212529;
    font-weight: 500;
    color: white;
}
    /* end dark theme */
}