test.css

:root {
    --main-bg-color: #141414;
    --main-text-color: #f6f6f6;
    --button-selected: #3d3d3d;
    --button-outline: #757575;
    --divider: #666666;
    --button-hover: #3d3d3d;
    --tab-bg: #292929;
}

#ribbonbar {
    background-color: var(--main-bg-color) !important;
    border-bottom: 1px solid var(--main-bg-color) !important;
}

.ribbon-button img {
    filter: invert(100%);
}

#txTglBtnSideBars {
    border: 1px solid var(--ribbon-border-color);
    background-color: transparent !important;
    color: var(--main-text-color) !important;
}

.tx-btn-icon-chevron svg path {
    fill: var(--main-text-color) !important;
}

#txTemplateDesignerContainer {
    color: var(--main-text-color) !important;
}

    #txTemplateDesignerContainer div.ribbon-button-selected {
        background-color: var(--button-selected);
        outline: 1px solid var(--button-outline) !important;
    }

    #txTemplateDesignerContainer div.ribbon-group:last-child {
        border-right: none !important;
    }


    #txTemplateDesignerContainer div.ribbon-group, #txTemplateDesignerContainer div.ribbon-group-control-group {
        border-right-color: var(--divider);
    }

    #txTemplateDesignerContainer .tab-content {
        background-color: var(--tab-bg);
        margin-left: 10px;
        border-radius: 5px;
    }

.txui-widget-content {
    background-color: var(--main-bg-color) !important;
    color: var(--main-text-color) !important;
}

.txui-widget-header {
    color: var(--main-text-color) !important;
}

.txui-widget-content table {
    color: var(--main-text-color) !important;
}

#txTemplateDesignerContainer .txSidebar .sidebarHeaderTitle {
    color: var(--main-text-color) !important;
}

#txTemplateDesignerContainer .txui-menu div.large-menu-item-long-caption-container {
    color: var(--main-text-color) !important;
}

    #txTemplateDesignerContainer .txui-menu div.large-menu-item-long-caption-container p:last-child,
    #txTemplateDesignerContainer .txui-menu div.large-menu-item-long-caption-container h1 {
        color: var(--main-text-color) !important;
    }

#txTemplateDesignerContainer .txInsertTableWizard {
    background-color: var(--main-bg-color);
}

#txTemplateDesignerContainer select, .txDialog select {
    color: var(--main-text-color) !important;
    background-color: transparent !important;
}

#txTemplateDesignerContainer div.ribbon-group-content input:disabled[type=number], #txTemplateDesignerContainer div.ribbon-group-content input:disabled[type=text] {
    background-color: transparent !important;
    border-color: #ddd;
}

#txTemplateDesignerContainer div.ribbon-group-content input[type=number], #txTemplateDesignerContainer div.ribbon-group-content input[type=text] {
    background-color: transparent !important;
    color: var(--main-text-color) !important;
}

#txTemplateDesignerContainer select {
    border-radius: 3px;
}

#txTemplateDesignerContainer .txui-widget-content a {
    color: var(--main-text-color) !important;
}

#txTemplateDesignerContainer select option {
    background-color: var(--main-bg-color) !important;
}

#txTemplateDesignerContainer ul.txui-menu li.txui-menu-item a.txui-state-focus {
    background-color: var(--button-hover) !important;
}

#txTemplateDesignerContainer div.ribbon-button {
    border-radius: 3px;
    outline: 1px solid transparent;
}

    #txTemplateDesignerContainer div.ribbon-button:not(.txui-state-disabled):hover {
        background-color: var(--button-hover) !important;
    }

#txTemplateDesignerContainer ul.tabs li a {
    color: var(--main-text-color) !important;
}

#txTemplateDesignerContainer ul.tabs {
    background-color: var(--main-bg-color) !important;
}

#txTemplateDesignerContainer div.scroll-button {
    background-color: var(--main-bg-color);
}

#txTemplateDesignerContainer div.scrollbar-wrapper {
    background-color: var(--main-bg-color) !important;
}

#txTemplateDesignerContainer div.txui-slider {
    border-radius: 0;
    position: relative;
    background: none !important;
    border: none !important;
}

#txTemplateDesignerContainer ul.tabs li a:hover {
    background-color: var(--main-bg-color) !important;
}

    #txTemplateDesignerContainer ul.tabs li a:hover:after {
        position: absolute;
        display: block;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: var(--divider);
        height: 10px;
        width: calc(100% - 32px);
        bottom: 0;
        left: 16px;
        content: "";
    }