Prototurk youtube'daki koyu modu yaptım ama cookie işlemini beceremiyorum(Çözüldü)
Merhaba youtube'daki koyu mod işlemini kendi siteme yapmaya çalıştım ama biraz karışık oldu
bu sebeple sonuca ulaştıramıyorum tayfun erbilen sadece body'e dark classını atayarak yapıyor
ben de farklı renkler atamak için örnek body'ye dark dedim col-md-12'lere darkly dedim
herşey güzel gitti fakat iş cookie ya da storage gelince takıldım yapamıyorum sadece birine etki edebiliyorum
örnek ya dark dediğim body'e ya da darkly diyip farklı bir renk belirlediğim col-md-12 lere etki
edebiliyorum ben istiyorumki aynı anda hepsi çalışsın. Yardımlarınızı bekliyorum
kodlar şöyle;
<body class="<?=cookie('mode') == 'dark' ? 'dark' : null ?>">
<div id="kapsul">
<header class="blog-header py-3 dark-change">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-md-4 pt-1">
<a class="btn btn-outline-light homeButton" href="index.php"><i class="fa fa-home"></i></a>
<label class="mode-control">
<input <?=cookie('mode') == 'dark' ? 'checked' : null ?> id="mode-btn" type="checkbox">
<span>Koyu</span>
<span>Açık</span>
</label>
</div>
.
.
.
<div class="<?=cookie('mode') == 'darkly' ? 'darkly' : null ?> col-md-12 dark-change">
<div class="row no-gutters border rounded roundark-change overflow-hidden flex-md-row mb-4 position-relative">
<div class="p-4">
<h4>Popüler Konular</h4>
<ol class="list-unstyled">
<li><span>- </span><a class="light-change" href="#">Sinema salonları batıyormu?</a></li>
<li><span>- </span><a class="light-change" href="#">2020'nin unutulmaz dizileri</a></li>
<li><span>- </span><a class="light-change" href="#">Son 10 yılın en etkili filmleri</a></li>
</ol>
</div>
</div>
</div>
body{
background-color: #fff;
color: #222;
transition: 300ms all;
}
body.dark {
background-color: #222;
color: #fff;
}
.dark{
background-color: #222!important;
color: #fff!important;
transition: ease 200ms!important;
}
.darkly{
background-color: #121212;
color: #fff!important;
border-color: #121212!important;
border-radius: .25rem;
}
.roundark{
border-color: #121212!important;
}
.lightly {
color: #fff!important;
background-color: #121212!important;
}
.lightly:hover {
color: #d92027!important;
text-decoration: none;
}
.lightly-oy {
color:#fff;
}
.lightly-oy:hover {
color:#d92027;
}
.lightly-oy.active {
color:white!important;
background-color: #222!important;
}
/* mode checked */
.mode-control input {
position: absolute;
opacity: 0;
}
.mode-control span:nth-of-type(2){
display: none;
}
.mode-control input:checked + span {
display: none;
}
.mode-control input:checked + span + span {
display: inline-block;
}
.mode-control span {
display: inline-block;
padding: 8px 10px 3px 10px;
line-height: 24px;
border-radius: 3px;
background-color: #222;
color: #fff;
margin-bottom: -1px;
}
body.dark .mode-control span {
background-color: #fff;
color: #222;
}
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
document.getElementById('mode-btn').addEventListener('click', () => {
document.body.classList.toggle('dark');
var x, i;
x = document.querySelectorAll(".dark-change")
for (i = 0; i < x.length; i++) {
x[i].classList.toggle('darkly');
}
var e, i;
e = document.querySelectorAll(".light-change")
for (i = 0; i < e.length; i++) {
e[i].classList.toggle('lightly');
}
var e, i;
e = document.querySelectorAll(".roundark-change")
for (i = 0; i < e.length; i++) {
e[i].classList.toggle('roundark');
}
d = document.querySelectorAll(".pure-dark")
for (i = 0; i < d.length; i++) {
d[i].classList.toggle('dark');
}
var f, i;
f = document.querySelectorAll(".light-change-oy")
for (i = 0; i < f.length; i++) {
f[i].classList.toggle('lightly-oy');
}
setCookie('mode', document.body.classList, 99999);
/*
BURAYI BÖYLE YAPABİLİYOR MUYUM ? YAPARSAM NASIL PHPDEKİ COOKİYE HEPSİNİ BAĞLARIM
VE AYNI ANDA ÇALIŞIRLAR
setCookie('mode', document.querySelectorAll(".dark-change").classList, 99999);
setCookie('mode', document.querySelectorAll(".light-change").classList, 99999);
setCookie('mode', document.querySelectorAll(".roundark-change").body.classList, 99999);
setCookie('mode', document.querySelectorAll(".pure-dark"), 99999);
*/
});
Cookie'ye bence hiç gerek yok. $_GET ile halledebiliriz.
İşte kodlar:
<?php
$s = $_GET['s']; // GET'i ayarlıyoruz.
?>
<body class="
<?php
if($_GET){
swicth($s){
case 'acik':
echo 'acik';
break;
case 'koyu':
echo 'koyu';
break;
default:
echo 'acik';
break;
}
}else {
echo 'acik';
}
?>
">
<a href="index.php?s=acik" class="
<?php
if($_GET){
swicth($s){
case 'acik':
echo 'hide';
break;
case 'koyu':
echo 'show';
break;
default:
echo 'hide';
break;
}
}else {
echo 'hide';
}
?>
">AÇIK MOD</a>
<a href="index.php?s=koyu" class="
<?php
if($_GET){
swicth($s){
case 'acik':
echo 'show';
break;
case 'koyu':
echo 'hide';
break;
default:
echo 'show';
break;
}
}else {
echo 'show';
}
?>
">KOYU MOD</a>
Gövde metni
</body>
Sıra CSS'de:
body.acik, body {
background: #fff;
color: #000;
}
body.koyu {
background: #000;
color: #fff;
}
.hide {
opacity: 0;
display: none;
}
.show {
opacity: 1;
display: block;
}
Bir sayfaya link verirken ise (Örnek):
<a href="menuler.php?p=
<?php
if($_GET){
swicth($s){
case 'acik':
echo 'acik';
break;
case 'koyu':
echo 'koyu';
break;
default:
echo 'acik';
break;
}
}else {
echo 'acik';
}
?>
">Menuler.php'ye Git</a>