From 46684c2c8b80596fd1edc6c120989363717e11c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C4=B0pek?= <yusufipek@protonmail.com>
Date: Thu, 1 Jul 2021 01:24:40 +0300
Subject: [PATCH] add(article) added an article and changed styling

---
 articles/websitenize-tema-ekleme.md           | 205 ++++++++++++++++++
 data/pictures/websitenize-tema-ekleme-01.webp | Bin 0 -> 9698 bytes
 data/pictures/websitenize-tema-ekleme.webp    | Bin 0 -> 5768 bytes
 data/style.css                                |  21 +-
 4 files changed, 221 insertions(+), 5 deletions(-)
 create mode 100644 articles/websitenize-tema-ekleme.md
 create mode 100644 data/pictures/websitenize-tema-ekleme-01.webp
 create mode 100644 data/pictures/websitenize-tema-ekleme.webp

diff --git a/articles/websitenize-tema-ekleme.md b/articles/websitenize-tema-ekleme.md
new file mode 100644
index 0000000..677c9d6
--- /dev/null
+++ b/articles/websitenize-tema-ekleme.md
@@ -0,0 +1,205 @@
+# Websitenize Tema Ekleme
+![websitenize-tema-ekleme](pictures/websitenize-tema-ekleme.webp)
+
+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. Düğmeyi oluşturma
+3. Renk düzenlerini oluşturma
+4. İşlevsellik
+5. Kullanıcının tercihine göre temayı kaydetme
+6. Kapanış
+7. Katkıda bulunanlar
+
+## Ne Yapacağız?
+Örnek olarak projelerimden birisini kullanacağım. Geçtiğimiz haftalarda 3 tane teması olan bir hesap makinesi yaptım.
+
+[kod](https://github.com/yusufipk/another-calculator) | [canlı demo](https://yusufipk.github.io/another-calculator/)
+
+![websitenize-tema-ekleme-01](pictures/websitenize-tema-ekleme-01.webp)
+
+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 radi 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.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)
+
+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;
+
+Radio elementine tıkladığımızda diğer bütün radio elementlerini uncheck haline getirmemiz lazım.
+Her radio elementine tıkladığımızda changeTheme() fonksiyonunu çalıştırmamız lazım.
+```
+ 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. Kullanıcının tercih ettiği temayı kaydetmiyoruz. Sayfa her yenilendiğinde tema eski haline dönüyor.
+
+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](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/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](https://yusufipek.me), [youtube](https://www.youtube.com/channel/UCVBX2n_5egE9XuJL8NUS0Xg)
+
+;tags: html css web-development
diff --git a/data/pictures/websitenize-tema-ekleme-01.webp b/data/pictures/websitenize-tema-ekleme-01.webp
new file mode 100644
index 0000000000000000000000000000000000000000..deede9216061a47167424c9a663990356820b792
GIT binary patch
literal 9698
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
Ad;kCd

literal 0
HcmV?d00001

diff --git a/data/pictures/websitenize-tema-ekleme.webp b/data/pictures/websitenize-tema-ekleme.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0966ecbdfae833763e70b6c4e0ef9abae9439d50
GIT binary patch
literal 5768
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
GaQ_7Un>=p-

literal 0
HcmV?d00001

diff --git a/data/style.css b/data/style.css
index 58dbe70..80da6db 100644
--- a/data/style.css
+++ b/data/style.css
@@ -4,7 +4,6 @@ body {
   max-width: 800px;
   margin: auto;
   padding: 0 16px;
-  margin-bottom: 500px;
   font-family: sans-serif;
 }
 
@@ -16,6 +15,14 @@ a:visited {
   color: gray;
 }
 
+ol > li {
+  margin-bottom: 0.5rem;
+}
+
+ul > li {
+  margin-bottom: 0.5rem;
+}
+
 h1 {
   text-align: center;
 }
@@ -29,15 +36,22 @@ footer {
 }
 
 img {
+  border-radius: 5px;
   max-width: 600px;
   width: 100%;
   margin: auto;
   display: block;
 }
 
+pre {
+  border-radius: 4px;
+  background-color: #12161b;
+  padding: 0 0.3rem 1rem 1rem;
+}
+
 code {
   overflow-wrap: break-word;
-  color: lime;
+  color: white;
 }
 
 @media (prefers-color-scheme: light) {
@@ -54,9 +68,6 @@ code {
   h2 {
     color: inherit;
   }
-  code {
-    color: forestgreen;
-  }
 }
 
 @media print {