0

Я создаю сайт на Wordpres/ Я вставляю этот код в Внешний вид/Виджеты/HTMLкод Проблема в том что я понятия не имею как сделать такую иконку при этом там меняется иконка- можно без иконки. Помогите пожалуйста, отредактируйте именно мой код. При желании можете свою иконку интересную вставить :Ю Отблагодарю. введите сюда описание изображения

введите сюда описание изображения

<script>
var colorArray = [ "#f2f3f4" ]; // массив с цветами
var i = 0; // итератор

function changeColor() {
    var currentColor = colorArray[i];
    document.body.style.background = currentColor;
    localStorage.setItem('backgroundColor', currentColor);
    i++;
    if( i > colorArray.length - 1){
        i = 0;
    }
}

function setDefaultColor() {    
    document.body.style.removeProperty( 'background' );
    localStorage.removeItem('backgroundColor');
}

</script>
<input type="button" onclick="changeColor()" value="Изменить фон">
<input type="button" onclick="setDefaultColor()" value="По умолчанию">

<script>
  window.onload = function() {
    document.body.style.background = localStorage.getItem('backgroundColor');
  };
</script>
10
  • 1
    Андрей хватит пожалуйста удалять и по новой задавать вопрос. Вам обязательно помогут, нужно лишь подождать. 7 янв 2021 в 20:39
  • простите, просто очень нужна помощь, и кипит голова, я уже даже отблагодарить готов. 7 янв 2021 в 20:41
  • У вас сложность сделать месяц? Вроде простая кнопка же 7 янв 2021 в 20:42
  • В данный момент какие-то задачи мне не понятны, а потом я их разбираю и ищу свои ошибки, мне всё таки уже 45 лет и туго всё даётся 7 янв 2021 в 20:45
  • 1
    @Андрей, если какой-то из ответов ниже вам помог - отметьте его галочкой как "правильный ответ". Если не помог, то измените ваш вопрос, добавив уточнения.
    – De.Minov
    8 янв 2021 в 0:54

2 ответа 2

1

Простой вариант..

/* Для хранения изменения, не будет работать в сниппете, по этому раскомментировать на сайте
if(localStorage.getItem('ThemeDark') === 'true')
  document.body.classList.add('dark');
*/

let theme = document.getElementById('theme'), // Берём кнопку
    isTheme = document.body.classList.contains('dark'); // Проверяем наличие класса .dark у элемента body

theme.innerHTML = '<i class="fas fa-'+(isTheme ? 'sun' : 'moon')+'"></i><span>Включить '+(isTheme ? 'светлую' : 'тёмную')+' тему</span>'; // Меняем содержимое кнопки в зависимости от проверки выше

theme.addEventListener('click', function(){ // Вешаем обработчик на кнопку
  document.body.classList.toggle('dark'); // Выдаём класс или убираем, в зависимости от того есть ли он.
  isTheme = document.body.classList.contains('dark'); // Переписываем значение проверки
  theme.innerHTML = '<i class="fas fa-'+(isTheme ? 'sun' : 'moon')+'"></i><span>Включить '+(isTheme ? 'светлую' : 'тёмную')+' тему</span>'; // Меняем содержимое кнопки.
  
  /* ТОЖЕ ЧТО И ВНАЧАЛЕ
  localStorage.setItem('ThemeDark', isTheme);
  */
});
@import url('//use.fontawesome.com/releases/v5.8.2/css/all.css');


#theme {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
  font: inherit;
  color: #000;
  cursor: poitner;
}

#theme:hover {
  text-decoration: underline;
}

#theme > i {
  margin-right: 5px;
}

body.dark {
  background: gray;
  color: #fff;
}

body.dark #theme {
  color: #fff;
}
<button id="theme">Включить тёмную тему</button>

0

Нужно просто поменять стили кнопок в css файле, надеюсь понял правильно.

input { 
  border:none; /*  убираем обводку кнопки */
  cursor:pointer; 
  background-color: transparent; // прозрачный фон, можно поставить свой цвет 
 }
input:focus 
{
  outline:none; // убираем обводку при нажатии
}
<input type="button" value="Сменить фон"/>

1
  • Здравствуйте, не работает всё то же самое и так же кнопка. 7 янв 2021 в 21:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.