Как сделать кнопку переключения тем?
я не плохо разбираюсь в коде, пожалуйста помогите!!!!!! Каак сделать такую кнопку? HTML, которая переключала бы темы?
Вот оригинал, на который я равняюсь
Ответы (2 шт):
Автор решения: Павел Ериков
→ Ссылка
Вот пример такой кнопки.
При клике на неё лампочка погасает, при повторном клике зажигается. (Картинки не смог по лучше найти, тут уж сами :) )
let isLight = true;
function swapStatus() {
isLight = !isLight;
let element = document.getElementById("btn");
if(isLight)
btn.style.backgroundImage = "url('https://cdn.icon-icons.com/icons2/317/PNG/128/light-bulb-icon_34400.png')";
else btn.style.backgroundImage = "url('https://image.flaticon.com/icons/png/512/125/125801.png')";
}.button {
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
border-radius: 50%;
background-image: url(https://cdn.icon-icons.com/icons2/317/PNG/128/light-bulb-icon_34400.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: cover;
width: 30px;
height: 30px;
background-color: #4CAF50;
}<button class="button" id="btn" onclick="swapStatus()">
</button>
Автор решения: Daniil Loban
→ Ссылка
const lamp = document.querySelector('#clrLamp');
const btn = document.querySelector('#bg');
const body = document.querySelector('body');
let lampIsOff = true;
const change = () => {
lampIsOff = !lampIsOff; // инвретировать состояние
// изменить стили в svg
lamp.style= lampIsOff ? "" : "fill: rgb(255, 255, 144);"
// поменять цвет фона
body.classList.toggle('bgcolor');
}
btn.addEventListener('click', change, false )#bg {
left: 1em;
padding: .5em;
top: 1em;
opacity: .8;
display: inline-block;
position: fixed;
height: 3.5em;
width: 3.5em;
border-radius: 50%;
font-size: .8em;
z-index: 100;
}
button, input {
margin: 0;
border-radius: 0;
border: 0;
outline: 0;
}
button, input[type="submit"] {
cursor: pointer;
}
body, button, input[type="submit"] {
font-family: "Open Sans",Roboto,Ubuntu,Tahoma,Geneva,sans-serif;
}
#bg svg, footer img, footer svg {
height: 2.5em;
}
.bgcolor {
background: #333333;
}<body>
<button id="bg" style="background-color: rgb(140, 140, 140);"><svg viewBox="0 0 13.31 23" version="1"><path fill="#fff" d="M8.86 18.43c.16 0 .28-.14.28-.3v-.3c0-.18-.12-.32-.28-.32h-4.4c-.16 0-.28.18-.28.35v.3c0 .17.12.3.28.3zm0 1.34c.16 0 .28-.14.28-.3v-.3c0-.18-.12-.32-.28-.32h-4.4c-.16 0-.28.14-.28.3v.3c0 .18.12.32.28.32zm0 1.37c.16 0 .28-.14.28-.32v-.3c0-.16-.12-.3-.28-.3h-4.4c-.16 0-.28.14-.28.3v.3c0 .18.12.32.28.32zm-.76.46c-.25.53-.8.9-1.44.9-.63 0-1.2-.38-1.46-.9h2.9z"></path><path id="clrLamp" fill="#222" d="M6.66.5C3.26.5.5 3.26.5 6.66c0 1.12.3 2.16.82 3.07 1.5 2.72 1.9 4.25 2.16 5.73.2 1.24.5 1.53 1.43 1.53h3.54c.95 0 1.23-.3 1.44-1.57.25-1.48.65-3 2.16-5.73.5-.9.82-1.94.82-3.06C12.86 3.27 10.16.5 6.7.5z"></path></svg></button>
</body>Вот переделанный пример:
<body>
<button id="bg" style="background-color: rgb(140, 140, 140);left: 1em; padding: .5em; top: 1em; opacity: .8; display: inline-block; position: fixed; height: 3.5em; width: 3.5em; border-radius: 50%; font-size: .8em; z-index: 100; margin: 0; border: 0; outline: 0; cursor: pointer;"><svg style="height: 2.5em;" viewBox="0 0 13.31 23" version="1"><path fill="#fff" d="M8.86 18.43c.16 0 .28-.14.28-.3v-.3c0-.18-.12-.32-.28-.32h-4.4c-.16 0-.28.18-.28.35v.3c0 .17.12.3.28.3zm0 1.34c.16 0 .28-.14.28-.3v-.3c0-.18-.12-.32-.28-.32h-4.4c-.16 0-.28.14-.28.3v.3c0 .18.12.32.28.32zm0 1.37c.16 0 .28-.14.28-.32v-.3c0-.16-.12-.3-.28-.3h-4.4c-.16 0-.28.14-.28.3v.3c0 .18.12.32.28.32zm-.76.46c-.25.53-.8.9-1.44.9-.63 0-1.2-.38-1.46-.9h2.9z"></path><path id="clrLamp" fill="#222" d="M6.66.5C3.26.5.5 3.26.5 6.66c0 1.12.3 2.16.82 3.07 1.5 2.72 1.9 4.25 2.16 5.73.2 1.24.5 1.53 1.43 1.53h3.54c.95 0 1.23-.3 1.44-1.57.25-1.48.65-3 2.16-5.73.5-.9.82-1.94.82-3.06C12.86 3.27 10.16.5 6.7.5z"></path></svg></button>
<script>
const lamp = document.querySelector('#clrLamp');
const btn = document.querySelector('#bg');
let lampIsOff = true;
const change = () => {
lampIsOff = !lampIsOff; // инвретировать состояние
lamp.style= lampIsOff ? "" : "fill: rgb(255, 255, 144);"
document.body.style.background = lampIsOff ? "white" : "#333333"
}
btn.addEventListener('click', change, false )
</script>
</body>Без тега script
<body>
<button
id="bg"
onclick="
var lamp = document.querySelector('#clrLamp');
var isLampOff = !!lamp.style.cssText
lamp.style = (isLampOff ? '' : 'fill: rgb(255, 255, 144)');
document.body.style.background = (isLampOff ? 'white' : '#333333');"
style="
background-color: rgb(140, 140, 140);
left: 1em;
padding: 0.5em;
top: 1em;
opacity: 0.8;
display: inline-block;
position: fixed;
height: 3.5em;
width: 3.5em;
border-radius: 50%;
font-size: 0.8em;
z-index: 100;
margin: 0;
border: 0;
outline: 0;
cursor: pointer;
"
>
<svg style="height: 2.5em;" viewBox="0 0 13.31 23" version="1">
<path
fill="#fff"
d="M8.86 18.43c.16 0 .28-.14.28-.3v-.3c0-.18-.12-.32-.28-.32h-4.4c-.16 0-.28.18-.28.35v.3c0 .17.12.3.28.3zm0 1.34c.16 0 .28-.14.28-.3v-.3c0-.18-.12-.32-.28-.32h-4.4c-.16 0-.28.14-.28.3v.3c0 .18.12.32.28.32zm0 1.37c.16 0 .28-.14.28-.32v-.3c0-.16-.12-.3-.28-.3h-4.4c-.16 0-.28.14-.28.3v.3c0 .18.12.32.28.32zm-.76.46c-.25.53-.8.9-1.44.9-.63 0-1.2-.38-1.46-.9h2.9z"
></path>
<path
id="clrLamp"
fill="#222"
d="M6.66.5C3.26.5.5 3.26.5 6.66c0 1.12.3 2.16.82 3.07 1.5 2.72 1.9 4.25 2.16 5.73.2 1.24.5 1.53 1.43 1.53h3.54c.95 0 1.23-.3 1.44-1.57.25-1.48.65-3 2.16-5.73.5-.9.82-1.94.82-3.06C12.86 3.27 10.16.5 6.7.5z"
></path>
</svg>
</button>
</body>