<div id="header">
    <header> 
      <h1>DIGITAL CLOCK</h1> 
      <button id="themeButton" onClick="changeTheme()" >
       <img src="https://i.postimg.cc/KcH4fNHz/lamp.png"/></button>
      <div id="hourSelector"> 
       <input type="checkbox" id="show24hours" name="hourSelector" style="display:none"> </input>
      <label for="hourSelector" style="cursor:pointer"> 
      <img src="https://i.postimg.cc/cCHhSmRC/24hrs-removebg-preview.png"/></label>
      </div>
  <button id="help" popovertarget="help-popover"><img src="https://i.postimg.cc/rssR96F2/question-2.png"/></button>
      </header>
    <hr/>
 </div>
<body id="theme">
  <div popover id="help-popover">
      <h1> Digital Clock </h1>
      <hr/>
  </div>
  <div id="main-content">
    <div id="timer-text"> Time </div> 
  </div>
</body>

:root.black{
  --color-base-bg: black;
  --color-text: turquoise;
  --color-border: orange;
  --popover-color: white;
}

:root.white{
  --color-base-bg: white;
  --color-text: black;
  --color-border: black;
  --popover-color: black;
  --popover-text-color: white;
}

body{
  background-color: var(--color-base-bg);
  color: var(--color-text);
}

header {
  display: flex;
  flex-direction: row;
  width: 100%;
}

header>h1 {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  padding: 10px;
}

header>button {
  background-color: inherit;
  border: none;
}

header>button>img{
  height: 50px;
  width: 50px;
}

img{
  height: 50px;
  width: 50px;
}


hr{
  height: 15px;
  background-color: var(--color-border);
}

#hourSelector{
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#main-content {
  height: 50vh;
  width: 100%;
  font-size: 150px;
  padding: 25px;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
}

#help-popover{
  background-color: var(--popover-color);
  opacity: 90%;
  color: var(--popover-text-color);
  width: 80%;
  height: 80%;
}
let show24Hours = document.getElementById('show24hours').checked;
const root = document.documentElement;
let date, hours, minutes, seconds, isAfternoon = false,hourString, minutesString, secondsString, timeString;

let theme = 'white';

const lightBulbImage = 'https://i.postimg.cc/KcH4fNHz/lamp.png';
const darkBulbImage = 'https://i.postimg.cc/90KMfm7T/lamp-1.png';

const lightClockImage = 'https://i.postimg.cc/j5vcm9JB/12hrs-removebg-preview.png';
const darkClockImage = 'https://i.postimg.cc/nznTdZMv/12hr-color-removebg-preview.png';

const light24ClockImage = 'https://i.postimg.cc/cCHhSmRC/24hrs-removebg-preview.png';
const dark24ClockImage = 'https://i.postimg.cc/g0VNqrcz/24hr-color-removebg-preview.png';

const bulbImageButton = document.getElementById('themeButton');
const bulbImage = bulbImageButton.querySelector('img');

const hourImageButton = document.getElementById('hourSelector');
const hourImage = hourImageButton.querySelector('img');

hourImage.addEventListener('click', () => {
  show24Hours = !show24Hours;
  console.log(show24Hours);
  
  if(show24Hours){
    if(theme == 'white'){
      hourImage.src = lightClockImage;
    }
    else{
      hourImage.src = darkClockImage;
    }
  }
  else{
    if(theme == 'white'){
      hourImage.src = light24ClockImage;
    }
    else{
      hourImage.src = dark24ClockImage;
    }
  }
  
});

function clock(){
  console.log(show24Hours);
  date = new Date();
  hours = date.getHours();
  minutes = date.getMinutes();
  seconds = date.getSeconds();
  isAfterNoon = false;
  
  if(hours == 0){
    h = 12;
  }
  if(hours > 12){
    isAfternoon = true;
  }
  
  if(hours > 12 && !show24Hours){
    hours = hours - 12;
    isAfterNoon = true;
  }
  
  hourString = (hours < 10) ? '0' + hours : hours;
  minutesString = (minutes < 10) ? '0' + minutes : minutes;
  secondsString = (seconds < 10) ? '0' + seconds : seconds;
  
  timeString = hourString + " : " + minutesString + " : " + secondsString + (show24Hours ? ' ' : (isAfternoon ? ' PM' : ' AM'));
  
  document.getElementById('timer-text').innerText = timeString;
}

setInterval(() => {
  clock();  
} ,1000);



function changeTheme(){
    if(theme == 'white'){
      theme = 'black';
      
      root.className = theme;
      bulbImage.src = darkBulbImage;
      if(show24Hours){
        hourImage.src = darkClockImage;  
      }
      else{
        hourImage.src = dark24ClockImage;
      }
      
    }
    
    else if(theme == 'black'){
        theme = 'white';
      
      root.className = theme;
      bulbImage.src = lightBulbImage;
      if(show24Hours){
        hourImage.src = lightClockImage;  
      }
      else{
        hourImage.src = light24ClockImage;
      }
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.