Masz
- niedomknięty tag <body>...</body>
- nieprawidłowy zapis setAttribute: ....setAttribute('datamode', 'dark')
- w setAttribute: datamode na data-mode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DarkMode</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<style>
[data-mode="light"]{
--bc: #ffffff;
--tc: #000000;
--btn: #404040;
}
[data-mode="dark"]{
--bc: #262626;
--tc: #ffffff;
--btn: #bfbfbf;
}
*{
color: var(--tc);
background-color: var(--bc);
font-family: 'Lato', sans-serif;
font-weight: 400;
}
button{
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: var(--btn);
border-radius: 50px;
display: block;
}
button:hover{
cursor: pointer;
}
#content{
animation: 1s right linear;
}
@keyframes right {
from{
transform: translateX(500px);
opacity: 0;
}
to{
opacity: 1;
}
}
@keyframes left {
from{
transform: translateX(-500px);
opacity: 0;
}
to{
opacity: 1;
}
}
#logo{
font-size: 50px;
animation: 1s left linear;
text-align: center;
font-weight: 700;
}
</style>
<script>
const body = document.querySelector('body');
const button = document.querySelector('button');
const handledarkmode = () => {
if(body.getAttribute('data-mode') === 'light'){
body.setAttribute('datamode'), 'dark'
}
else {
body.setAttribute('datamode'), 'light'
}
}
button.addEventListener('click', handledarkmode)
</script>
</head>
<body data-mode="light">
<div id="logo">
Lorem Ipsum
</div>
<div id="content">
<br /> <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna quam, suscipit ut enim sed, imperdiet commodo velit. Vestibulum mollis tellus id libero congue auctor. Phasellus laoreet condimentum turpis nec ullamcorper. Donec ut facilisis urna. Duis consectetur nisi pellentesque mattis viverra. Pellentesque cursus condimentum justo sed ultricies. Fusce a odio ut dolor volutpat semper. Mauris vitae dignissim nibh, tempus dictum diam. Donec convallis ut neque sed viverra. Sed accumsan dolor in lacus faucibus aliquet. Sed eu cursus magna, sit amet lacinia ex. Etiam urna augue, aliquet et enim eu, scelerisque venenatis leo.
<br />
Nullam viverra ipsum ac fringilla viverra. Donec vel lectus metus. Etiam arcu nulla, vulputate eu orci a, accumsan maximus nibh. Donec viverra mauris sit amet erat ultricies, ut commodo ipsum consequat. Suspendisse fermentum placerat maximus. Nullam non congue ex, quis rutrum est. Quisque dolor risus, cursus vitae erat ac, condimentum laoreet massa.
<br />
<button></button>
</div>
</body>
</html>
proponuje w css-ie dodać taki zapis
body {
overflow: hidden;
}
żeby "pozbyć" się suwaków w czasie animacji, a w sekcji * dodać transition
*{
...
transition: all 500ms;
}
dla "płynnego" przechodzenia miedzy dark => light [ on-line ]
P.S. zapis z użyciem ternary (operator warunkowy) 
const button = document.querySelector('button');
const handledarkmode = () => {
const mode = document.body.dataset.mode;
document.body.dataset.mode = (mode == 'light') ? 'dark':'light';
}
button.addEventListener('click', handledarkmode);
