Skip to content

Thingsboard 实现黑暗模式 Dark Mode

Jump to bottom
codeHui edited this page Mar 1, 2024 · 7 revisions

先上效果

image

image

1,增加黑暗模式的CSS

image

.tb-widget-container > .tb-widget {
    border-radius: 8px;
}

gridster-item:not(.tb-noselect) > .tb-widget-container > .tb-widget {
    cursor: default !important;
}

.tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-row {
    cursor: pointer;
}

.tb-widget-container > .tb-widget .tb-legend-keys {
    cursor: pointer;
}

.tb-dashboard-page.dark tb-dashboard > div {
    background-color: #0A1F36 !important; /* rgb(238, 238, 238)*/
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget {
    background: #0D2743 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget svg tspan {
    fill: rgba(255, 255, 255, 0.87) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-doughnut-legend-item-label div {
    color: rgba(255, 255, 255, 0.38) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-doughnut-legend-item-value {
    color: rgba(255, 255, 255, 0.87) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .flot-text {
    color: rgba(255, 255, 255, 0.87) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .flot-text > div > div {
    color: rgba(255, 255, 255, 0.87) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-table .mat-mdc-header-row {
    background-color: #0D2743 !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-table .mat-mdc-header-cell.mat-mdc-table-sticky {
    background-color: #0D2743 !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky {
    background-color: #0D2743 !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-table .mat-mdc-header-cell {
    color: rgba(255, 255, 255, 0.87) !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-table .mat-mdc-cell {
    color: rgba(255, 255, 255, 0.87) !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-arrow {
    color: rgba(255, 255, 255, 0.57) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-divider {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-input-element::placeholder {
    color: rgba(255, 255, 255, 0.57) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-input-element::-moz-placeholder {
    color: rgba(255, 255, 255, 0.57) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-input-element::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.57) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-input-element:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.57) !important;
}


.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-table .mat-mdc-cell .mdc-checkbox__background,.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-table .mat-mdc-header-cell .mdc-checkbox__background {
    border-color : rgba(255, 255, 255, 0.57) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button mat-icon {
    color : rgba(255, 255, 255, 0.57) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget mat-toolbar.mat-mdc-table-toolbar:not([color="primary"]) button.mat-mdc-icon-button mat-icon {
    color : rgba(255, 255, 255, 0.57) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-table .mat-mdc-cell button.mat-mdc-icon-button[disabled][disabled] mat-icon {
    color : rgba(255, 255, 255, 0.2) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-paginator {
    color: rgba(255, 255, 255, 0.57) !important;
}


.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-paginator button.mat-mdc-icon-button {
    color : rgba(255, 255, 255, 0.57) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-paginator button.mat-mdc-icon-button[disabled][disabled] {
    color : rgba(255, 255, 255, 0.2) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-table-widget .mat-mdc-paginator .mat-mdc-select-value {
    color : rgba(255, 255, 255, 0.57) !important;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .mat-mdc-select-arrow {
    color : rgba(255, 255, 255, 0.57);
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, 
.tb-dashboard-page.dark .tb-widget-container > .tb-widget .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.tb-dashboard-page.dark .tb-widget-container > .tb-widget .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: rgba(255, 255, 255, 0.4);
}

.tb-dashboard-page.dark .tb-markdown-view div,
.tb-dashboard-page.dark .tb-markdown-view div.param,
.tb-dashboard-page.dark .tb-markdown-view .header .title,
.tb-dashboard-page.dark .tb-markdown-view p {
    color : rgba(255, 255, 255, 0.87);
}

.tb-dashboard-page.dark .tb-markdown-view div.param-title,
.tb-dashboard-page.dark .tb-markdown-view .header .subtitle {
    color : rgba(255, 255, 255, 0.6);
}


.tb-dashboard-page.dark .tb-powered-by-footer {
    color : rgba(255, 255, 255, 0.87) !important;
}

2, 导入我已经写好的黑暗模式切换组件，放到自己想放到地方

黑暗模式切换组件的导出JSON文件 https://github.com/codeHui/IoT-Thingsboard-architecture-and-source-code-analysis/blob/main/files/DarkModeSwitch.json image

实现原理

CSS 文件其实是我从官方demo里面扒出来的.

然后我把JS多加了一段jquery,使dashboard最上面的bar也跟随switch变化为黑暗模式的颜色 image

Clone this wiki locally