From d0c1c33afb07a542c0089ad4091ed127fc733aa6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C4=B0pek?= Date: Fri, 9 Jul 2021 17:35:06 +0300 Subject: [PATCH] =?UTF-8?q?d=C3=BCzeltme(klas=C3=B6r)=20blog=20ve=20tags?= =?UTF-8?q?=20klas=C3=B6rleri=20silindi.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 - blog/@css.html | 44 ----- blog/@html.html | 44 ----- blog/@web-development.html | 44 ----- blog/atom.xml | 18 -- blog/index.html | 45 ----- blog/rss.xml | 15 -- blog/websitenize-tema-ekleme.html | 276 ------------------------------ tags/websitenize-tema-ekleme | 3 - 9 files changed, 491 deletions(-) delete mode 100644 blog/@css.html delete mode 100644 blog/@html.html delete mode 100644 blog/@web-development.html delete mode 100644 blog/atom.xml delete mode 100644 blog/index.html delete mode 100644 blog/rss.xml delete mode 100644 blog/websitenize-tema-ekleme.html delete mode 100644 tags/websitenize-tema-ekleme diff --git a/.gitignore b/.gitignore index 5d53331..e69de29 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +0,0 @@ -blog/ -tags/ diff --git a/blog/@css.html b/blog/@css.html deleted file mode 100644 index f270962..0000000 --- a/blog/@css.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - Articles tagged css - - - - -

Etiketle rehber bulun: css

-

Rehberler

-

Site Hakkında

-Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir. -

Nasıl Rehber Yazarım?

- - - - diff --git a/blog/@html.html b/blog/@html.html deleted file mode 100644 index 7cfda21..0000000 --- a/blog/@html.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - Articles tagged html - - - - -

Etiketle rehber bulun: html

-

Rehberler

-

Site Hakkında

-Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir. -

Nasıl Rehber Yazarım?

- - - - diff --git a/blog/@web-development.html b/blog/@web-development.html deleted file mode 100644 index 1293b75..0000000 --- a/blog/@web-development.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - Articles tagged web-development - - - - -

Etiketle rehber bulun: web-development

-

Rehberler

-

Site Hakkında

-Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir. -

Nasıl Rehber Yazarım?

- - - - diff --git a/blog/atom.xml b/blog/atom.xml deleted file mode 100644 index ee6ed1f..0000000 --- a/blog/atom.xml +++ /dev/null @@ -1,18 +0,0 @@ - - -Teknoloji Rehberleri -blog -2021-07-01T01:30:15Z - -http://localhost/blog/atom.xml - - -# Websitenize Tema Ekleme - -http://localhost/blog/websitenize-tema-ekleme.html -2021-07-01T01:24:40Z -2021-07-01T01:29:57Z -Yusuf İpek -![websitenize-tema-ekleme](pictures/websitenize-tema-ekleme.webp) - - diff --git a/blog/index.html b/blog/index.html deleted file mode 100644 index 379cdc9..0000000 --- a/blog/index.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - Teknoloji Rehberleri - - - - -

Teknoloji rehberleri. Reklam ve izleyici yok!

-

Etiketler: -css, html, web-development

Rehberler

-

Site Hakkında

-Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir. -

Nasıl Rehber Yazarım?

- - - - diff --git a/blog/rss.xml b/blog/rss.xml deleted file mode 100644 index 7692c77..0000000 --- a/blog/rss.xml +++ /dev/null @@ -1,15 +0,0 @@ - - - -Teknoloji Rehberleri -http://localhost/blog -blog - -# Websitenize Tema Ekleme -http://localhost/blog/websitenize-tema-ekleme.html -http://localhost/blog/websitenize-tema-ekleme.html -Prş, 01 Tem 2021 01:24:40 +0300 -![websitenize-tema-ekleme](pictures/websitenize-tema-ekleme.webp) - - - diff --git a/blog/websitenize-tema-ekleme.html b/blog/websitenize-tema-ekleme.html deleted file mode 100644 index 5209164..0000000 --- a/blog/websitenize-tema-ekleme.html +++ /dev/null @@ -1,276 +0,0 @@ - - - - - - - - # Websitenize Tema Ekleme - - - -

# Websitenize Tema Ekleme

-websitenize-tema-ekleme -

-

-Karanlık temalara bayılıyorum. Kullandığım her websitesinde ve uygulamada karanlık tema tercih ediyorum. Peki tema seçeneklerini sitemize nasıl koyarız? Birden fazla temayı sitemizde nasıl yapabiliriz bu rehberde bunu anlatacağım. -

