newbb/public/static/admin/css/themes/_dark.scss

// 通常用于背景色
$black-color :rgb(2, 17, 20);
// 通常用于字体颜色
$main-color :rgb(126, 252, 246);
// 通常用于边框
$less-main-color:rgb(6, 216, 215);

$plus-main-color:rgb(0, 125, 124);

// 通常用于激活状态,通常跟背景色搭配
$cover-color :rgba(62, 251, 251, 0.05);
// 更强的激活状态,适合做选项操作时使用
$active-color :rgba(62, 251, 251, 0.5);


$red-color :rgb(255, 0, 0);
$yellow-color:rgb(255, 255, 153);
$green-color :rgb(0, 255, 0);

& {
  background-color: $black-color;
  color: $main-color;
}

.layuimini-main {
  background-color: $black-color;
}

.layuimini-container {
  background-color: $black-color;
}

.layuimini-container .layui-table-tool {
  background-color: $black-color;
}

$box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);

.layui-btn {

  &.layui-btn-lg {

    padding-right: 25px;
  }

  clip-path : $box-shape;
  padding-right : 10px;
  position : relative;
  background-color: transparent;
  border : 1px solid;
  color : rgb(126, 252, 246);
  text-shadow : rgb(126, 252, 246) 0px 0px 1px;
  background-color: rgb(126, 252, 246);


  &::before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    clip-path: $box-shape;
    width: 100%;
    height: 100%;
    left: -0.5px;
    top: -0.5px;
    background-color: $black-color;
  }

  &:hover::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    clip-path: $box-shape;
    width: 100%;
    height: 100%;
    left: -0.5px;
    top: -0.5px;
    background-color: rgba(126, 252, 246, 0.2);
  }

  &.layui-btn-disabled {
    &::after {
      // todo:实现按钮禁用样式
    }
  }

  &.layui-btn-success {
    text-shadow: rgb(0, 255, 0) 0px 0px 1px;
    color: rgb(0, 255, 0);
    background-color: rgba(0, 255, 0);
    border: unset;

    &:hover::after {
      background-color: rgba(0, 255, 0, 0.2);
    }
  }

  &.layui-btn-danger {
    text-shadow: rgb(255, 0, 0) 0px 0px 1px;
    color: rgb(255, 0, 0);
    background-color: rgb(255, 0, 0);
    border: unset;

    &:hover::after {
      background-color: rgba(255, 0, 0, 0.2);
    }
  }

  &.layuimini-btn-primary {
    text-shadow: rgb(255, 255, 153) 0px 0px 1px;
    color: rgb(255, 255, 153);
    background-color: rgb(255, 255, 153);
    border: unset;

    &:hover::after {
      background-color: rgba(255, 255, 153, 0.2);
    }

  }

  &.layui-btn-primary {
    border: unset;
  }

  &.layui-btn-normal {
    color: $black-color;
    background-color: $main-color;
    border: unset;

    &::before {
      background-color: $main-color;
    }

    &:hover::after {
      background-color: $main-color;
    }
  }
}

.layui-table {
  background: $black-color;
  color: $main-color;


  tr {
    background-color: $cover-color;
  }

  td {
    border-color: $less-main-color;
  }

}

.layui-table-header {
  background-color: $black-color;
}

.layuimini-container .layui-table-box {
  border-color: $less-main-color;
}

.layuimini-container .layui-table-box .layui-table-header th {
  color: $main-color !important;
}

.layui-table-tool .layui-inline[lay-event] {
  color: $main-color;
  border: none;
  position: relative;

  &::after {
    border-color: $main-color;
    border-width: 1px;
    border-style: solid;
    clip-path: $box-shape;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    content: '';
    display: block;
  }
}

.layui-table tbody tr:hover {
  background-color: rgba(126, 252, 246, 0.1);
}

.layuimini-main {
  border-color: $less-main-color;
}

.layui-table-header {
  border-color: $less-main-color;
}



.color-content>ul>li>a>div>span:nth-child(2) {
  background-color: $black-color !important;
}

.layuimini-color .elem-content li {
  clip-path: $box-shape;
}

.layuimini-color .elem-content li.layui-this {
  background-color: $main-color;
  color: $black-color !important;
  border-color: $less-main-color;
}

.layuimini-color .more-menu-item {
  color: $main-color;

  &:hover {
    background-color: rgba(62, 251, 251, 0.05);
  }
}

.layui-layout-admin .layui-header {
  background-color: $cover-color !important;
}

.layuimini-tab .layui-tab-title {
  background-color: $cover-color !important;
  border-color: $less-main-color;

}

.layuimini-tab .layui-tab-title span {
  color: $active-color;
}

.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover,
.layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
  color: $black-color !important;
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
  color: $main-color !important;
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-item {
  background-color: $active-color;

}


.layui-layout-admin .layui-header .layuimini-header-content>ul>.layui-nav-item.layui-this,
.layuimini-tool i:hover {
  background-color: $main-color !important;
}

.layuimini-tab .layui-tab-control>li {
  background-color: $black-color;
  border-color: $less-main-color;
}

