index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Digital Clock</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
transition: background-color 0.3s, color 0.3s;
}
.clock {
font-size: 5rem;
}
.toggle-theme-btn {
position: absolute;
top: 20px;
right: 20px;
padding: 10px 20px;
cursor: pointer;
}
/* Light theme styles */
.light-theme {
background-color: #ffffff;
color: #000000;
}
/* Dark theme styles */
.dark-theme {
background-color: #000000;
color: #ffffff;
}
</style>
</head>
<body class="light-theme">
<div class="clock" id="clock">--:--:--</div>
<button class="toggle-theme-btn" id="toggleThemeBtn">Toggle Theme</button>
<script>
function updateClock() {
const clockElement = document.getElementById('clock');
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
clockElement.textContent = `${hours}:${minutes}:${seconds}`;
}
function toggleTheme() {
const body = document.body;
body.classList.toggle('light-theme');
body.classList.toggle('dark-theme');
}
document.getElementById('toggleThemeBtn').addEventListener('click', toggleTheme);
updateClock();
setInterval(updateClock, 1000);
</script>
</body>
</html>
```