Как изменить цвет фона кнопки переключения

Question

Это мой код

<label style="margin-top: 2px;margin-right: 13px;" class="toggle"><input type="checkbox" 
onclick="updateGroup(this)" name="screen" value="Profile" actionname="Profile"> 
<i data-swchoff-text="Off" data-swchon-text="On"></i></label>

Я хочу изменить цвет фона на синий и текст на белый, когда кнопка переключения включена, и цвет фона на белый, а цвет текста - черный, когда кнопка переключения "ВЫКЛ"

Answer 1

Я использовал свойство :checked с оператором tilde(~), чтобы установить background & text цвет при переключении.

.toggle{
  position: relative;
  display: inline-block;
}
.toggle input{opacity: 0; position: absolute; left: 0; top: 0}
.toggle i{
  position: relative;
  background: #fff;
  color: #000;
  height: 34px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-style: normal;
  transition: 350ms;
  font-family: Arial;
}
.toggle input:checked ~ i{
  background: blue;
  border: 1px solid blue;
  color: #fff;
}
.toggle i:before{
  content: attr(data-swchoff-text);
}
.toggle input:checked ~ i:before{
  content: attr(data-swchon-text);
}

<label class="toggle">
  <input type="checkbox" name="screen" value="Profile" actionname="Profile">
  <i data-swchoff-text="Off" data-swchon-text="On"></i>
</label>

Answer 2

Не изменяйте встроенный стиль напрямую , лучшее решение создает css классов для ON & OFF состояние и класс переключения

$(document).ready(function() {
  $('input[name=theme]').change(function(e) {
    $('#MainContent').toggleClass('light-theme dark-theme');
  });
});

.theme {
  margin: 15px;
  padding: 15px;
}

.theme.dark-theme {
  background: blue;
  color: white;
}

.theme.light-theme {
  background: white;
  color: black;
}

<label style="margin-top: 2px;margin-right: 13px;" class="toggle">
<input type="checkbox" name="theme" /> 
Blue Theme
</label>

<div id="MainContent" class="theme light-theme">

  <div id="artical">
    <h3>Title here</h3>
    More Info More Info More Info More Info More Info More Info <br />
    More Info More Info More Info More Info More Info More Info 
    More Info More Info More Info More Info More Info More Info  <br />
    More Info More Info More Info More Info More Info More Info 
    More Info More Info More Info More Info More Info More Info  <br />
    More Info More Info More Info More Info More Info More Info 
  </div>
  
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>