{"id":28021,"date":"2025-08-22T06:00:25","date_gmt":"2025-08-22T03:00:25","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/"},"modified":"2025-08-22T06:00:25","modified_gmt":"2025-08-22T03:00:25","slug":"github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/","title":{"rendered":"GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?"},"content":{"rendered":"

GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?<\/p>\n

GitHub'\u0131n artan pop\u00fclaritesiyle birlikte, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in g\u00f6rsel \u00f6zelle\u015ftirme ihtiyac\u0131 da art\u0131yor. Bu makalede, GitHub'\u0131n a\u00e7\u0131k ve koyu modlar\u0131nda farkl\u0131 g\u00f6rselleri sorunsuz bir \u015fekilde nas\u0131l g\u00f6r\u00fcnt\u00fcleyece\u011finizi ad\u0131m ad\u0131m, yeni ba\u015flayanlardan ileri seviye kullan\u0131c\u0131lara kadar kapsaml\u0131 bir \u015fekilde ele alaca\u011f\u0131z. GitHub'\u0131n\u0131zda daha \u015f\u0131k ve \u00f6zelle\u015ftirilmi\u015f bir g\u00f6r\u00fcn\u00fcm i\u00e7in bu rehber tam size g\u00f6re!<\/p>\n

Temel Kavramlar: GitHub Temalar\u0131 ve CSS<\/h2>\n

\u00d6ncelikle, GitHub'\u0131n tema sistemini ve CSS'in (Cascading Style Sheets) temel i\u015flevlerini anlamak \u00f6nemlidir. GitHub, varsay\u0131lan olarak a\u00e7\u0131k bir tema kullan\u0131r. Ancak kullan\u0131c\u0131lar, taray\u0131c\u0131 ayarlar\u0131ndan veya \u00f6zel eklentiler kullanarak koyu temaya ge\u00e7ebilirler. Bizim amac\u0131m\u0131z, bu tema de\u011fi\u015fikliklerine g\u00f6re farkl\u0131 g\u00f6rselleri dinamik olarak y\u00fcklemektir. Bunu ba\u015farmak i\u00e7in CSS'in media query<\/code> \u00f6zelli\u011fini kullanaca\u011f\u0131z. media query<\/code>, farkl\u0131 ekran boyutlar\u0131 veya cihaz \u00f6zelliklerine g\u00f6re stil uygulamak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Biz ise, bunu tema (light\/dark) tespiti i\u00e7in kullanaca\u011f\u0131z.<\/p>\n

K\u0131saca, CSS kodlar\u0131 yazaca\u011f\u0131z ve bu kodlar taray\u0131c\u0131n\u0131n tema ayarlar\u0131na g\u00f6re farkl\u0131 stiller uygulayacak. Bu stiller aras\u0131nda, en \u00f6nemlisi, farkl\u0131 g\u00f6rselleri g\u00f6stermek i\u00e7in background-image<\/code> \u00f6zelli\u011fini kullanaca\u011f\u0131z. \u0130leri d\u00fczeyde, JavaScript ile daha dinamik \u00e7\u00f6z\u00fcmler \u00fcretebiliriz ancak bu makalede \u00f6ncelikle CSS tabanl\u0131 bir yakla\u015f\u0131m\u0131 ele alaca\u011f\u0131z. Daha fazla CSS \u00f6\u011frenmek i\u00e7in (https:\/\/fatihsoysal.com)<\/a> sitesindeki kaynaklar\u0131 inceleyebilirsiniz.<\/p>\n

\u00d6rne\u011fin, koyu modda daha a\u00e7\u0131k renkli bir logo, a\u00e7\u0131k modda ise daha koyu renkli bir logo kullanmak isteyebilirsiniz. Bu, hem g\u00f6rsel uyumu sa\u011flar hem de kullan\u0131c\u0131 deneyimini geli\u015ftirir. Uygun g\u00f6rsel se\u00e7imi, web sitenizin genel esteti\u011fine ve kullan\u0131c\u0131 dostu olmas\u0131na \u00f6nemli \u00f6l\u00e7\u00fcde katk\u0131da bulunur.<\/p>\n

GitHub \u0130\u00e7in Light\/Dark Mod Tespitini Yapmak<\/h2>\n

GitHub'\u0131n kendi i\u00e7inde light\/dark modunu alg\u0131lamak i\u00e7in do\u011frudan bir API sunmuyor. Bu nedenle, light\/dark modu tespit etmek i\u00e7in dolayl\u0131 y\u00f6ntemler kullanmal\u0131y\u0131z. En yayg\u0131n y\u00f6ntem, prefers-color-scheme<\/code> media query'sini kullanmakt\u0131r. Bu media query, kullan\u0131c\u0131n\u0131n i\u015fletim sisteminde tercih etti\u011fi renk \u015femas\u0131n\u0131 (light veya dark) alg\u0131lar. Ancak bu y\u00f6ntem her zaman g\u00fcvenilir olmayabilir, \u00e7\u00fcnk\u00fc kullan\u0131c\u0131n\u0131n taray\u0131c\u0131 ayarlar\u0131nda bu se\u00e7ene\u011fi devre d\u0131\u015f\u0131 b\u0131rakm\u0131\u015f olmas\u0131 ihtimalini de g\u00f6z \u00f6n\u00fcnde bulundurmal\u0131y\u0131z.<\/p>\n

Daha g\u00fcvenilir bir yakla\u015f\u0131m, kullan\u0131c\u0131ya sunulan \u00f6zel bir tema se\u00e7ene\u011fi eklemek olabilir. Bu se\u00e7enek arac\u0131l\u0131\u011f\u0131yla, kullan\u0131c\u0131 a\u00e7\u0131k veya koyu tema aras\u0131nda se\u00e7im yapabilir ve bu se\u00e7im bir cookie veya local storage'da saklanabilir. Daha sonra JavaScript kullanarak bu saklanan de\u011feri okuyup, g\u00f6rselleri dinamik olarak y\u00fckleyebilirsiniz. Bu yakla\u015f\u0131m daha karma\u015f\u0131kt\u0131r ancak daha kontroll\u00fc bir deneyim sa\u011flar.<\/p>\n

\u00d6rnek bir CSS kodu a\u015fa\u011f\u0131daki gibidir:<\/p>\n

<\/code><\/p>\n

css\n@media (prefers-color-scheme: dark) {\n  .my-image {\n    background-image: url('dark-mode-image.jpg');\n  }\n}\n\n@media (prefers-color-scheme: light) {\n  .my-image {\n    background-image: url('light-mode-image.jpg');\n  }\n}<\/pre>\n
<\/code><\/p>\n
Bu kodda, .my-image<\/code> s\u0131n\u0131f\u0131na sahip eleman\u0131n arka plan resmi, kullan\u0131c\u0131n\u0131n tema tercihine g\u00f6re de\u011fi\u015fir.  dark-mode-image.jpg<\/code> koyu tema i\u00e7in, light-mode-image.jpg<\/code> ise a\u00e7\u0131k tema i\u00e7in kullan\u0131lacak g\u00f6rseli temsil eder.  Bu kodu GitHub'da \u00f6zelle\u015ftirme se\u00e7eneklerinde CSS dosyas\u0131na ekleyebilirsiniz.<\/p>\n
\u00d6\u011frenme Yol Haritas\u0131<\/h2>\n
[Yeni Ba\u015flayan] CSS Temelleri ve Media Queries<\/h3>\n
Yeni ba\u015flayanlar i\u00e7in \u00f6ncelikle CSS'in temel kavramlar\u0131n\u0131 \u00f6\u011frenmeleri ve media query<\/code> kullan\u0131m\u0131n\u0131 anlamalar\u0131 \u00f6nemlidir.  \u00c7evrimi\u00e7i bir\u00e7ok \u00fccretsiz kaynak bulunmaktad\u0131r.  \u00d6rne\u011fin, W3Schools sitesi iyi bir ba\u015flang\u0131\u00e7 noktas\u0131 olabilir.  Temel CSS syntax'\u0131n\u0131, selekt\u00f6rleri ve media query<\/code>'nin farkl\u0131 kullan\u0131m senaryolar\u0131n\u0131 \u00f6\u011frenerek ba\u015flayabilirsiniz.  Ard\u0131ndan, basit bir HTML dosyas\u0131 olu\u015fturarak, media query<\/code> kullanarak farkl\u0131 ekran boyutlar\u0131nda farkl\u0131 stiller uygulamay\u0131 deneyebilirsiniz. Bu, media query<\/code>'nin mant\u0131\u011f\u0131n\u0131 anlaman\u0131z i\u00e7in iyi bir pratik olacakt\u0131r.<\/p>\n
[Orta] GitHub \u00d6zelle\u015ftirme Se\u00e7enekleri ve Uygulama<\/h3>\n
Orta seviye kullan\u0131c\u0131lar i\u00e7in, GitHub'\u0131n \u00f6zelle\u015ftirme se\u00e7eneklerini ara\u015ft\u0131rmak ve yukar\u0131daki CSS kodunu GitHub profil sayfan\u0131za veya ki\u015fiselle\u015ftirdi\u011finiz bir repo'ya entegre etmek \u00f6nemlidir.  GitHub'\u0131n kullan\u0131c\u0131 stil sayfas\u0131 \u00f6zelli\u011fini kullanarak kendi CSS kodunuzu ekleyebilir ve test edebilirsiniz.  Bu a\u015famada, farkl\u0131 g\u00f6rselleri kullanarak \u00e7e\u015fitli denemeler yapabilir ve farkl\u0131 media query<\/code> kombinasyonlar\u0131n\u0131 deneyebilirsiniz.  \u00d6nemli olan, kodunuzu d\u00fczenli ve okunabilir tutmakt\u0131r.  Hatalar\u0131 gidermek i\u00e7in taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131n\u0131 kullanmay\u0131 \u00f6\u011frenin.<\/p>\n
[\u0130leri D\u00fczey] JavaScript ile Dinamik G\u00f6rsel Y\u00fckleyici<\/h3>\n
\u0130leri d\u00fczey kullan\u0131c\u0131lar, JavaScript kullanarak daha dinamik bir \u00e7\u00f6z\u00fcm geli\u015ftirebilirler.  Bu, prefers-color-scheme<\/code>'e ek olarak, local storage veya cookie'ler kullanarak kullan\u0131c\u0131n\u0131n tema tercihlerini daha g\u00fcvenilir bir \u015fekilde saklamay\u0131 ve bu tercihlere g\u00f6re g\u00f6rselleri dinamik olarak y\u00fcklemeyi sa\u011flar.  JavaScript ile DOM manip\u00fclasyonu bilgisine sahip olman\u0131z gerekecektir. Bu yakla\u015f\u0131m, daha kontroll\u00fc ve \u00f6zelle\u015ftirilebilir bir \u00e7\u00f6z\u00fcm sunar, ancak daha karma\u015f\u0131k kod gerektirir.  Performans optimizasyonuna dikkat etmek, \u00f6zellikle \u00e7ok say\u0131da g\u00f6rsel kullan\u0131yorsan\u0131z, \u00f6nemlidir. Bu konuda daha fazla bilgi i\u00e7in (https:\/\/fatihsoysal.com)<\/a> adresindeki geli\u015fmi\u015f JavaScript kaynaklar\u0131n\u0131 inceleyebilirsiniz.<\/p>\n
Vaka Analizi: Ki\u015fisel Portf\u00f6y Sitesi<\/h2>\n
Bir web geli\u015ftiricisinin ki\u015fisel portf\u00f6y sitesini ele alal\u0131m.  Bu sitede, koyu tema i\u00e7in daha koyu renklerde bir arka plan ve logo, a\u00e7\u0131k tema i\u00e7inse daha a\u00e7\u0131k renklerde bir arka plan ve logo kullanmak isteyebiliriz.  Bu, sitenin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc kullan\u0131c\u0131n\u0131n tema tercihine g\u00f6re \u00f6zelle\u015ftirerek daha iyi bir kullan\u0131c\u0131 deneyimi sa\u011flar.  CSS media query<\/code>'leri kullanarak, farkl\u0131 temalara uygun g\u00f6rselleri kolayca de\u011fi\u015ftirebiliriz.  Ayr\u0131ca, JavaScript kullanarak daha da geli\u015fmi\u015f \u00f6zelle\u015ftirmeler yapabiliriz, \u00f6rne\u011fin, buton renklerini veya yaz\u0131 tiplerini temaya g\u00f6re otomatik olarak de\u011fi\u015ftirebiliriz.<\/p>\n
Performans Kar\u015f\u0131la\u015ft\u0131rmalar\u0131<\/h2>\n
Farkl\u0131 y\u00f6ntemlerin performans kar\u015f\u0131la\u015ft\u0131rmas\u0131n\u0131 a\u015fa\u011f\u0131daki tabloda g\u00f6rebilirsiniz:<\/p>\n\n\n\n\n\n
Y\u00f6ntem<\/th>\nPerformans<\/th>\nKarma\u015f\u0131kl\u0131k<\/th>\n<\/tr>\n
Sadece CSS (media query<\/code>)<\/td>\nY\u00fcksek<\/td>\nD\u00fc\u015f\u00fck<\/td>\n<\/tr>\n
JavaScript ile Dinamik Y\u00fckleyici<\/td>\nOrta<\/td>\nOrta<\/td>\n<\/tr>\n
\u00d6zel \u00e7\u00f6z\u00fcmler (sunucu tarafl\u0131 rendering vb.)<\/td>\nD\u00fc\u015f\u00fck<\/td>\nY\u00fcksek<\/td>\n<\/tr>\n<\/table>\n
Tablodan da g\u00f6r\u00fclece\u011fi gibi, sadece CSS kullan\u0131m\u0131 en y\u00fcksek performans\u0131 sunar, ancak \u00f6zelle\u015ftirme se\u00e7enekleri s\u0131n\u0131rl\u0131d\u0131r. JavaScript kullan\u0131m\u0131 daha esnektir, ancak performans a\u00e7\u0131s\u0131ndan baz\u0131 kay\u0131plar ya\u015fanabilir. \u00d6zel \u00e7\u00f6z\u00fcmler ise y\u00fcksek performans sunabilir ancak \u00e7ok daha karma\u015f\u0131kt\u0131r.<\/p>\n
G\u00fcvenlik Uyar\u0131lar\u0131<\/h2>\n
\n
Dikkat!<\/strong> G\u00f6rselleri sunucu taraf\u0131nda (\u00f6rne\u011fin, bir API kullanarak) dinamik olarak \u00fcretmek, g\u00fcvenlik a\u00e7\u0131s\u0131ndan daha g\u00fcvenlidir.  Direkt olarak kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131na y\u00fcklemek, k\u00f6t\u00fc ama\u00e7l\u0131 kodlar\u0131n eklenmesi riskini art\u0131rabilir.  Her zaman g\u00fcvenilir kaynaklardan g\u00f6rseller kullan\u0131n ve kodunuzu d\u00fczenli olarak g\u00fcncelleyin.<\/p>\n<\/div>\n
Sonu\u00e7<\/h2>\n
Bu makalede, GitHub light ve dark modlar\u0131nda farkl\u0131 g\u00f6rselleri g\u00f6stermenin farkl\u0131 y\u00f6ntemlerini inceledik.  CSS media query<\/code>'leri kullanarak basit bir \u00e7\u00f6z\u00fcm olu\u015fturabilir veya JavaScript kullanarak daha dinamik bir yakla\u015f\u0131m benimseyebilirsiniz. Her iki y\u00f6ntemin de avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r, bu y\u00fczden projenizin ihtiya\u00e7lar\u0131na en uygun olan\u0131 se\u00e7meniz \u00f6nemlidir.  Do\u011fru g\u00f6rsel se\u00e7imi ve uygun bir yakla\u015f\u0131m se\u00e7imi, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
    \n
  • Soru 1:<\/strong>  prefers-color-scheme<\/code> her zaman g\u00fcvenilir mi? 
     Cevap 1:<\/strong> Hay\u0131r, her zaman g\u00fcvenilir de\u011fildir. Kullan\u0131c\u0131 taray\u0131c\u0131 ayarlar\u0131nda bu \u00f6zelli\u011fi devre d\u0131\u015f\u0131 b\u0131rakm\u0131\u015f olabilir.<\/li>\n
  • Soru 2:<\/strong>  JavaScript kullanman\u0131n performans etkisi nedir? 
     Cevap 2:<\/strong> Performans etkisi, kullan\u0131lan kodun karma\u015f\u0131kl\u0131\u011f\u0131na ve optimizasyon seviyesine ba\u011fl\u0131d\u0131r.  \u00c7ok fazla g\u00f6rsel veya karma\u015f\u0131k i\u015flemler kullan\u0131l\u0131rsa, performans d\u00fc\u015f\u00fc\u015f\u00fc ya\u015fanabilir.<\/li>\n
  • Soru 3:<\/strong>  G\u00f6rselleri nerede saklamal\u0131y\u0131m? 
     Cevap 3:<\/strong> G\u00f6rsellerinizi GitHub'\u0131n depolama alan\u0131nda veya bir CDN (Content Delivery Network) hizmeti kullanarak saklayabilirsiniz.<\/li>\n
  • Soru 4:<\/strong>  Resimlerin boyutlar\u0131n\u0131 nas\u0131l optimize edebilirim? 
     Cevap 4:<\/strong> Resimlerin boyutlar\u0131n\u0131 optimize etmek i\u00e7in \u00e7e\u015fitli ara\u00e7lar ve teknikler mevcuttur. \u00d6rne\u011fin, s\u0131k\u0131\u015ft\u0131rma ara\u00e7lar\u0131 kullanabilir veya resmin boyutunu hedeflenen boyuta indirgeyebilirsiniz.<\/li>\n
  • Soru 5:<\/strong>  Hangi y\u00f6ntemi tercih etmeliyim? 
     Cevap 5:<\/strong> Basit projeler i\u00e7in CSS media query<\/code> yeterli olabilir. Daha karma\u015f\u0131k projeler veya y\u00fcksek \u00f6zelle\u015ftirme gerektiren durumlar i\u00e7in JavaScript kullan\u0131m\u0131 daha uygun olabilir.<\/li>\n<\/ul>\n
    Yazar: Fatih Soysal<\/p>\n
    <\/code><\/p>\n","protected":false},"excerpt":{"rendered":"GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir? GitHub'\u0131n artan pop\u00fclaritesiyle birlikte, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in g\u00f6rsel…","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":[1],"tags":[],"class_list":{"0":"post-28021","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nGitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?<\/title>\n<meta name=\"description\" content=\"GitHub'\u0131n artan pop\u00fclaritesiyle birlikte, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in g\u00f6rsel \u00f6zelle\u015ftirme ihtiyac\u0131 da art\u0131yor. Bu makalede, GitHub'\u0131n a\u00e7\u0131k ve koyu modlar\u0131nda farkl\u0131 g\u00f6rselleri sorunsuz bir \u015fekilde nas\u0131l g\u00f6r\u00fcnt\u00fcleyece\u011finizi ad\u0131m ad\u0131m, yeni ba\u015flayanlardan ileri seviye kullan\u0131c\u0131lara kadar kapsaml\u0131 bir \u015fekilde ele alaca\u011f\u0131z. GitHub'\u0131n\u0131zda daha \u015f\u0131k ve \u00f6zelle\u015ftirilmi\u015f bir g\u00f6r\u00fcn\u00fcm i\u00e7in bu rehber tam size g\u00f6re!\" \/>\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\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?\" \/>\n<meta property=\"og:description\" content=\"GitHub'\u0131n artan pop\u00fclaritesiyle birlikte, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in g\u00f6rsel \u00f6zelle\u015ftirme ihtiyac\u0131 da art\u0131yor. Bu makalede, GitHub'\u0131n a\u00e7\u0131k ve koyu modlar\u0131nda farkl\u0131 g\u00f6rselleri sorunsuz bir \u015fekilde nas\u0131l g\u00f6r\u00fcnt\u00fcleyece\u011finizi ad\u0131m ad\u0131m, yeni ba\u015flayanlardan ileri seviye kullan\u0131c\u0131lara kadar kapsaml\u0131 bir \u015fekilde ele alaca\u011f\u0131z. GitHub'\u0131n\u0131zda daha \u015f\u0131k ve \u00f6zelle\u015ftirilmi\u015f bir g\u00f6r\u00fcn\u00fcm i\u00e7in bu rehber tam size g\u00f6re!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-22T03:00:25+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=\"7 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?\",\"datePublished\":\"2025-08-22T03:00:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/\"},\"wordCount\":1434,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/\",\"name\":\"GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-08-22T03:00:25+00:00\",\"description\":\"GitHub'\u0131n artan pop\u00fclaritesiyle birlikte, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in g\u00f6rsel \u00f6zelle\u015ftirme ihtiyac\u0131 da art\u0131yor. Bu makalede, GitHub'\u0131n a\u00e7\u0131k ve koyu modlar\u0131nda farkl\u0131 g\u00f6rselleri sorunsuz bir \u015fekilde nas\u0131l g\u00f6r\u00fcnt\u00fcleyece\u011finizi ad\u0131m ad\u0131m, yeni ba\u015flayanlardan ileri seviye kullan\u0131c\u0131lara kadar kapsaml\u0131 bir \u015fekilde ele alaca\u011f\u0131z. GitHub'\u0131n\u0131zda daha \u015f\u0131k ve \u00f6zelle\u015ftirilmi\u015f bir g\u00f6r\u00fcn\u00fcm i\u00e7in bu rehber tam size g\u00f6re!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?\"}]},{\"@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":"GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?","description":"GitHub'\u0131n artan pop\u00fclaritesiyle birlikte, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in g\u00f6rsel \u00f6zelle\u015ftirme ihtiyac\u0131 da art\u0131yor. Bu makalede, GitHub'\u0131n a\u00e7\u0131k ve koyu modlar\u0131nda farkl\u0131 g\u00f6rselleri sorunsuz bir \u015fekilde nas\u0131l g\u00f6r\u00fcnt\u00fcleyece\u011finizi ad\u0131m ad\u0131m, yeni ba\u015flayanlardan ileri seviye kullan\u0131c\u0131lara kadar kapsaml\u0131 bir \u015fekilde ele alaca\u011f\u0131z. GitHub'\u0131n\u0131zda daha \u015f\u0131k ve \u00f6zelle\u015ftirilmi\u015f bir g\u00f6r\u00fcn\u00fcm i\u00e7in bu rehber tam size g\u00f6re!","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\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/","og_locale":"tr_TR","og_type":"article","og_title":"GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?","og_description":"GitHub'\u0131n artan pop\u00fclaritesiyle birlikte, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in g\u00f6rsel \u00f6zelle\u015ftirme ihtiyac\u0131 da art\u0131yor. Bu makalede, GitHub'\u0131n a\u00e7\u0131k ve koyu modlar\u0131nda farkl\u0131 g\u00f6rselleri sorunsuz bir \u015fekilde nas\u0131l g\u00f6r\u00fcnt\u00fcleyece\u011finizi ad\u0131m ad\u0131m, yeni ba\u015flayanlardan ileri seviye kullan\u0131c\u0131lara kadar kapsaml\u0131 bir \u015fekilde ele alaca\u011f\u0131z. GitHub'\u0131n\u0131zda daha \u015f\u0131k ve \u00f6zelle\u015ftirilmi\u015f bir g\u00f6r\u00fcn\u00fcm i\u00e7in bu rehber tam size g\u00f6re!","og_url":"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-08-22T03:00:25+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"7 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?","datePublished":"2025-08-22T03:00:25+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/"},"wordCount":1434,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/","url":"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/","name":"GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-08-22T03:00:25+00:00","description":"GitHub'\u0131n artan pop\u00fclaritesiyle birlikte, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in g\u00f6rsel \u00f6zelle\u015ftirme ihtiyac\u0131 da art\u0131yor. Bu makalede, GitHub'\u0131n a\u00e7\u0131k ve koyu modlar\u0131nda farkl\u0131 g\u00f6rselleri sorunsuz bir \u015fekilde nas\u0131l g\u00f6r\u00fcnt\u00fcleyece\u011finizi ad\u0131m ad\u0131m, yeni ba\u015flayanlardan ileri seviye kullan\u0131c\u0131lara kadar kapsaml\u0131 bir \u015fekilde ele alaca\u011f\u0131z. GitHub'\u0131n\u0131zda daha \u015f\u0131k ve \u00f6zelle\u015ftirilmi\u015f bir g\u00f6r\u00fcn\u00fcm i\u00e7in bu rehber tam size g\u00f6re!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/github-light-ve-dark-modlarinda-farkli-gorseller-nasil-gosterilir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"GitHub Light ve Dark Modlar\u0131nda Farkl\u0131 G\u00f6rseller Nas\u0131l G\u00f6sterilir?"}]},{"@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\/28021","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=28021"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/28021\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=28021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=28021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=28021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}