.layuimini-tab .layui-tab-title li {
  border-color: $less-main-color;
}

.layui-flow-more a *,
.layui-laypage input,
.layui-table-view select[lay-ignore] {
  border-color: $less-main-color;
  background-color: $black-color;
  color: $main-color;
}

.layui-laypage button,
.layui-laypage input {
  border-color: $less-main-color;
  background-color: $black-color;
  color: $main-color;

}

.layuimini-container .layui-form-switch {
  border-color: $less-main-color !important;
  background-color: $black-color !important;

}

.layuimini-container .layui-form-onswitch {
  background-color: $main-color !important;
}

.layuimini-container .layui-form-switch.layui-form-onswitch i {
  background-color: $black-color !important;
}
.layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: $main-color !important;
}

.layui-laypage .layui-laypage-curr em {
  color: $black-color !important;
}

.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
  background-color: $less-main-color;

}

.layui-table-view .layui-form-checkbox.layui-form-checked[lay-skin="primary"] i {
  border-color: $main-color;
  background-color: $main-color;
  color: $black-color;
}

.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
  background-color: $cover-color;
}

.layui-table-init {
  background-color: $black-color;
}

.box-border-line {
  position: relative;
  border: 1px solid $less-main-color;
  border-width: 1px;
  $border-offset: 3px;

  &::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 20px;
    transition: all 0.2s;
    border: 1px solid $less-main-color;
    top: -$border-offset;
    left: -$border-offset;
    border-right: none;
    border-bottom: none;
    pointer-events: none;
  }

  &::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 20px;
    transition: all 0.2s;
    border: 1px solid $less-main-color;
    bottom: -$border-offset;
    right: -$border-offset;
    border-left: none;
    border-top: none;
    pointer-events: none;
  }

  &:hover {

    &::after,
    &::before {
      width: calc(100% + $border-offset);
      height: calc(100% + $border-offset);
    }
  }
}

.table-search-fieldset {
  .layui-input-inline {
    margin-right: 0;
  }



  .layui-form-item:not(:last-child) {
    margin-right: 10px;
    @extend .box-border-line;
  }

  .layui-form-label {
    border: unset;
  }
}

.layui-form-pane .layui-form-label {
  background-color: $cover-color;
  color: $main-color;
}

.layuimini-container .table-search-fieldset {
  color: $main-color;
  border-color: $less-main-color;

}

.layui-form-select,
.layui-form-autocomplete {
  dl {

    color: $main-color;
    background-color: $black-color;
    border-color: $less-main-color;

    dd {
      &.layui-this {
        background-color: $main-color !important;
        color: $black-color;
      }

      &:hover {
        background-color: $less-main-color !important;
        color: $black-color;
      }
    }
  }
}

.layui-iconpicker-item,
.layui-iconpicker-item:hover {
  border-color: $less-main-color !important;
  color: $black-color;

  .layui-iconpicker-icon:hover {
    border-color: $less-main-color !important;
  }
}


.layui-nav-child {
  background-color: $black-color;
  color: $main-color;
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
  color: $main-color !important;
}

.layui-badge,
.layui-badge-dot,
.layui-badge-rim {
  background-color: $main-color;
}

.layui-nav .layui-nav-child a:hover {
  background-color: $active-color;
}

.layui-table-tool-panel {
  background-color: $black-color;
}

.layui-form-checkbox[lay-skin="primary"] span {
  color: $main-color;
}

.layui-table-tool-panel li:hover {
  background-color: $active-color;
}

.layui-side.layui-bg-black,
.layui-side.layui-bg-black>.layuimini-menu-left>ul,
.layuimini-menu-left-zoom>ul {
  background-color: $black-color !important;

}

.layui-side {
  border-right: 1px solid $main-color;
}

.layui-bg-blue {
  background-color: #0000ff !important;
}

.layui-bg-orange {
  background-color: $yellow-color !important;
  color: $black-color !important;
}

.layui-bg-green {
  background-color: $green-color !important;
  color: $black-color !important;
}

.layui-table-hover {
  background-color: $cover-color;
}

.layui-table-grid-down {
  background-color: $black-color;
  color: $main-color;
  border-color: unset;
}

.layui-table-tips-main {
  background-color: $main-color;
  color: $black-color;
}

.layui-layout-admin .layui-header .layuimini-tool i {
  color: $main-color;
}

.color-red {
  color: $red-color !important;
}

.layuimini-tab .layui-tab-title .layui-this span {
  color: $main-color;
}

.layui-card {

  background-color: $cover-color;
  border-radius: 0;

  @extend .box-border-line;

  .layui-card-header {
    color: $main-color;
  }
}

.layui-text {
  color: $main-color;
}


.layuimini-qiuck-module {
  cursor: pointer;

  a i {
    background-color: $cover-color;
    color: $active-color;
  }

  a cite {
    color: $active-color;
  }


  &:hover {
    a i {
      background-color: $active-color;
      color: $main-color;
    }

    a cite {
      color: $main-color;
    }

  }
}

.layui-bg-number {
  background-color: $cover-color;
}

