scrumen,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
:root {
--background-color: #fff;
}
.dark-mode {
--background-color: #000;
}
body {
padding: 40px;
background: var(--background-color);
}
</style>
</head>
<body>
<button class="header-theme-link">Сменить тему</button>
<script async src="https://telegram.org/js/telegram-widget.js?22" data-telegram-discussion="contest/198" data-comments-limit="5"></script>
<script>
window.addEventListener('load', () => {
const headerThemeLink = document.querySelector('.header-theme-link');
const body = document.body;
const src = ['https://t.me/contest/198?embed=1&discussion=1&comments_limit=5',
'https://t.me/contest/198?embed=1&discussion=1&comments_limit=5&color=29B127&colorful=1&dark=1&dark_color=72E350']
const isDarkMode = localStorage.getItem('darkMode') === 'true';
if (isDarkMode) {
body.classList.add('dark-mode');
document.querySelector('[id^="telegram-discussion-contest"]').src = src[1];
}
headerThemeLink.addEventListener('click', () => {
body.classList.toggle('dark-mode');
let toogle = body.classList.contains('dark-mode');
localStorage.setItem('darkMode', toogle);
document.querySelector('[id^="telegram-discussion-contest"]').src = src[+toogle];
});
})
</script>
</body>
</html>
