离子切换和范围的背景色

Question

我正在使用Ionic制作移动应用。我想添加背景以切换按钮和范围。我使用了切换/范围背景暗。它没有用

      <ion-toggle toggle-class="toggle-balanced toggle-background-dark" ng-model="check">
          33
      </ion-toggle> 

      <div class="item range range-balanced range-background-dark">
          <i class="icon ion-ios-sunny-outline"></i>
            <input type="range" name="volume" min="0" max="100" ng-model="RV">
          <i class="icon ion-ios-sunny"></i>
      </div>

Answer 1

您可以使用此CSS更改切换按钮并调整背景颜色的范围

.toggle input:checked + .track {
    background-color: #8577b5;
    border-color: #8577b5;
}

.range.range - balanced input::-webkit - slider - thumb: before {
    background: #8577b5;}
.range.range-light input::-webkit-slider-thumb:before {
    background: # ddd;}
.range.range - stable input::-webkit - slider - thumb: before {
    background: #b2b2b2;
}
.range.range - positive input::-webkit - slider - thumb: before {
    background: #4a87ee; }
.range.range-calm input::-webkit-slider-thumb:before {
    background: #43cee6;
}
.range.range - assertive input::-webkit - slider - thumb: before {
    background: #ef4e3a;
}
.range.range - energized input::-webkit - slider - thumb: before {
    background: #f0b840;
}
.range.range - royal input::-webkit - slider - thumb: before {
    background: #8a6de9; }
.range.range-dark input::-webkit-slider-thumb:before {
    background: #444;
}

Answer 2

对于Ionic 4中的离子切换，请在选中该切换时使用以下更改切换的背景：

ion-toggle {
    --background-checked: var(--ion-color-blue);
}

有关更多信息，请访问https://ionicframework.com/docs/api/toggle#css-custom-properties