.layui-input,
.layui-select,
.layui-textarea,
.city-picker-span,
.main-input {
  background-color: $cover-color;
  color: $main-color;
}

.city-picker-span>.title>span {
  color: $main-color;

  &:hover {
    background-color: $main-color;
    color: $black-color;
  }
}

.layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed>i {
  color: $main-color;
}

.layui-form-checked[lay-skin="primary"] i {
  border-color: $main-color !important;
  background-color: $main-color;
  color: $black-color;
}

.layui-input:focus,
.layui-textarea:focus {
  border-color: $main-color !important;
}

.layui-input:hover,
.layui-textarea:hover {
  border-color: $main-color !important;

}

.layui-badge-rim,
.layui-border,
.layui-colla-content,
.layui-colla-item,
.layui-collapse,
.layui-elem-field,
.layui-form-pane .layui-form-item[pane],
.layui-form-pane .layui-form-label,
.layui-input,
.layui-layedit,
.layui-layedit-tool,
.layui-panel,
.layui-quote-nm,
.layui-select,
.layui-tab-bar,
.layui-tab-card,
.layui-tab-title,
.layui-tab-title .layui-this::after,
.layui-textarea {
  border-color: $main-color !important;
}

.form-search .layui-input-inline input,
.form-search .layui-input-inline select {
  border-width: 0 0 0 1px;
}

.layuimini-tab .layui-tab-tool .layui-nav-child {
  border-color: $main-color;
}

.layui-nav .layui-nav-child a {
  color: $main-color;
}

.layui-form-item {
  margin-bottom: 12px;
}

.layuimini-upload .layuimini-upload-btn {
  background-color: $black-color;
}

.layui-layer {
  border: 1px solid $main-color;
  background-color: $black-color;
}

.layui-layer-easy .layui-layer-title {
  background-color: $plus-main-color !important;
  color: $main-color !important;
}



.layui-table td,
.layui-table th,
.layui-table-col-set,
.layui-table-fixed-r,
.layui-table-grid-down,
.layui-table-header,
.layui-table-page,
.layui-table-tips-main,
.layui-table-tool,
.layui-table-total,
.layui-table-view,
.layui-table[lay-skin="line"],
.layui-table[lay-skin="row"] {
  border-color: $less-main-color;
}

.layui-table tbody tr:hover,
.layui-table thead tr,
.layui-table-click,
.layui-table-header,
.layui-table-hover,
.layui-table-mend,
.layui-table-patch,
.layui-table-tool,
.layui-table-total,
.layui-table-total tr {
  background-color: $black-color;
}

.hr-line {
  color: $main-color;
  border-color: $less-main-color;
  background-color: $main-color;
}

.layui-layer-easy .layui-layer-btn {
  background-color: $black-color;
  border-top: 1px solid $less-main-color;
}

.layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
  background-color: $main-color;
  border-color: $less-main-color;
  color: $main-color !important;
  clip-path: $box-shape;
}

.layui-layer-easy .layui-layer-btn a {
  @extend .layui-btn
}

.layui-layer-shade {
  background-color: #fff !important;
}

.layuimini-menu-left {
  .layui-nav-tree .layui-nav-item {

    margin: 5px;
    width: calc(100% - 10px);
  }

  .layui-nav .layui-nav-item {
    clip-path: $box-shape;
    color: $main-color;
    background-color: $active-color;

    &.layui-this a {
      background-color: $main-color !important;
      color: $black-color !important;
    }

    &.layui-this {
      background-color: $main-color !important;
      color: $black-color !important;

      span {
        background-color: $main-color !important;
        color: $black-color !important;

      }
    }
  }

  .layui-nav .layui-nav-item a:hover {
    background-color: $active-color !important;
  }

}

.layuimini-menu-left .layui-nav .layui-nav-item a,
.layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
  color: $main-color !important;
}

.layuimini-menu-left .layui-nav-item a span {
  color: $main-color !important;

}

.layuimini-menu-left .layui-nav-item:hover a span {
  color: $black-color !important;

}

.layui-layout-admin .layuimini-logo {
  background-color: $black-color !important;

}

.layuimini-menu-left .layui-nav-itemed>.layui-nav-child {
  background-color: $black-color !important;
}

.layuimini-menu-left .layui-nav-tree .layui-this,
.layuimini-menu-left .layui-nav-tree .layui-this>a,
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a,
.layuimini-menu-left-zoom.layui-nav-tree .layui-this,
.layuimini-menu-left-zoom.layui-nav-tree .layui-this>a,
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this,
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
  background-color: $main-color !important;
  color: $black-color !important;

  .layui-left-nav {
    color: $black-color !important;
  }
}


.layui-iconpicker-icon {
  border-color: $less-main-color !important;
  background-color: $less-main-color !important;
}

.layui-iconpicker .layui-anim {
  background-color: $black-color;
}

.layui-iconpicker .layui-iconpicker-list {
  background-color: $black-color;
}

.layui-header .layui-nav .layui-nav-child dd.layui-this a,
.layui-header .layui-nav-child dd.layui-this,
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
  background-color: $active-color !important;
}