Сообщение от рони
|
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; }
.opops {
width: 200px;
height: 50px;
background-color: var(--color, 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 class="opops">Testing</div>
<div class="opops">Testing</div>
<script>
const themes = {
gray: 'gray',
red: 'red',
green: 'green',
blue: 'blue'
}
const themeFromStorage = localStorage.getItem('theme');
let defaultTheme = themes[themeFromStorage] || themes.gray;
const setTheme = theme => document.body.style.setProperty('--color', theme);
setTheme(defaultTheme);
const themeSwitchers = document.querySelector('.themes');
function switchThemeHandle(e) {
const { theme } = e.target.dataset;
if (!themes[theme]) {
console.error('Ошибка смены темы. Тема не найдена.');
return;
}
defaultTheme = themes[theme];
setTheme(defaultTheme)
localStorage.setItem('theme', theme);
}
themeSwitchers.addEventListener( "click" , switchThemeHandle);
</script>
</body>
</html>
|
работает нормально, а как сделать чтобы в
Style для какого-то класса, за пример возьмём
.opops к которому надо задать
background/border/color для кнопки GRAY или RED. Как тут было:
#opops.theme--gray { background-color: #95a5a6; }