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);
*/
});
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (3)
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>
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