{"id":43564,"date":"2026-07-23T21:03:23","date_gmt":"2026-07-23T18:03:23","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/"},"modified":"2026-07-23T21:03:41","modified_gmt":"2026-07-23T18:03:41","slug":"karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/","title":{"rendered":"Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131?"},"content":{"rendered":"<h2>Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131?<\/h2>\n<p>Karanl\u0131k mod mimarisinde iki farkl\u0131 CSS dosyas\u0131 kullanmak performans kay\u0131plar\u0131na ve bak\u0131m zorluklar\u0131na yol a\u00e7ar. Modern CSS y\u00f6ntemleriyle ideal \u00e7\u00f6z\u00fcm\u00fc ke\u015ffedin.<\/p>\n<p>Web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimini (User Experience &#8211; UX) art\u0131ran en pop\u00fcler \u00f6zelliklerden biri \u015f\u00fcphesiz karanl\u0131k mod (Dark Mode) deste\u011fidir. Kullan\u0131c\u0131lar\u0131n g\u00f6z yorgunlu\u011funu azaltan ve \u00f6zellikle OLED ekranlarda pil tasarrufu sa\u011flayan bu \u00f6zellik, g\u00fcn\u00fcm\u00fczde bir l\u00fcks de\u011fil, standart bir gereksinim haline gelmi\u015ftir. Ancak, pek \u00e7ok geli\u015ftirici ve mimar, karanl\u0131k modu projelerine dahil ederken ba\u015flang\u0131\u00e7ta en kolay gibi g\u00f6r\u00fcnen fakat uzun vadede felakete yol a\u00e7an bir y\u00f6ntemi se\u00e7mektedir: Ayd\u0131nl\u0131k ve karanl\u0131k modlar i\u00e7in iki ayr\u0131 CSS (Cascading Style Sheets &#8211; Basamakl\u0131 Stil \u015eablonlar\u0131) dosyas\u0131 olu\u015fturmak.<\/p>\n<p>Bu makalede, iki ayr\u0131 CSS dosyas\u0131 bar\u0131nd\u0131rman\u0131n neden mimari bir anti-desen (Anti-pattern) oldu\u011funu, a\u011f performans\u0131n\u0131 nas\u0131l olumsuz etkiledi\u011fini ve kod taban\u0131n\u0131z\u0131 nas\u0131l s\u00fcrd\u00fcr\u00fclemez hale getirdi\u011fini derinlemesine inceleyece\u011fiz. Bununla birlikte, CSS De\u011fi\u015fkenleri (CSS Custom Properties) ve modern medya sorgular\u0131 (Media Queries) kullanarak tek bir CSS dosyas\u0131 \u00fczerinden nas\u0131l esnek, performansl\u0131 ve bak\u0131m\u0131 kolay bir tema sistemi kurabilece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz.<\/p>\n<h2>Web Tasar\u0131m\u0131nda Karanl\u0131k Modun Y\u00fckseli\u015fi ve Yap\u0131lan \u0130lk Hatalar Nelerdir?<\/h2>\n<p>Karanl\u0131k mod trendi ilk yayg\u0131nla\u015fmaya ba\u015flad\u0131\u011f\u0131nda, web geli\u015ftirme ekosistemindeki bir\u00e7ok yaz\u0131l\u0131m \u00e7er\u00e7evesi (Framework) ve i\u00e7erik y\u00f6netim sistemi (CMS) h\u0131zl\u0131 \u00e7\u00f6z\u00fcmler \u00fcretmeye \u00e7al\u0131\u015ft\u0131. Bu \u00e7\u00f6z\u00fcmlerin ba\u015f\u0131nda var olan <code>style.css<\/code> dosyas\u0131n\u0131n bir kopyas\u0131n\u0131 al\u0131p ad\u0131n\u0131 <code>dark-style.css<\/code> yapmak ve i\u00e7erideki t\u00fcm renk kodlar\u0131n\u0131 manuel olarak de\u011fi\u015ftirmek geliyordu. \u0130lk bak\u0131\u015fta bu yakla\u015f\u0131m h\u0131zl\u0131 bir sonu\u00e7 veriyor gibi g\u00f6r\u00fcnse de, projenin \u00f6l\u00e7e\u011fi b\u00fcy\u00fcd\u00fck\u00e7e b\u00fcy\u00fck sorunlar\u0131 beraberinde getirdi.<\/p>\n<p>\u00d6zellikle yerel geli\u015ftirme ortamlar\u0131nda ve T\u00fcrk\u00e7e yay\u0131n yapan b\u00fcy\u00fck haber veya e-ticaret sitelerinde bu hataya s\u0131kl\u0131kla rastlanmaktad\u0131r. Geli\u015ftiriciler, kullan\u0131c\u0131 bir anahtara (Toggle) bast\u0131\u011f\u0131nda JavaScript ile HTML dok\u00fcman\u0131n\u0131n ba\u015fl\u0131\u011f\u0131na (Head) yeni bir <code>&lt;link&gt;<\/code> etiketi enjekte etmekte veya mevcut olan\u0131 de\u011fi\u015ftirmektedir. Bu durum, web sitesinin y\u00fcklenme mimarisini ve taray\u0131c\u0131n\u0131n i\u015fleme s\u00fcre\u00e7lerini do\u011frudan sabote etmektedir.<\/p>\n<p>\u0130ki ayr\u0131 stil dosyas\u0131 tutmak, \u00f6ncelikle kodun tekrar edilmesine (Code Duplication) yol a\u00e7ar. Bir butonun kenar yuvarlatmas\u0131 (border-radius), yaz\u0131 tipi boyutu (font-size) veya i\u00e7 bo\u015flu\u011fu (padding) de\u011fi\u015fti\u011finde, geli\u015ftiricinin bu de\u011fi\u015fikli\u011fi her iki CSS dosyas\u0131nda da yapmas\u0131 gerekir. Zamanla bu dosyalar birbirinden senkronizasyon a\u00e7\u0131s\u0131ndan uzakla\u015f\u0131r ve sitede g\u00f6rsel tutars\u0131zl\u0131klar (Visual Regression) ba\u015f g\u00f6sterir. Dolay\u0131s\u0131yla, bu y\u00f6ntem hem bak\u0131m maliyetini art\u0131r\u0131r hem de geli\u015ftirici deneyimini (Developer Experience &#8211; DX) ciddi oranda d\u00fc\u015f\u00fcr\u00fcr.<\/p>\n<h2>\u0130ki Ayr\u0131 CSS Dosyas\u0131 Kullanmak Neden Performans Kabusuna D\u00f6n\u00fc\u015f\u00fcr?<\/h2>\n<p>Web performans\u0131n\u0131 \u00f6l\u00e7erken dikkate ald\u0131\u011f\u0131m\u0131z en kritik de\u011ferlerden biri, taray\u0131c\u0131n\u0131n ekrana ilk pikseli \u00e7izene kadar ge\u00e7en s\u00fcresidir. CSS kaynaklar\u0131, do\u011fas\u0131 gere\u011fi &#8220;ekran olu\u015fturmay\u0131 engelleyen kaynaklar&#8221; (Render-blocking resources) s\u0131n\u0131f\u0131na girer. Yani taray\u0131c\u0131, HTML belgesinde kar\u015f\u0131la\u015ft\u0131\u011f\u0131 CSS dosyas\u0131n\u0131 tamamen indirip ayr\u0131\u015ft\u0131rmadan (Parse) sayfay\u0131 kullan\u0131c\u0131ya sunmaz.<\/p>\n<p>Projenizde iki ayr\u0131 CSS dosyas\u0131 bulundurdu\u011funuzda ortaya \u00e7\u0131kan temel teknik aksakl\u0131klar \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Ekstra A\u011f \u0130stekleri (Network Overhead):<\/strong> Kullan\u0131c\u0131 sitenize girdi\u011finde, taray\u0131c\u0131 hen\u00fcz tema tercihini bilmedi\u011fi i\u00e7in veya JavaScript kodunuz \u00e7al\u0131\u015fana kadar ana stil dosyas\u0131n\u0131 y\u00fckler. Tema de\u011fi\u015fti\u011finde ise ikinci bir HTTP iste\u011fi at\u0131larak yeni dosya indirilir. Bu durum, gereksiz bant geni\u015fli\u011fi kullan\u0131m\u0131na sebep olur.<\/li>\n<li><strong>Stilsiz \u0130\u00e7erik Parlamas\u0131 (Flash of Unstyled Content &#8211; FOUC):<\/strong> Kullan\u0131c\u0131 sayfa de\u011fi\u015ftirdi\u011finde veya karanl\u0131k moda ge\u00e7ti\u011finde, JavaScript&#8217;in di\u011fer CSS dosyas\u0131n\u0131 y\u00fcklemesi birka\u00e7 y\u00fcz milisaniye s\u00fcrebilir. Bu esnada kullan\u0131c\u0131 anl\u0131k olarak beyaz bir ekran veya stilize edilmemi\u015f bir i\u00e7erik g\u00f6r\u00fcr. Bu durum kullan\u0131c\u0131 deneyimini son derece olumsuz etkiler.<\/li>\n<li><strong>\u00d6nbellek (Cache) \u0130novasyon Zorluklar\u0131:<\/strong> \u0130ki farkl\u0131 dosyan\u0131n s\u00fcr\u00fcm kontrol\u00fcn\u00fc (Versioning) yapmak ve CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) \u00fczerinde do\u011fru zamanl\u0131 \u00f6nbellek temizli\u011fi sa\u011flamak iki kat daha zordur.<\/li>\n<\/ul>\n<p>A\u015fa\u011f\u0131daki tabloda, iki ayr\u0131 CSS dosyas\u0131 kullanmak ile tek bir CSS dosyas\u0131 i\u00e7erisinde de\u011fi\u015fken yap\u0131s\u0131 kullanman\u0131n performans ve mimari a\u00e7\u0131dan kar\u015f\u0131la\u015ft\u0131rmas\u0131n\u0131 g\u00f6rebilirsiniz:<\/p>\n<table>\n<thead>\n<tr>\n<th>Kriter<\/th>\n<th>\u00c7ift CSS Dosyas\u0131 Y\u00f6ntemi<\/th>\n<th>Tek CSS + De\u011fi\u015fkenler Y\u00f6ntemi<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>A\u011f \u0130stek Say\u0131s\u0131<\/td>\n<td>Her tema de\u011fi\u015fiminde +1 \u0130stek<\/td>\n<td>Tek \u0130stek (T\u00fcm temalar dahil)<\/td>\n<\/tr>\n<tr>\n<td>Bak\u0131m Kolayl\u0131\u011f\u0131<\/td>\n<td>\u00c7ok Zor (\u00c7ift kod tekrar\u0131)<\/td>\n<td>\u00c7ok Kolay (Tek noktadan y\u00f6netim)<\/td>\n<\/tr>\n<tr>\n<td>FOUC Riski<\/td>\n<td>\u00c7ok Y\u00fcksek<\/td>\n<td>S\u0131f\u0131r veya \u00c7ok D\u00fc\u015f\u00fck<\/td>\n<\/tr>\n<tr>\n<td>\u0130\u00e7erik Boyutu<\/td>\n<td>Toplamda %80-%100 daha fazla kod<\/td>\n<td>Sadece renk tan\u0131mlar\u0131 kadar (%5-%10 art\u0131\u015f)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>CSS De\u011fi\u015fkenleri (Custom Properties) \u0130le Karanl\u0131k Mod Nas\u0131l Y\u00f6netilir?<\/h2>\n<p>Modern CSS, bize CSS De\u011fi\u015fkenleri (Custom Properties) ad\u0131n\u0131 verdi\u011fimiz harika bir \u00f6zellik sunmaktad\u0131r. CSS de\u011fi\u015fkenleri sayesinde, renk de\u011ferlerimizi tek bir yerde tan\u0131mlayabilir ve projenin genelinde bu de\u011fi\u015fkenleri \u00e7a\u011f\u0131rabiliriz. B\u00f6ylece, temay\u0131 de\u011fi\u015ftirmek sadece bu de\u011fi\u015fkenlerin de\u011ferlerini de\u011fi\u015ftirmekten ibaret hale gelir.<\/p>\n<p>Bu mimariyi kurgularken izlenmesi gereken temel ad\u0131m, semantik (Anlamsal) renk isimleri belirlemektir. \u00d6rne\u011fin, renk de\u011fi\u015fkeninize <code>--white<\/code> veya <code>--black<\/code> ad\u0131n\u0131 vermek yerine <code>--bg-primary<\/code> (Birincil Arka Plan) veya <code>--text-color<\/code> (Metin Rengi) gibi isimler vermelisiniz. \u00c7\u00fcnk\u00fc ayd\u0131nl\u0131k modda beyaz olan arka plan, karanl\u0131k modda siyah olacakt\u0131r.<\/p>\n<p>\u015eimdi bunu uygulamal\u0131 bir \u00f6rnekle inceleyelim. A\u015fa\u011f\u0131daki kod blo\u011funda, HTML k\u00f6k eleman\u0131 (Root) \u00fczerinde tan\u0131mlanan varsay\u0131lan de\u011fi\u015fkenleri ve karanl\u0131k mod aktif oldu\u011funda bu de\u011fi\u015fkenlerin nas\u0131l ezildi\u011fini (Override) g\u00f6rebilirsiniz:<\/p>\n<div class=\"code-container\">\n<pre><code>\/* Varsay\u0131lan Ayd\u0131nl\u0131k Mod (Light Mode) *\/\n:root {\n  --bg-primary: #ffffff;\n  --bg-secondary: #f4f5f7;\n  --text-primary: #172b4d;\n  --text-secondary: #5e6c84;\n  --accent-color: #0052cc;\n  --border-color: #dfe1e6;\n}\n\n\/* Karanl\u0131k Mod De\u011fi\u015fkenleri *\/\n[data-theme=\"dark\"] {\n  --bg-primary: #121212;\n  --bg-secondary: #1e1e1e;\n  --text-primary: #e3e8ef;\n  --text-secondary: #9aa5b1;\n  --accent-color: #4c9aff;\n  --border-color: #2d3748;\n}\n\n\/* Elemanlar\u0131n Kullan\u0131m\u0131 *\/\nbody {\n  background-color: var(--bg-primary);\n  color: var(--text-primary);\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n.card {\n  background-color: var(--bg-secondary);\n  border: 1px solid var(--border-color);\n  padding: 20px;\n}\n\n.button {\n  background-color: var(--accent-color);\n  color: var(--bg-primary);\n}<\/code><\/pre>\n<\/div>\n<p>Yukar\u0131daki yakla\u015f\u0131m sayesinde, sitenize yeni bir bile\u015fen (Component) ekledi\u011finizde karanl\u0131k mod i\u00e7in tek bir satir dahi ekstra CSS yazman\u0131za gerek kalmaz. Bile\u015feniniz sadece <code>var(--bg-secondary)<\/code> gibi de\u011fi\u015fkenleri kulland\u0131\u011f\u0131 s\u00fcrece, \u00fcst kapsay\u0131c\u0131daki tema de\u011fi\u015fti\u011fi an otomatik olarak yeni renklere uyum sa\u011flayacakt\u0131r.<\/p>\n<h2>Media Query <code>prefers-color-scheme<\/code> ve Veri \u00d6znitelikleri (Data Attributes) Nas\u0131l Birlikte Kullan\u0131l\u0131r?<\/h2>\n<p>\u0130deal bir kullan\u0131c\u0131 deneyimi i\u00e7in web sitenizin iki \u00f6nemli beklentiyi kar\u015f\u0131lamas\u0131 gerekir: Birincisi, kullan\u0131c\u0131n\u0131n i\u015fletim sistemi (Windows, macOS, iOS, Android) seviyesindeki tema tercihine sayg\u0131 duymak; ikincisi ise kullan\u0131c\u0131ya site \u00fczerinde bu tercihi manuel olarak de\u011fi\u015ftirme (Override) imkan\u0131 sunmakt\u0131r.<\/p>\n<p>CSS b\u00fcnyesinde bulunan <code>prefers-color-scheme<\/code> medya sorgusu, i\u015fletim sisteminin karanl\u0131k modda olup olmad\u0131\u011f\u0131n\u0131 do\u011frudan tespit edebilir. Ancak tek ba\u015f\u0131na kullan\u0131ld\u0131\u011f\u0131nda, kullan\u0131c\u0131n\u0131n site \u00fczerindeki bir buton vas\u0131tas\u0131yla temay\u0131 de\u011fi\u015ftirmesine izin vermez. Bu nedenle, medya sorgusunu veri \u00f6znitelikleri (Data Attributes) ile hibrit bir \u015fekilde kullanmak en profesyonel yakla\u015f\u0131md\u0131r.<\/p>\n<p>A\u015fa\u011f\u0131daki \u00f6rnekte, hem i\u015fletim sistemi tercihini dinleyen hem de HTML \u00fczerindeki <code>data-theme<\/code> \u00f6zniteli\u011fine \u00f6ncelik veren geli\u015fmi\u015f bir CSS yap\u0131s\u0131 bulunmaktad\u0131r:<\/p>\n<div class=\"code-container\">\n<pre><code>\/* 1. Sistem Tercihi: \u0130\u015fletim sistemi karanl\u0131k moddaysa *\/\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg-primary: #121212;\n    --text-primary: #e3e8ef;\n    --border-color: #2d3748;\n  }\n}\n\n\/* 2. Sistem Tercihi: \u0130\u015fletim sistemi ayd\u0131nl\u0131k moddaysa *\/\n@media (prefers-color-scheme: light) {\n  :root {\n    --bg-primary: #ffffff;\n    --text-primary: #172b4d;\n    --border-color: #dfe1e6;\n  }\n}\n\n\/* 3. Manuel Tercih: Kullan\u0131c\u0131 buton ile ayd\u0131nl\u0131k modu se\u00e7erse (Ezici G\u00fc\u00e7) *\/\n[data-theme=\"light\"] {\n  --bg-primary: #ffffff;\n  --text-primary: #172b4d;\n  --border-color: #dfe1e6;\n}\n\n\/* 4. Manuel Tercih: Kullan\u0131c\u0131 buton ile karanl\u0131k modu se\u00e7erse (Ezici G\u00fc\u00e7) *\/\n[data-theme=\"dark\"] {\n  --bg-primary: #121212;\n  --text-primary: #e3e8ef;\n  --border-color: #2d3748;\n}<\/code><\/pre>\n<\/div>\n<p>Bu mimari sayesinde, kullan\u0131c\u0131 sitenizi ilk kez ziyaret etti\u011finde hi\u00e7bir JavaScript \u00e7al\u0131\u015fmas\u0131na gerek kalmadan i\u015fletim sistemi temas\u0131na uygun renkler saniyesinde y\u00fcklenir. E\u011fer kullan\u0131c\u0131 sitedeki tema de\u011fi\u015ftirme butonuna basarsa, JavaScript sadece <code>&lt;html&gt;<\/code> etiketine <code>data-theme=\"dark\"<\/code> veya <code>data-theme=\"light\"<\/code> de\u011ferini atar ve bu tercih <code>localStorage<\/code> \u00fczerinde saklan\u0131r.<\/p>\n<h2>Ger\u00e7ek D\u00fcnya Vaka Analizi: Yerel Bir E-Ticaret Sitesinin Performans D\u00f6n\u00fc\u015f\u00fcm\u00fc<\/h2>\n<p>Teorik bilginin \u00f6tesinde, bu mimari de\u011fi\u015fikli\u011fin ger\u00e7ek d\u00fcnyadaki kar\u015f\u0131l\u0131\u011f\u0131n\u0131 g\u00f6rmek a\u00e7\u0131s\u0131ndan T\u00fcrkiye pazar\u0131nda hizmet veren orta \u00f6l\u00e7ekli bir e-ticaret platformunun (\u00d6rnek olarak &#8220;PazarGelsin&#8221; diyelim) ya\u015fad\u0131\u011f\u0131 d\u00f6n\u00fc\u015f\u00fcm\u00fc inceleyelim.<\/p>\n<p>PazarGelsin yaz\u0131l\u0131m ekibi, 2023 y\u0131l\u0131nda sitelerine karanl\u0131k mod eklemeye karar verdi. \u0130lk a\u015famada h\u0131zl\u0131ca ilerlemek ad\u0131na <code>main.css<\/code> (140 KB) dosyas\u0131n\u0131n bir kopyas\u0131n\u0131 alarak <code>main-dark.css<\/code> (145 KB) dosyas\u0131n\u0131 olu\u015fturdular. Kullan\u0131c\u0131 anahtara bast\u0131\u011f\u0131nda JavaScript vas\u0131tas\u0131yla link etiketinin adresi de\u011fi\u015ftiriliyordu.<\/p>\n<p>\u00dc\u00e7 ay i\u00e7erisinde kar\u015f\u0131la\u015f\u0131lan sorunlar \u015funlar oldu:<\/p>\n<ol>\n<li><strong>Kampanya D\u00f6nemlerinde Hatalar:<\/strong> Muhte\u015fem Cuma kampanyas\u0131 s\u0131ras\u0131nda <code>main.css<\/code> \u00fczerinde yap\u0131lan kampanya banner stilleri g\u00fcncellendi ancak <code>main-dark.css<\/code> unutuldu. Karanl\u0131k mod kullanan binlerce m\u00fc\u015fteri banner&#8217;lar\u0131 bozuk d\u00fczenle g\u00f6rd\u00fc.<\/li>\n<li><strong>Mobil A\u011f Performans\u0131 D\u00fc\u015f\u00fc\u015f\u00fc:<\/strong> T\u00fcrkiye&#8217;deki mobil kullan\u0131c\u0131lar\u0131n 4.5G ba\u011flant\u0131lar\u0131nda anl\u0131k gecikmeler ya\u015fand\u0131\u011f\u0131 i\u00e7in, temalar aras\u0131 ge\u00e7i\u015fte 1.5 saniyeye varan FOUC (Stilsiz \u0130\u00e7erik) durumlar\u0131 olu\u015ftu ve terk etme oran\u0131 (Bounce Rate) %12 artt\u0131.<\/li>\n<li><strong>CDN ve Bant Geni\u015fli\u011fi Maliyeti:<\/strong> Sunucular iki ayr\u0131 b\u00fcy\u00fck CSS dosyas\u0131n\u0131 s\u00fcrekli sunmaktan \u00f6t\u00fcr\u00fc ekstra y\u00fck alt\u0131na girdi.<\/li>\n<\/ol>\n<p>Yaz\u0131l\u0131m ekibi, projenin CSS mimarisini CSS De\u011fi\u015fkenleri y\u00f6ntemine d\u00f6n\u00fc\u015ft\u00fcrme karar\u0131 ald\u0131. Yap\u0131lan refakt\u00f6r (Kod iyile\u015ftirmesi) s\u00fcreci sonunda elde edilen veriler \u015fu \u015fekilde ger\u00e7ekle\u015fti:<\/p>\n<ul>\n<li>Toplam CSS dosya boyutu 140 KB + 145 KB = 285 KB iken, tek dosyada de\u011fi\u015fkenler kullan\u0131larak 152 KB seviyesine d\u00fc\u015f\u00fcr\u00fcld\u00fc (Yakla\u015f\u0131k %46 tasarruf).<\/li>\n<li>En B\u00fcy\u00fck \u0130\u00e7erikli Boyama (Largest Contentful Paint &#8211; LCP) metri\u011fi mobil cihazlarda 2.8 saniyeden 1.6 saniyeye geriledi.<\/li>\n<li>Aray\u00fcz geli\u015ftirme s\u00fcre\u00e7lerindeki bak\u0131m maliyeti ve hata bildirimleri (Bug report) %70 oran\u0131nda azald\u0131.<\/li>\n<\/ul>\n<h2>S\u00fcrd\u00fcr\u00fclebilir Kod Mimarisi \u0130\u00e7in Hangi Y\u00f6ntemler Tercih Edilmelidir?<\/h2>\n<p>Karanl\u0131k modu tek bir CSS dosyas\u0131nda y\u00f6netmek kadar, o dosyan\u0131n mimarisini s\u00fcrd\u00fcr\u00fclebilir k\u0131lmak da \u00f6nemlidir. B\u00fcy\u00fck \u00f6l\u00e7ekli projelerde (\u00d6rne\u011fin React, Vue, Angular veya Svelte gibi bile\u015fen tabanl\u0131 k\u00fct\u00fcphaneler kullan\u0131ld\u0131\u011f\u0131nda) CSS yap\u0131s\u0131n\u0131n \u00f6l\u00e7eklenebilir olmas\u0131 gerekir.<\/p>\n<p>S\u00fcrd\u00fcr\u00fclebilir bir mimari i\u00e7in \u015fu \u00f6nlemleri almal\u0131s\u0131n\u0131z:<\/p>\n<p>\u0130lk olarak, Tasar\u0131m Jetonlar\u0131 (Design Tokens) kavram\u0131n\u0131 benimseyin. Tasar\u0131mc\u0131lar\u0131n\u0131z\u0131n Figma veya Adobe XD \u00fczerinde belirledi\u011fi renk paletini, do\u011frudan CSS de\u011fi\u015fkenlerinize d\u00f6n\u00fc\u015ft\u00fcr\u00fcn. Bu d\u00f6n\u00fc\u015f\u00fcm i\u00e7in Amazon&#8217;un Style Dictionary gibi ara\u00e7lar\u0131ndan yararlanabilirsiniz.<\/p>\n<p>\u0130kinci olarak, Tailwind CSS gibi \u00f6nceden tan\u0131ml\u0131 s\u0131n\u0131f (Utility-first) yaz\u0131l\u0131m \u00e7er\u00e7eveleri kullan\u0131yorsan\u0131z, ekstra CSS dosyas\u0131 \u00fcretmek yerine Tailwind&#8217;in yerle\u015fik karanl\u0131k mod deste\u011fini kullan\u0131n. Tailwind, derleme a\u015famas\u0131nda (Build time) <code>dark:bg-gray-800<\/code> gibi s\u0131n\u0131flar\u0131 tek bir CSS dosyas\u0131nda toplar ve dosya boyutunu minimumda tutar.<\/p>\n<p>\u00dc\u00e7\u00fcnc\u00fc olarak, g\u00f6rsellerin ve simgelerin (Icons) karanl\u0131k mod uyumunu unutmay\u0131n. Karanl\u0131k modda g\u00f6z\u00fc alan en b\u00fcy\u00fck unsurlardan biri, \u00e7ok parlak beyaz arka plana sahip g\u00f6rsellerdir. CSS \u00fczerinden resimlere hafif bir parlakl\u0131k k\u0131s\u0131c\u0131 filtre uygulamak harika bir tekniktir:<\/p>\n<div class=\"code-container\">\n<pre><code>\/* Karanl\u0131k modda resimlerin parlamas\u0131n\u0131 engelleme *\/\n[data-theme=\"dark\"] img:not([src$=\".svg\"]) {\n  filter: brightness(0.85) contrast(1.1);\n}<\/code><\/pre>\n<\/div>\n<h2>Karanl\u0131k Mod Uygularken S\u0131k Yap\u0131lan Hatalar ve \u00c7\u00f6z\u00fcm Yollar\u0131 Nelerdir?<\/h2>\n<p>Tek bir CSS dosyas\u0131 kullan\u0131m\u0131na ge\u00e7ilmi\u015f olsa bile, tasar\u0131m ve kodlama a\u015famas\u0131nda d\u00fc\u015f\u00fclen baz\u0131 tipik tuzaklar vard\u0131r. Bu hatalardan ka\u00e7\u0131nmak, \u00fcr\u00fcn\u00fcn\u00fcz\u00fcn kalitesini do\u011frudan art\u0131racakt\u0131r.<\/p>\n<p>En s\u0131k yap\u0131lan hatalar ve \u00e7\u00f6z\u00fcmleri:<\/p>\n<p><strong>1. Saf Siyah (#000000) Kullan\u0131m\u0131:<\/strong> Karanl\u0131k mod arka plan\u0131nda do\u011frudan tam siyah kullanmak, y\u00fcksek kontrast nedeniyle g\u00f6z\u00fc yorar ve metinlerin etraf\u0131nda bir halo (I\u015f\u0131k h\u00fczmesi) etkisi yarat\u0131r. Bunun yerine, Google Material Design standartlar\u0131nda da \u00f6nerilen koyu gri tonlar\u0131 (\u00d6rne\u011fin <code>#121212<\/code> veya <code>#1e1e1e<\/code>) tercih edilmelidir.<\/p>\n<p><strong>2. Yetersiz Kontrast Oran\u0131:<\/strong> Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri (WCAG), metin ile arka plan aras\u0131nda en az 4.5:1 kontrast oran\u0131 \u015fart ko\u015far. Karanl\u0131k modda metin renklerini \u00e7ok fazla grile\u015ftirmek okunabilirli\u011fi yok eder.<\/p>\n<p><strong>3. JavaScript \u0130\u00e7inde Renk Tan\u0131mlamak:<\/strong> Grafik veya harita k\u00fct\u00fcphaneleri (Chart.js, Leaflet vb.) kullan\u0131rken renkleri JavaScript kodu i\u00e7erisine sabit (Hardcoded) yazmak b\u00fcy\u00fck bir hatad\u0131r. Bunun yerine, JavaScript taraf\u0131nda <code>getComputedStyle(document.documentElement).getPropertyValue('--accent-color')<\/code> y\u00f6ntemini kullanarak renkleri yine CSS de\u011fi\u015fkenlerinden \u00e7ekmelisiniz.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Karanl\u0131k mod uygulamalar\u0131nda ikinci bir CSS dosyas\u0131 olu\u015fturmak, ge\u00e7mi\u015fin teknik yetersizliklerinden do\u011fmu\u015f ve g\u00fcn\u00fcm\u00fczde ge\u00e7erlili\u011fini tamamen yitirmi\u015f bir y\u00f6ntemdir. A\u011f performans\u0131n\u0131 d\u00fc\u015f\u00fcren, kod tekrar\u0131na yol a\u00e7an ve bak\u0131m s\u00fcre\u00e7lerini zorla\u015ft\u0131ran bu yakla\u015f\u0131m yerine; CSS De\u011fi\u015fkenleri (Custom Properties) ve anlamsal renk mimarisi tercih edilmelidir.<\/p>\n<p>Tek bir CSS dosyas\u0131 \u00fczerinden y\u00f6netilen hibrit bir tema sistemi, sitenizin Google Lighthouse ve Core Web Vitals skorlar\u0131n\u0131 y\u00fckseltirken, kullan\u0131c\u0131lar\u0131n\u0131za h\u0131zl\u0131, p\u00fcr\u00fczs\u00fcz ve tutarl\u0131 bir deneyim sunar. Geli\u015ftirici ekibiniz ise kod tekrar\u0131ndan kurtularak yeni \u00f6zellikler geli\u015ftirmeye odaklanabilir.<\/p>\n<h2>S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<h3>Karanl\u0131k mod i\u00e7in CSS de\u011fi\u015fkenleri t\u00fcm modern taray\u0131c\u0131lar taraf\u0131ndan destekleniyor mu?<\/h3>\n<p>Evet, CSS De\u011fi\u015fkenleri (Custom Properties) g\u00fcn\u00fcm\u00fczde Chrome, Firefox, Safari, Edge ve t\u00fcm mobil taray\u0131c\u0131lar dahil olmak \u00fczere global taray\u0131c\u0131 pazar\u0131n\u0131n %98&#8217;inden fazlas\u0131 taraf\u0131ndan tam desteklenmektedir.<\/p>\n<h3>\u0130kinci bir CSS dosyas\u0131 y\u00fcklemek yerine tek dosya kullanmak dosya boyutunu \u00e7ok b\u00fcy\u00fct\u00fcr m\u00fc?<\/h3>\n<p>Hay\u0131r, b\u00fcy\u00fctmez. Tek bir CSS dosyas\u0131nda sadece de\u011fi\u015fkenlerin de\u011ferleri de\u011fi\u015ftirildi\u011fi i\u00e7in eklenen kod miktar\u0131 sadece birka\u00e7 sat\u0131rl\u0131k renk tan\u0131mlar\u0131ndan ibarettir. \u0130ki ayr\u0131 dosya tuttu\u011funuzda ise t\u00fcm se\u00e7iciler ve d\u00fczen stilleri iki kez tekrarlanaca\u011f\u0131 i\u00e7in toplam boyut neredeyse iki kat\u0131na \u00e7\u0131kar.<\/p>\n<h3>Sayfa ilk a\u00e7\u0131ld\u0131\u011f\u0131nda karanl\u0131k modun anl\u0131k beyaz ekran vermesini (FOUC) nas\u0131l engelleyebilirim?<\/h3>\n<p>Kullan\u0131c\u0131n\u0131n tema tercihini <code>localStorage<\/code> \u00fczerinden okuyan \u00e7ok k\u00fc\u00e7\u00fck, engellemesiz (Non-blocking) bir JavaScript kod par\u00e7ac\u0131\u011f\u0131n\u0131 (Script) HTML belgenizin <code>&lt;head&gt;<\/code> b\u00f6l\u00fcm\u00fcn\u00fcn en \u00fcst\u00fcne ekleyerek, body hen\u00fcz \u00e7izilmeden <code>data-theme<\/code> \u00f6zniteli\u011fini ekleyebilirsiniz.<\/p>\n<h3>Tailwind CSS kullan\u0131rken de iki ayr\u0131 CSS dosyas\u0131 olu\u015fturmaktan ka\u00e7\u0131nmal\u0131 m\u0131y\u0131m?<\/h3>\n<p>Kesinlikle evet. Tailwind CSS zaten yap\u0131s\u0131 gere\u011fi <code>darkMode: 'class'<\/code> veya <code>darkMode: 'media'<\/code> ayar\u0131 ile t\u00fcm stilleri tek bir derlenmi\u015f CSS dosyas\u0131nda toplar. Ekstra bir yap\u0131land\u0131rmaya veya ikinci bir CSS \u00e7\u0131kt\u0131s\u0131 almaya ihtiya\u00e7 yoktur.<\/p>\n<p>#Karanl\u0131kMod #CSS #WebGeli\u015ftirme #Frontend #WebPerformans<\/p>\n<div class=\"github-example-link\"><strong>\u00d6rnek kod:<\/strong> <a href=\"https:\/\/github.com\/fatihsoysalcom\/single-css-dark-mode\" target=\"_blank\" rel=\"noopener noreferrer\">github.com\/fatihsoysalcom\/single-css-dark-mode<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"Karanl\u0131k mod mimarisinde iki farkl\u0131 CSS dosyas\u0131 kullanmak performans kay\u0131plar\u0131na ve bak\u0131m zorluklar\u0131na yol a\u00e7ar. Modern CSS y\u00f6ntemleriyle ideal \u00e7\u00f6z\u00fcm\u00fc ke\u015ffedin.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-43564","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131?\" \/>\n<meta property=\"og:description\" content=\"Karanl\u0131k mod mimarisinde iki farkl\u0131 CSS dosyas\u0131 kullanmak performans kay\u0131plar\u0131na ve bak\u0131m zorluklar\u0131na yol a\u00e7ar. Modern CSS y\u00f6ntemleriyle ideal \u00e7\u00f6z\u00fcm\u00fc ke\u015ffedin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-23T18:03:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-23T18:03:41+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131?\",\"datePublished\":\"2026-07-23T18:03:23+00:00\",\"dateModified\":\"2026-07-23T18:03:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/\"},\"wordCount\":2450,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/\",\"name\":\"Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-07-23T18:03:23+00:00\",\"dateModified\":\"2026-07-23T18:03:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/","og_locale":"tr_TR","og_type":"article","og_title":"Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131?","og_description":"Karanl\u0131k mod mimarisinde iki farkl\u0131 CSS dosyas\u0131 kullanmak performans kay\u0131plar\u0131na ve bak\u0131m zorluklar\u0131na yol a\u00e7ar. Modern CSS y\u00f6ntemleriyle ideal \u00e7\u00f6z\u00fcm\u00fc ke\u015ffedin.","og_url":"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-07-23T18:03:23+00:00","article_modified_time":"2026-07-23T18:03:41+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"13 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131?","datePublished":"2026-07-23T18:03:23+00:00","dateModified":"2026-07-23T18:03:41+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/"},"wordCount":2450,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/","url":"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/","name":"Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-07-23T18:03:23+00:00","dateModified":"2026-07-23T18:03:41+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/karanlik-mod-neden-ikinci-bir-css-dosyasi-olmamali\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Karanl\u0131k Mod Neden \u0130kinci Bir CSS Dosyas\u0131 Olmamal\u0131?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=43564"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43564\/revisions"}],"predecessor-version":[{"id":43565,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43564\/revisions\/43565"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=43564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=43564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=43564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}