localhost2020,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.themes {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.themes > * {
margin: 0 10px;
}
.themes button {
padding: 12px 24px;
border-width: 1px;
border-style: solid;
outline: none;
color: #fff;
cursor: pointer;
}
.themes .gray { background-color: #95a5a6; border-color: #7f8c8d; }
.themes .red { background-color: #e74c3c; border-color: #c0392b; }
.themes .green { background-color: #2ecc71; border-color: #27ae60; }
.themes .blue { background-color: #3498db; border-color: #2980b9; }
.themes .unknown { background-color: #9b59b6; border-color: #8e44ad; }
.theme--gray .opops { background-color: #95a5a6; }
.theme--red .opops{ background-color: #e74c3c; }
.theme--green .opops{ background-color: #2ecc71; }
.theme--blue .opops{ background-color: #3498db; }
.theme--gray #opopops { border: red solid 5px; color: #FFD700;}
.opops {
width: 200px;
height: 50px;
background: red;
position: absolute;
top: 0;
}
.opops + .opops{
right: 0;
}
</style>
</head>
<body>
<div class="themes">
<button class="gray" data-theme="gray">GRAY</button>
<button class="red" data-theme="red">RED</button>
<button class="green" data-theme="green">GREEN</button>
<button class="blue" data-theme="blue">BLUE</button>
<button class="unknown" data-theme="unknown">unknown</button>
</div>
<div id="opops" class="opops">Testing</div>
<div id="opopops" class="opops">Testing</div>
<script>
/*const themeElements = document.querySelectorAll('#opops, #opopops,.ipsWidget_title');
themeElements.forEach(elem => elem.classList.add('opops'));*/
const themes = {
gray: 'theme--gray',
red: 'theme--red',
green: 'theme--green',
blue: 'theme--blue'
}
let defaultKeyTheme = localStorage.getItem('theme') || 'gray';
const {classList} = document.body;
const setTheme = key => {
let themeName = themes[defaultKeyTheme];
classList.remove(themeName);
themeName = themes[key];
classList.add(themeName);
defaultKeyTheme = key;
localStorage.setItem('theme', key);
};
setTheme(defaultKeyTheme);
const themeSwitchers = document.querySelector('.themes');
function switchThemeHandle(e) {
let { theme : key } = e.target.dataset;
if (!themes[key]) {
console.error('Ошибка смены темы. Тема не найдена.');
return;
}
setTheme(key)
}
themeSwitchers.addEventListener( "click" , switchThemeHandle);
</script>
</body>
</html>
