openwrt-dark-material/custom.css

:root {
    color-scheme: light dark;
    --font-body: "system-ui", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif, "Helvetica Neue", Helvetica, "Hiragino Sans GB";

    --main-color: hsl(192, 100%, 44%);
    --header-bg: hsl(192, 100%, 44%);
    --header-color: hsl(0, 0%, 100%);
    --bar-bg: hsl(194, 66%, 61%);
    --menu-bg-color: hsl(0, 0%, 100%);
    --menu-color: hsl(213, 5%, 39%);
    --menu-color-hover: hsl(225, 6%, 13%);
    --main-menu-color: hsl(225, 6%, 13%);
    --submenu-bg-hover: hsl(0, 0%, 83%);
    --submenu-bg-hover-active: hsl(192, 100%, 44%);
    --main-background: hsl(0, 0%, 100%);

    --grey-dd: hsl(0, 0%, 87%);
    --grey-d4: hsl(0, 0%, 83%);
    --grey-cc: hsl(0, 0%, 80%);
    --grey-bb: hsl(0, 0%, 73%);
    --grey-99: hsl(0, 0%, 60%);
    --grey-77: hsl(0, 0%, 47%);
    --grey-66: hsl(0, 0%, 40%);
    --grey-40: hsl(0, 0%, 25%);
    --grey-10: hsl(0, 0%, 6%);

    --theme-background: hsl(0, 0%, 100%);
    --theme-text-on-background: hsl(0, 0%, 0%);
    --theme-alt-bg: hsl(0, 0%, 97%);
    --theme-sheet: hsl(0, 0%, 93%);

    --text-on-alt: hsl(0, 0%, 100%);
    --bottom-border-shadow: rgba(0, 0, 0, .26);
    --error: hsl(0, 100%, 50%);
    --footer-text: hsl(0, 0%, 67%);
    --loading-text: hsl(0, 0%, 53%);
    --btn-color: rgba(0, 0, 0, .87);
    --modal-overlay-bg: rgba(0, 0, 0, .70);
    --mask-bg: rgba(0, 0, 0, .56);
    --alert-text-shadow: rgba(0, 0, 0, .10);
    --abbr-color: hsl(195, 100%, 22%);
    --danger-color: hsl(11, 100%, 69%);
    --warning-color: hsl(54, 77%, 75%);
    --success-color: hsl(120, 39%, 54%);
    --primary-border: hsl(208, 56%, 41%);
    --primary-background: hsl(208, 56%, 46%);
    --action-border: hsl(194, 67%, 56%);
    --action-background: hsl(194, 66%, 61%);
    --danger-border: hsl(2, 64%, 53%);
    --danger-background: hsl(2, 64%, 58%);
    --dismiss-border: hsl(35, 84%, 57%);
    --dismiss-background: hsl(35, 84%, 62%);
    --success-border: hsl(120, 39%, 49%);
    --success-background: hsl(120, 39%, 54%);
    --selection-error: hsl(0, 79%, 95%);
    --bg-indicator: hsl(205, 100%, 14%);
    --bg-selected: hsl(210, 68%, 82%);
    --bg-hover-image: linear-gradient(90deg, hsl(213, 60%, 77%) 0%, hsl(213, 53%, 68%) 100%);
    --dynlist-border: hsl(2, 64%, 53%);
    --dynlist-background: hsl(2, 64%, 58%);
    --dropdown-border-shadow: hsl(24, 2%, 56%);
    --label-warning: hsl(35, 84%, 62%);
    --italic-var: hsl(211, 100%, 42%);
    --modemenu-active: hsl(205, 100%, 14%);
    --title-color: hsl(204, 56%, 72%);
    --modal-li-color: hsl(0, 0%, 50%);
    --ins-border: hsl(120, 100%, 50%);
    --ins-background: hsl(120, 100%, 90%);
    --del-border: hsl(0, 100%, 50%);
    --del-background: hsl(0, 100%, 90%);

    --select-text: hsl(0, 0%, 33%);

    --filter-brightness: 1;

    --shadow-iface-1: rgba(255, 255, 255, .40);
    --shadow-iface-2: rgba(0, 0, 0, .20);
    --shadow-other-1: rgba(255, 255, 255, .20);
    --shadow-other-2: rgba(0, 0, 0, .05);

    --shadow-box-1: rgba(0, 0, 0, .16);
    --shadow-box-2: rgba(0, 0, 0, .12);
    --shadow-button-1: rgba(0, 0, 0, .12);
    --shadow-button-2: rgba(0, 0, 0, .20);
    --shadow-button-active-2: rgba(0, 0, 0, .23);
    --shadow-button-active-1: rgba(0, 0, 0, .19);
}

