Sitenizi Siyah Beyaz Yapın

/* tüm siteyi siyah-beyaz yapar */
html, body {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  /* isteğe bağlı: kontrastı biraz arttır */
  -webkit-filter: grayscale(100%) contrast(1.05);
  filter: grayscale(100%) contrast(1.05);
  transition: filter .35s ease;
}

/* logo, önemli görseller veya renkli kalmasını istediğin öğeler için sınıf ver */
.no-grayscale, img.no-grayscale, .logo {
  -webkit-filter: none !important;
  filter: none !important;
}

/* arka plan görselleri için (özellikle background-image) */
* {
  /* bazı durumlarda background-image grayscale uygulanmayabilir, bu yüzden :before ile kaplama yapılabilir.
     Ancak genelde üst satır yeterlidir. */
}

/* opsiyonel: hover ile geçici renk geri getirme */
a:hover, button:hover {
  -webkit-filter: none;
  filter: none;
}

html, body {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: filter .35s ease;
}

/* Logo gibi istisnalar için */
.no-grayscale { filter: none !important; -webkit-filter: none !important; }

<!-- CSS -->
<style>
  html.sb-grayscale { filter: grayscale(100%); -webkit-filter: grayscale(100%); transition: filter .35s ease; }
  .no-grayscale { filter: none !important; -webkit-filter: none !important; }
  #grayscale-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 9999; padding:8px 12px; border-radius:6px; cursor:pointer; }
  #grayscale-toggle.active { background:#000; color:#fff; }
</style>

<!-- Toggle butonu (body içine veya footer'a koy) -->
<button id="grayscale-toggle" aria-pressed="false">Siyah-Beyaz</button>

<!-- JS -->
<script>
(function(){
  var btn = document.getElementById('grayscale-toggle');
  if(!btn) return;
  var enabled = localStorage.getItem('grayscale') === '1';
  function setState(on){
    if(on){
      document.documentElement.classList.add('sb-grayscale');
      btn.classList.add('active');
      btn.textContent = 'Renkli Görünüm';
      btn.setAttribute('aria-pressed','true');
      localStorage.setItem('grayscale','1');
    } else {
      document.documentElement.classList.remove('sb-grayscale');
      btn.classList.remove('active');
      btn.textContent = 'Siyah-Beyaz';
      btn.setAttribute('aria-pressed','false');
      localStorage.setItem('grayscale','0');
    }
  }
  setState(enabled);
  btn.addEventListener('click', function(){ setState(!document.documentElement.classList.contains('sb-grayscale')); });
})();
</script>

html:before {
    content: "";
    position: fixed;
    inset: 0;
    background: white;
    mix-blend-mode: color;
    pointer-events: none;
    z-index: 9999999999;
}

body {
filter: grayscale(100%) brightness(100%);
}