thingsBoard仪表板黑暗主题切换

本文主要讲解仪表板黑暗主题切换，通过一个仪表板来描述切换过程
仪表板资源如下，下载后，直接在新建仪表板的时候选择导入仪表板，导入即可，导入后要新建几个设备、配置设备规则，并配置上规则链才会，有数据。如果你不关注仪表板，可以直接看第五条。

1.基础资料

仪表板json 和规则链json,已上传到资源，还需要创建几个设备和设备配置如下

2.设备配置

设备和设备配置先按照图上的名字配置一下，后面有数据了再根据自己的需要用到自己的项目中

3.仪表板

配置好后，你就会看到仪表板中的数据，点击右上角图标就可以切换主题

4.如何在自己的项目中切换主题

步骤如下
1）编辑上面的仪表板
2）选中最上面的部件右键，复制最上面的部件到自己的仪表板中

3）点击仪表板最上面操作栏中的设置，向下拉选择高级设置，复制里面的样式，复制到自己的仪表板中就可以了

4）里面的样式其实也不全，需要根据实际情况补充，下面是我工作中遇到的又补充进来的，可以用下面这个，放到最下面

5.如果想根据项目需要，自己写个按钮修改主题样式，该怎么写？

1）首页自己写样式需要在HTML widgets部件写样式，这里写个最简单的

2）引入部件后写了个

点我变色

,代码如下

//html
var dashboardPage = $('.tb-dashboard-page')[0];
var darkMode = $(dashboardPage).hasClass('dark');
var darkModeExpression = darkMode ? '(darkMode !== false)' : 'darkMode';
return '<div id="changeColor" class="box" (click)="darkMode = '+darkModeExpression+' ? false : true" id="dark-mode-switch">点我变色</div>'

//样式
.box{
    cursor: pointer;
}
.box:hover{
    color:red;
}

3)添加点击变色的动作

var dashboardPage = $('.tb-dashboard-page')[0];
$(dashboardPage).toggleClass('dark');

4）在仪表板设置–>高级设置添加样式，样式代码在最下面

//黑暗样式代码块

.tb-widget-container > .tb-widget .tb-markdown-view .tb-progress-cover, .tb-widget-container > .tb-widget .tb-markdown-view .mat-drawer-container {
    background-color: #fff;
}
.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-markdown-view .tb-progress-cover, .tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-markdown-view .mat-drawer-container {
    background: #0D2743;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .tb-widget-loading {
    background: rgba(13, 39, 67, 0.15);
}


.tb-dashboard-page.dark .tb-widget-container > .tb-widget img.leaflet-tile {
    filter: invert(1) saturate(0) brightness(2);
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .leaflet-tile-pane {
    opacity: 0.4;
}


.tb-dashboard-page.dark .tb-widget-container > .tb-widget .leaflet-container {
    background-color: #0D2743;
}

.tb-dashboard-page.dark .tb-widget-container > .tb-widget .leaflet-control-container + div {
    background-color: rgba(13, 39, 67, 0.7) !important;
}


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

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-table-widget .mat-mdc-row > .mat-mdc-button-touch-target {
    fill: rgba(255, 255, 255, 0.87) !important;
   
}
.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 .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;
}
::v-deep .leaflet-bottom{
    display: none!important;
}
.tb-dashboard-page.dark .tb-widget-container > .leaflet-bottom .leaflet-right{
    display: none!important;
}
.tb-dashboard-page.dark .tb-widget-container > .tb-widget .leaflet-control-container > .leaflet-bottom .leaflet-right{
    display: none!important;
}
.leaflet-control-attribution .leaflet-control{
    display: none!important;
}
::v-deep .leaflet-control-attribution{
    display: none!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-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-paginator-icon {
    fill: rgba(255, 255, 255, 0.57) !important;
}