@media(prefers-color-scheme:dark) {
    :root {
        --main-color: hsl(192, 100%, 56%);
        --header-bg: hsl(192, 100%, 34%);
        --header-color: hsl(0, 0%, 0%);
        --bar-bg: hsl(194, 66%, 41%);
        --menu-bg-color: hsl(0, 0%, 5%);
        --menu-color: hsl(213, 5%, 69%);
        --menu-color-hover: hsl(225, 6%, 73%);
        --main-menu-color: hsl(225, 6%, 73%);
        --submenu-bg-hover: hsl(0, 0%, 40%);
        --submenu-bg-hover-active: hsl(192, 100%, 24%);
        --main-background: hsl(0, 0%, 0%);

        --grey-dd: hsl(0, 0%, 13%);
        --grey-d4: hsl(0, 0%, 17%);
        --grey-cc: hsl(0, 0%, 20%);
        --grey-bb: hsl(0, 0%, 27%);
        --grey-99: hsl(0, 0%, 40%);
        --grey-77: hsl(0, 0%, 53%);
        --grey-66: hsl(0, 0%, 60%);
        --grey-40: hsl(0, 0%, 75%);
        --grey-10: hsl(0, 0%, 94%);

        --theme-background: hsl(0, 0%, 0%);
        --theme-text-on-background: hsl(0, 0%, 100%);
        --theme-alt-bg: hsl(0, 0%, 3%);
        --theme-sheet: hsl(0, 0%, 7%);

        --text-on-alt: hsl(0, 0%, 0%);
        --bottom-border-shadow: rgba(255, 255, 255, .26);
        --error: hsl(0, 100%, 30%);
        --footer-text: hsl(0, 0%, 33%);
        --loading-text: hsl(0, 0%, 47%);
        --btn-color: rgba(255, 255, 255, .87);
        --modal-overlay-bg: rgba(255, 255, 255, .70);
        --mask-bg: rgba(255, 255, 255, .56);
        --alert-text-shadow: rgba(255, 255, 255, .10);
        --abbr-color: hsl(195, 100%, 78%);
        --danger-color: hsl(11, 100%, 31%);
        --warning-color: hsl(54, 77%, 35%);
        --success-color: hsl(120, 39%, 36%);
        --primary-border: hsl(208, 56%, 59%);
        --primary-background: hsl(208, 56%, 54%);
        --action-border: hsl(194, 67%, 44%);
        --action-background: hsl(194, 66%, 39%);
        --danger-border: hsl(2, 64%, 47%);
        --danger-background: hsl(2, 64%, 42%);
        --dismiss-border: hsl(35, 84%, 43%);
        --dismiss-background: hsl(35, 84%, 38%);
        --success-border: hsl(120, 39%, 51%);
        --success-background: hsl(120, 39%, 46%);
        --selection-error: hsl(0, 79%, 25%);
        --bg-indicator: hsl(205, 100%, 86%);
        --bg-selected: hsl(210, 68%, 18%);
        --bg-hover-image: linear-gradient(90deg, hsl(213, 60%, 23%) 0%, hsl(213, 53%, 32%) 100%);
        --dynlist-border: hsl(2, 64%, 47%);
        --dynlist-background: hsl(2, 64%, 42%);
        --dropdown-border-shadow: hsl(24, 2%, 44%);
        --label-warning: hsl(35, 84%, 38%);
        --italic-var: hsl(211, 100%, 58%);
        --modemenu-active: hsl(205, 100%, 86%);
        --title-color: hsl(204, 56%, 28%);
        --modal-li-color: hsl(0, 0%, 10%);
        --ins-border: hsl(120, 100%, 50%);
        --ins-background: hsl(120, 100%, 10%);
        --del-border: hsl(0, 100%, 50%);
        --del-background: hsl(0, 100%, 10%);

        --select-text: hsl(0, 0%, 67%);

        --filter-brightness: 0.6;

        --shadow-iface-1: rgba(0, 0, 0, .40);
        --shadow-iface-2: rgba(255, 255, 255, .20);
        --shadow-other-1: rgba(0, 0, 0, .20);
        --shadow-other-2: rgba(255, 255, 255, .05);

        --shadow-box-1: rgba(255, 255, 255, .16);
        --shadow-box-2: rgba(255, 255, 255, .12);
        --shadow-button-1: rgba(255, 255, 255, .12);
        --shadow-button-2: rgba(255, 255, 255, .20);
        --shadow-button-active-1: rgba(255, 255, 255, .19);
        --shadow-button-active-2: rgba(255, 255, 255, .23);
    }

    .main>.main-left>.nav>li:last-child::before,
    .main>.main-left>.nav>.slide>.menu::before {
        filter: invert();
    }
}

:root {
    --ifacebox-shadow: inset 0 1px 0 var(--shadow-iface-1), 0 1px 2px var(--shadow-iface-2);
    --commandbox-shadow: inset 0 1px 0 var(--shadow-other-1), 0 1px 2px var(--shadow-other-2);
    --ifacebadge-shadow: inset 0 1px 0 var(--shadow-other-1), 0 1px 2px var(--shadow-other-2);
    --box-shadow: 0 2px 2px 0 var(--shadow-box-1), 0 0 2px 0 var(--shadow-box-2);
    --shadow-button: 0 0 2px var(--shadow-button-1), 0 2px 2px var(--shadow-button-2);
    --shadow-button-up: 0 0 2px var(--shadow-button-1), 0 -2px 2px var(--shadow-button-2);
    --shadow-button-active: 0 10px 20px var(--shadow-button-active-1), 0 6px 6px var(--shadow-button-active-2);
    --shadow-button-active-up: 0 -10px 20px var(--shadow-button-active-1), 0 -6px 6px var(--shadow-button-active-2);
    --zonebadge-filter: brightness(var(--filter-brightness));

    --empty-grad-1: rgba(204, 204, 204, .5);
    --empty-grad-2: rgba(255, 255, 255, .5);
    --zonebadge-empty-gradient: repeating-linear-gradient(45deg,
            var(--empty-grad-1),
            var(--empty-grad-1) 5px,
            var(--empty-grad-2) 5px,
            var(--empty-grad-2) 10px);
    --zonebadge-empty: hsl(0, 0%, 25%);
}

.cbi-section-table-row td.td[data-name=_ifacestat] {
    text-align: left !important
}

.cbi-section-table-row td.td[data-name=_ifacestat]>div {
    text-align: left;
    display: inline-block
}

div[data-tab]>div>svg {
    background-color: var(--theme-alt-bg)
}