- -
    -
  1. Ne yapacağız?
    2. -
  2. Düğmeyi oluşturma
    3. -
  3. Renk düzenlerini oluşturma
    4. -
  4. İşlevsellik
    5. -
  5. Kullanıcının tercihine göre temayı kaydetme
    6. -
  6. Kapanış
    7. -
  7. Katkıda bulunanlar
    8. -
- -

Ne Yapacağız?

-

-Örnek olarak projelerimden birisini kullanacağım. Geçtiğimiz haftalarda 3 tane teması olan bir hesap makinesi yaptım. -

-

-kod | canlı demo -

-

-websitenize-tema-ekleme-01 -

-

-Gördüğünüz gibi düğmemiz var ve bu düğmeyle 3 tema arasında seçim yapabiliyoruz. -

- -

Düğmeyi Oluşturma

-

-Düğmeyi oluşturmak için checkbox, radio veya button elementlerini kullanabiliriz. Burada ben radio elementini kullanacağım. -

- -

-<div class="radio">
-  <input type="radio" id="theme1" name="theme1" />
-  <input type="radio" id="theme2" name="theme2" />
-  <input type="radio" id="theme3" name="theme3" />
-</div>
-
- -

Renk Düzenlerini Oluşturma

-

-Renk düzenlerini CSS değişkenlerini kullanarak oluşturacağız. SASS değişkenlerinin derlenmesi gerektiğinden SASS değişkenleri kullanamazsınız! Bu uygulamada ben üç tane tema yapıyorum dolayısıyla üç tane renk düzeni oluşturacağım. İlki; -

-

- :root {
-  --color-main: #3b4664;
-  --color-white: #ffffff;
-  --bg-main: #181f32;
-  --bg-buttons: rgba(37, 45, 68, 0.6);
-  --num: #eae3db;
-  --number-color: #484b5a;
-  --number-border: #b3a599;
-  --button-secondary: #647299;
-  --border-secondary: #404d70;
-  --button-tertiary: #d13f30;
-  --border-tertiary: #922417;
-  --radio-color: #cf3f34;
-}
-
-

-Bu varsayılan temam olacak dolayısıyla herhangi bir attribute eklememe gerek yok. İkinci temam; -

-

-body[data-theme="light"] {
-  --color-main: #e6e6e6;
-  --color-white: #3a3a32;
-  --bg-main: #eeeeee;
-  --bg-buttons: #d3cdcd;
-  --num: #e5e4e0;
-  --number-color: #3a3a32;
-  --number-border: #a69c93;
-  --button-secondary: #388187;
-  --border-secondary: #1a5d66;
-  --button-tertiary: #c85401;
-  --border-tertiary: #873a02;
-}
-
-

-Bu aydınlık temamız olacak. data-theme yazarak bunu belirtmemiz gerekli. Data özel bir attribute. Data hakkında daha fazla bilgi almak istiyorsanız buraya bakın. -

-

-Son temamızsa; -

-

-body[data-theme="purple"] {
-  --color-main: #17062a;
-  --color-white: #ffe43b;
-  --bg-main: #1e0836;
-  --bg-buttons: #1e0836;
-  --num: #331b4d;
-  --number-color: #ffe537;
-  --number-border: #85219b;
-  --button-secondary: #56077c;
-  --border-secondary: #bf15f4;
-  --button-tertiary: #00decf;
-  --border-tertiary: #6dfaf1;
-  --radio-color: #00e8d8;
-}
-
-

-Bu kurulumla birlikte değişkenlerimizi kodumuzda kullanıp istediğimiz temayı dinamik olarak sayfamızda değiştirebileceğiz. -

- -

İşlevselliği Ekliyoruz

-

-İlk olarak radio elementlerimizi Javascript ile seçmemiz gerekli. -

-

-const theme1 = document.getElementById("theme1");
-const theme2 = document.getElementById("theme2");
-const theme3 = document.getElementById("theme3");
-
-

-Şimdi changeTheme() fonksiyonunu oluşturacağız. Bu fonksiyon body attribute değerini değiştirmemizi sağlayacak ve böylece istediğimiz temayı sitede kullanabileceğiz. -

- -

-function changeTheme() {
-  if (theme1.checked) {
-    document.body.setAttribute("data-theme", "");
-  } else if (theme2.checked) {
-    document.body.setAttribute("data-theme", "light");
-  } else if (theme3.checked) {
-    document.body.setAttribute("data-theme", "purple");
-  } else return;
-}
-
-

