JavaScript Switcher theme nasıl yapılır?

6icloud · 2 Aralık 2023

Merhaba, web sayfamın sayfa sayfa temasını degistirmem icin kod ihtiyacım var. Sayfa rengini bir türlü degistiremiyorum.

lazenes · 2 Aralık 2023

https://codepen.io/nadeeshae/pen/bGdLpVd Böyle bir Örnek var işine yarar mı?

6icloud · 2 Aralık 2023

lazenes dedi:
https://codepen.io/nadeeshae/pen/bGdLpVd böyle bir örnek var işine yarar mı?

Kanka bunun renk gösterimli halini yapabilir misin top seklinde olacak şekilde.

lazenes dedi:
https://codepen.io/nadeeshae/pen/bGdLpVd Böyle bir Örnek var işine yarar mı?

Bu tarzda kanka

lazenes dedi:
https://codepen.io/nadeeshae/pen/bGdLpVd Böyle bir Örnek var işine yarar mı?

Bu tarzda kanka

533388 · 3 Aralık 2023

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Background Changer</title>
   <link rel="stylesheet" href="app.css">
</head>
<body>
   <div class="panel">
      <button id="kBtn">Kırmızı</button>
      <button id="yBtn">Yeşil</button>
      <button id="mBtn">Mavi</button>
      <button id="sBtn">Sarı</button>
   </div>
   <script src="main.js"></script>
</body>
</html>

CSS:

*
{
   margin: 0;
   padding: 0;
   font-family: sans-serif;
}

.panel
{
   display: flex;
   justify-content: center;
   column-gap: 100px;
}

.panel #kBtn
{
   background-color: red;
   border: 0px;
   border-radius: 30px;
   color: white;
   width: 100px;
   height: 50px;
   margin-top: 30px;
}

.panel #yBtn
{
   background-color: green;
   border: 0px;
   border-radius: 30px;
   color: white;
   width: 100px;
   height: 50px;
   margin-top: 30px;
}

.panel #mBtn
{
   background-color: blue;
   border: 0px;
   border-radius: 30px;
   color: white;
   width: 100px;
   height: 50px;
   margin-top: 30px;
}

.panel #sBtn
{
   background-color: yellow;
   border: 0px;
   border-radius: 30px;
   color: white;
   width: 100px;
   height: 50px;
   margin-top: 30px;
}

JavaScript:

const kBtn = document.getElementById('kBtn')
const yBtn = document.getElementById('yBtn')
const mBtn = document.getElementById('mBtn')
const sBtn = document.getElementById('sBtn')


kBtn.addEventListener('click',() => {
   document.body.style.backgroundColor = "red"
})

yBtn.addEventListener('click',() => {
   document.body.style.backgroundColor = "green"
})

mBtn.addEventListener('click',() => {
   document.body.style.backgroundColor = "blue"
})

sBtn.addEventListener('click',() => {
   document.body.style.backgroundColor = "yellow"
})

@6icloud oldu mu hocam?

JavaScript Switcher theme nasıl yapılır?

6icloud

Hectopat

lazenes

Kilopat

6icloud

Hectopat

Dosya Ekleri

533388

Hectopat