Смена режима lightmode / darkmode

Question

Всем привет! Делаю свой первый проект - простые часы с изменением формата времени и цветов оформления.

Реализовал следующий подход изменения фона:

функция changeMode повешена на ивент лиснер и при клике меняет значение переменной modeState с тру на фолс
функция switchMode считывает значение переменной modeState и, в зависимости от тру или фолс вызывает функцию defineColors, куда передаются цвета.

Проблема в том, что при нажалии на кнопку цвета не меняются. Не могу понять, в чем причина. Помогите разобраться. Спасибо!

'use strict';

/* VARIALBES */
const body = document.querySelector('body');
const clocksBody = document.getElementById('clock'); 
const dateInfo = document.querySelector('.clock__date');
const date = new Date();
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const btnTimeFormat = document.querySelector('.button__timeformat');
const btnMode = document.querySelector('.mode');
let timeFormat = true;
let modeState = true;

// Functions

function clocks () {
    setInterval(() => {
        const date = new Date();
        const time = document.querySelector('.clock__time');
        const hours = String(date.getHours()).padStart(2, 0);
        const mins = String(date.getMinutes()).padStart(2, 0);
        const secs = String(date.getSeconds()).padStart(2, 0);
        let dayTimeUSA = hours > 0 && hours <= 12 ? 'AM' : 'PM';
        let hoursUSA = hours > 12 ? hours - 12 : hours;
        
        if (timeFormat) {
            time.textContent = `${hours} : ${mins} : ${secs}`;
        } else {
            time.textContent = `${hoursUSA} : ${mins} : ${secs} ${dayTimeUSA}`;
        }
        

    }, 1000);
}

function changeTimeFormat () {
    timeFormat = !timeFormat;
}

function defineColors (bodyColor, clocksColor, borderColor) {
    body.style.backgroundColor = `${bodyColor}`; 
    clocksBody.style.backgroundColor = `${clocksColor}`;
    clocksBody.style.border = `10px solid var(${borderColor})`;
}

function switchMode () {
    if (modeState) {
        defineColors('#c5b9cd', '#dec2cb', '#abb1cf'); 
    } else {
        defineColors('#92a8d1', '#c5b9cd', '#7a7f94');
    } 
}

function changeMode () {
    modeState = !modeState;
}

// Action code

dateInfo.textContent = `${weekDays[date.getDay()]}, ${months[date.getMonth()]} ${date.getDate()}th ${date.getFullYear()}`;

clocks();

switchMode();

btnTimeFormat.addEventListener('click', changeTimeFormat);
btnMode.addEventListener('click', changeMode);

:root {
  --bgc-light-theme: #c5b9cd;
  --bgc-dark-theme: #92a8d1;
  --clock-color-light-theme: #dec2cb;
  --clock-color-dark-theme: #c5b9cd;
  --clock-border-light-theme: #abb1cf;
  --clock-border-dark-theme:#7a7f94;
  --exo-font: 'Exo 2', sans-serif;
  --prompt-font: 'Prompt', sans-serif;
}

/* FUNCTIONS */
/* CLOCKS */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: var(--bgc-light-theme);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#clock {
  width: 25vw;
  height: 25vw;
  min-width: 290px;
  min-height: 290px;
  border: 10px solid var(--clock-border-light-theme);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: var(--clock-color-light-theme);
}

.clock__container {
  width: 40%;
  background-color: #fff;
}

.clock__head {
  margin: 0;
  font-family: var(--prompt-font);
  font-size: 3vh;
}

.clock__time {
  text-align: center;
  margin: 1vh 0 1vh 0;
  font-family: var(--exo-font);
  font-size: 3vh;
}

.clock__date {
  text-align: center;
  margin-bottom: 1vh;
  font-family: var(--exo-font);
  font-size: 2vh;
}

.clock__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

button {
  width: 10vh;
  height: 5vh;
  background-color: var(--clock-color-light-theme);
  margin: 2rem 1rem 0 0;
  border-radius: 32px;
  text-align: center;
  border: transparent;
  cursor: pointer;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  -webkit-box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.2), 6px 6px 10px rgba(0, 0, 0, 0.2);
          box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.2), 6px 6px 10px rgba(0, 0, 0, 0.2);
  color: #000000;
  font-size: 1.5vh;
  font-family: var(--exo-font);
}

button:hover {
  opacity: 0.3;
  -webkit-box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8), 6px 6px 10px rgba(0, 0, 0, 0.2);
          box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8), 6px 6px 10px rgba(0, 0, 0, 0.2);
}

button:active {
  opacity: 1;
  -webkit-box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.1);
          box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.1);
  color: #000000;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital clock</title>
    <link rel="stylesheet" href="css/style.css">
    <script defer src="script.js"></script>
</head>
<body>
    <div class="clock__container">
        <div id="clock">
            <h1 class="clock__head">Digital clock</h1>
            <div class="clock">
                <div class="clock__time"></div>
                <div class="clock__date">Weekday, Month Date Year</div>
            </div>
            <div class="clock__buttons">
                <button class="button__timeformat view">Time format</button>
                <button class="mode">MODE</button>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

Вы меняете переменную, но не вызываете функцию изменения цветов. На самом деле вы сделали неплохо и попытались разделить код на разные слои — отображения и данных, как в паттерне MVC. Но чтобы это работало, вам нужно проксировать стейт, чтобы он реагировал на изменения и обновлял визуал. Есть библиотека onChange для этого. Но вам пока рановато.
Ваш работающий вариант:

'use strict';

/* VARIALBES */
const body = document.querySelector('body');
const clocksBody = document.getElementById('clock');
const dateInfo = document.querySelector('.clock__date');
const date = new Date();
const weekDays = [
  'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday',
];
const months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
];
const btnTimeFormat = document.querySelector('.button__timeformat');
const btnMode = document.querySelector('.mode');
let timeFormat = true;
let modeState = true;

// Functions

function clocks() {
  setInterval(() => {
    const date = new Date();
    const time = document.querySelector('.clock__time');
    const hours = String(date.getHours()).padStart(2, 0);
    const mins = String(date.getMinutes()).padStart(2, 0);
    const secs = String(date.getSeconds()).padStart(2, 0);
    let dayTimeUSA = hours > 0 && hours <= 12 ? 'AM' : 'PM';
    let hoursUSA = hours > 12 ? hours - 12 : hours;

    if (timeFormat) {
      time.textContent = `${hours} : ${mins} : ${secs}`;
    } else {
      time.textContent = `${hoursUSA} : ${mins} : ${secs} ${dayTimeUSA}`;
    }
  }, 1000);
}

function changeTimeFormat() {
  timeFormat = !timeFormat;
}

function defineColors(bodyColor, clocksColor, borderColor) {
  body.style.backgroundColor = `${bodyColor}`;
  clocksBody.style.backgroundColor = `${clocksColor}`;
  clocksBody.style.border = `10px solid var(${borderColor})`;
}

function switchMode() {
  if (modeState) {
    defineColors('#c5b9cd', '#dec2cb', '#abb1cf');
  } else {
    defineColors('#92a8d1', '#c5b9cd', '#7a7f94');
  }
}

function changeMode() {
  modeState = !modeState;
}

// Action code

dateInfo.textContent = `${weekDays[date.getDay()]}, ${
  months[date.getMonth()]
} ${date.getDate()}th ${date.getFullYear()}`;

clocks();

switchMode();

btnTimeFormat.addEventListener('click', changeTimeFormat);
btnMode.addEventListener('click', () => {
  changeMode();
  switchMode();
});

БЛОГ НА HUSL

Смена режима lightmode / darkmode

Ответы (1 шт):