-Şimdi de eventListener eklememiz lazım, yapmasını istediğimiz iki şey var; -

- -
    -
  1. Radio elementine tıkladığımızda diğer bütün radio elementlerini uncheck haline getirmemiz lazım.
    2. -
  2. Her radio elementine tıkladığımızda changeTheme() fonksiyonunu çalıştırmamız lazım.
    3. -
-

- theme1.addEventListener("click", () => {
-  theme2.checked = false;
-  theme3.checked = false;
-  changeTheme();
-});
-theme2.addEventListener("click", () => {
-  theme1.checked = false;
-  theme3.checked = false;
-  changeTheme();
-});
-theme3.addEventListener("click", () => {
-  theme1.checked =false;
-  theme2.checked = false;
-  changeTheme();
-});
-
-

-Bununla birlikte bütün temalarımız işlevesel bir şekilde çalışıyor! Kullanıcı hangi temaya tıklarsa site ona göre değişecek. -

- -

Kullanıcının Tercihine Göre Temayı Kaydetme

-

-İki sorunumuz var: -

- -
    -
  1. Kodumuzda varsayılan tema yok.
    2. -
  2. Kullanıcının tercih ettiği temayı kaydetmiyoruz. Sayfa her yenilendiğinde tema eski haline dönüyor.
    3. -
-

-Bu sorunu localStorage kullanarak aşacağız. -

-

-İlk olarak varsayılan tema oluştralım. -

- -

-// Varsayılan temam "theme1" olacak
-if (localStorage.getItem("theme") === null) {
-  localStorage.setItem("theme", "theme1");
-}
-
-

-Switch kullanarak her sayfayı yenilediğimizde seçilen temayı tekrar seçeceğiz. -

- -

-switch (localStorage.getItem("theme")) {
-  case "theme1":
-    theme1.checked = true;
-    break;
-  case "theme2":
-    theme2.checked = true;
-    break;
-  case "theme3":
-    theme3.checked = true;
-    break;
-  default:
-    break;
-}
-
-

-Daha sonrasında localStorage.setItem() kullanarak eventListener'larının kullanıcının seçtiği temayı localStorage'a kaydetmesini sağlayacağız. -

- -

-theme1.addEventListener("click", () => {
-  theme2.checked = false;
-  theme3.checked = false;
-  // New Code
-  localStorage.setItem("theme", "theme1");
-  changeTheme();
-});
-theme2.addEventListener("click", () => {
-  theme1.checked = false;
-  theme3.checked = false;
-  // New Code
-  localStorage.setItem("theme", "theme2");
-  changeTheme();
-});
-theme3.addEventListener("click", () => {
-  theme1.checked = false;
-  theme2.checked = false;
-  // New Code
-  localStorage.setItem("theme", "theme3");
-  changeTheme();
-});
-
-

-Son olarak kodun sonunda changeTheme() fonksiyonunu çağırmamız gerekli ki her sayfayı yenilediğimizde rengimiz değişebilsin. -

-

-Bu kadar! Websitemizde kullanıcının seçebileceği 3 tane temamız var ve localStrage kullanarak temayı kaydediyoruz. Sitenize bu yöntemle istediğiniz kadar tema ekleyebilirsiniz. -

- -

Kapanış

-

-Kullanıcının tema tercihini de göz önünde bulundurmak istiyorsanız CSS'te olan prefers-color-scheme media query'sini kullanarak varsayılan temayı karanlık/aydınlık olarak ayarlayabilirsiniz. Kolay bir işlem olduğundan bu rehberi daha fazla uzatmak istemiyorum. -

-

-Benim ilk kodlama rehberimdi ve herhangi bir geri bildiriminiz varsa lütfen bana ulaşın! Okuduğunuz için teşekkürler ve umarım bu rehber size faydalı olmuştur. -

- -

Katkıda Bulunanlar

-

-Yusuf İpek website, youtube -

-

Yazının paylaşıldığı tarih: 01-07-2021 01:24:40, son düzenleme tarihi: 01-07-2021 01:29:57, yazar: Yusuf İpek

- - diff --git a/tags/websitenize-tema-ekleme b/tags/websitenize-tema-ekleme deleted file mode 100644 index cd7f9d9..0000000 --- a/tags/websitenize-tema-ekleme +++ /dev/null @@ -1,3 +0,0 @@ -css -html -web-development