v2.5.2
Giriş yap

Prototurk youtube'daki koyu modu yaptım ama cookie işlemini beceremiyorum(Çözüldü)

erdem
938 defa görüntülendi
3

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);
	  */
});
php javascript prototurk
Cevap yaz
Cevaplar (3)
protobruh
1066 gün önce

<?php
$bruh_moment = "protobruh";
echo($bruh_moment);
?>

0
#004914
arduinoturkbatu
1109 gün önce

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>
0
#004439
erdem
1382 gün önce

Sorunu kendim çözdüm aslında çok uzatmışım css'in root: özelliğini bilmiyordum birde css'te değişken tanımlayabiliyormuşuz(--keyfine-göre-isimlendir) yani ben değişken gibi düşündüm
ben bu sebeple olayı şöyle çözdüm

:root {
	--header-color:#086972;
    --main-color: #eeeeee;
	--footer-color: #363636;
}
/*:root ile ana renkleri belirleyebiliyoruz veya diğer css özellikleri de olabilir sadece renk değil boyut çerçeve....ama root sitenin ilk halini gösteriyor*/
/*sonra da koyu halininin nasıl olmasını istiyorsak onu yazıyoruz örnek olarak dark class'ına atayalım*/

.dark {
	--header-color:#414141;
    --main-color: #525252;
	--footer-color: #313131;
}

/*ve artık bunu istediğim class'ta var(--keyfine-göre-isimlendir) olarak kullanabiliyorum*/

header .navbar{
    bacground-color: var(--header-color);
}

.content {
    bacground-color: var(--main-color);
}

footer {
    bacground-color: var(--footer-color);
}

Bundan sonrası aynı Tayfun Erbilenin videoda yaptığı gibi 

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('modeBtn').addEventListener('click', () => {
  
  document.body.classList.toggle('dark');

  setCookie('mode', document.body.classList, 99999);

});

<?php 
 function cookie($name){
  if(isset($_COOKIE[$name]) && !empty($_COOKIE[$name]))
   return $_COOKIE[$name]; 
 }
?>
<!doctype html>
<html>
    .
    .
    .
<body class="<?=cookie('mode') == 'dark' ? 'dark' : null ?>">
 <div id="kapsul">
  <header class="blog-header py-3">
    <div class="row flex-nowrap justify-content-between align-items-center">
      <div class="col-md-4 left-nav pt-1">
        <a style="background-color: #fff; color: var(--home-button)!important; border-radius: 100%;padding: 6px 10px 6px 10px;" class="btn homeButton" href="index.php"><i class="fa fa-home"></i></a> 
         <label <?=cookie('mode') == 'dark' ? 'checked' : null ?> class="mode-control">
          <input id="modeBtn" type="checkbox">
          <span class="fa fa-moon-o"></span>
          <span class="fa fa-moon-o"></span>
        </label>      
      </div>

kısaca birden çok css özelliğini renk olsun boyut olsun akla ne geliyorsa (.dark) benzeri class'a atayabiliyoruz var() ile onu istediğimiz classa çekebiliyoruz

1
#001672