{"id":38270,"date":"2026-01-27T12:30:40","date_gmt":"2026-01-27T09:30:40","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/"},"modified":"2026-01-27T12:30:40","modified_gmt":"2026-01-27T09:30:40","slug":"docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/","title":{"rendered":"Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler"},"content":{"rendered":"<h2>Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler<\/h2>\n<p>Modern web uygulamalar\u0131 ve dok\u00fcmantasyon platformlar\u0131, kullan\u0131c\u0131 deneyimini art\u0131rmak amac\u0131yla karanl\u0131k mod (dark mode) deste\u011fi sunmaktad\u0131r. Docusaurus gibi g\u00fc\u00e7l\u00fc bir statik site olu\u015fturucu ile haz\u0131rlanan belgelerde de karanl\u0131k mod yayg\u0131n olarak kullan\u0131l\u0131r. Ancak, bu belgelerde yer alan ekran g\u00f6r\u00fcnt\u00fcleri genellikle statik olup, kullan\u0131c\u0131n\u0131n se\u00e7ti\u011fi temaya (a\u00e7\u0131k veya karanl\u0131k) otomatik olarak uyum sa\u011flamaz. Bu durum, \u00f6zellikle karanl\u0131k mod kullan\u0131c\u0131lar\u0131 i\u00e7in tutars\u0131z bir g\u00f6rsel deneyime yol a\u00e7ar ve dok\u00fcmantasyonun g\u00fcncelli\u011fini sorgulat\u0131r. Bu makalede, Docusaurus projelerinizde ger\u00e7ekten tema ge\u00e7i\u015fine duyarl\u0131, dinamik ekran g\u00f6r\u00fcnt\u00fcleri olu\u015fturman\u0131n teknik detaylar\u0131n\u0131 ve pratik uygulamalar\u0131n\u0131 ele alaca\u011f\u0131z.<\/p>\n<h3>Problem Tan\u0131m\u0131 ve Neden \u00d6nemli<\/h3>\n<p>Docusaurus, belgelerinizi h\u0131zl\u0131 ve etkili bir \u015fekilde olu\u015fturman\u0131z\u0131 sa\u011flayan harika bir ara\u00e7t\u0131r. Varsay\u0131lan olarak a\u00e7\u0131k ve karanl\u0131k mod deste\u011fi sunar, ancak bu destek genellikle metin ve aray\u00fcz elemanlar\u0131yla s\u0131n\u0131rl\u0131d\u0131r. Ekran g\u00f6r\u00fcnt\u00fcleri ise genellikle JPEG veya PNG gibi statik formatlarda belgeye g\u00f6m\u00fcl\u00fcr ve kullan\u0131c\u0131n\u0131n tema tercihinden ba\u011f\u0131ms\u0131z olarak ayn\u0131 kal\u0131r. Bu durum, kullan\u0131c\u0131 deneyimini olumsuz etkileyen \u00e7e\u015fitli sorunlara yol a\u00e7ar.<\/p>\n<h4>Kullan\u0131c\u0131 Deneyimi ve Tutarl\u0131l\u0131k Sorunlar\u0131<\/h4>\n<p>Bir kullan\u0131c\u0131 karanl\u0131k modda bir belgeyi okurken, birdenbire parlak bir ekran g\u00f6r\u00fcnt\u00fcs\u00fcyle kar\u015f\u0131la\u015fmas\u0131 g\u00f6z yorgunlu\u011funa neden olabilir ve genel okuma ak\u0131\u015f\u0131n\u0131 bozabilir. Bu, dok\u00fcmantasyonun genel esteti\u011fi ve tutarl\u0131l\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan da bir problem yarat\u0131r. Kullan\u0131c\u0131lar, kulland\u0131klar\u0131 uygulaman\u0131n veya okuduklar\u0131 belgenin her y\u00f6n\u00fcyle se\u00e7tikleri temaya uygun olmas\u0131n\u0131 beklerler.<\/p>\n<h4>Dok\u00fcmantasyonun G\u00fcncelli\u011fi ve Bak\u0131m\u0131<\/h4>\n<p>E\u011fer bir \u00fcr\u00fcn hem a\u00e7\u0131k hem de karanl\u0131k modda farkl\u0131 aray\u00fczlere sahipse, dok\u00fcmantasyonda bu iki modu da g\u00f6stermek gerekebilir. Bu genellikle iki ayr\u0131 ekran g\u00f6r\u00fcnt\u00fcs\u00fc kullanmak anlam\u0131na gelir ki bu da dosya boyutunu art\u0131r\u0131r ve dok\u00fcmantasyonun bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r. Her g\u00fcncellemede iki g\u00f6r\u00fcnt\u00fcy\u00fc de de\u011fi\u015ftirmek zorunda kalmak, geli\u015ftiriciler i\u00e7in ek bir y\u00fck olu\u015fturur.<\/p>\n<h4>Eri\u015filebilirlik ve Kullan\u0131c\u0131 Tercihleri<\/h4>\n<p>Karanl\u0131k mod, \u00f6zellikle d\u00fc\u015f\u00fck \u0131\u015f\u0131kl\u0131 ortamlarda veya g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in eri\u015filebilirli\u011fi art\u0131ran \u00f6nemli bir \u00f6zelliktir. Statik, parlak ekran g\u00f6r\u00fcnt\u00fcleri, bu kullan\u0131c\u0131lar\u0131n tercihlerini g\u00f6z ard\u0131 ederek eri\u015filebilirlik hedeflerini zay\u0131flat\u0131r.<\/p>\n<h3>Mevcut Yakla\u015f\u0131mlar ve S\u0131n\u0131rl\u0131l\u0131klar\u0131<\/h3>\n<p>\u015eu anda, Docusaurus belgelerinde karanl\u0131k mod ekran g\u00f6r\u00fcnt\u00fclerini y\u00f6netmek i\u00e7in birka\u00e7 yayg\u0131n ancak s\u0131n\u0131rl\u0131 yakla\u015f\u0131m bulunmaktad\u0131r.<\/p>\n<h4>\u0130ki Ayr\u0131 G\u00f6r\u00fcnt\u00fc Kullan\u0131m\u0131 (Light\/Dark)<\/h4>\n<p>En basit yakla\u015f\u0131m, her ekran g\u00f6r\u00fcnt\u00fcs\u00fc i\u00e7in hem a\u00e7\u0131k hem de karanl\u0131k mod versiyonlar\u0131n\u0131 haz\u0131rlay\u0131p, bunlar\u0131 MDX i\u00e7eri\u011finde ko\u015fullu olarak g\u00f6stermektir. Bu, genellikle CSS veya basit JavaScript ile tema durumunu kontrol ederek yap\u0131l\u0131r.<\/p>\n<pre><code class=\"language-mdx\">import { useColorMode } from '@docusaurus\/theme-common';\n\nfunction ThemeImage({ lightSrc, darkSrc, alt }) {\n  const { colorMode } = useColorMode();\n  const src = colorMode === 'dark' ? darkSrc : lightSrc;\n  return <img src={src} alt={alt} \/>;\n}\n\n<ThemeImage\n  lightSrc=\"\/img\/light-screenshot.png\"\n  darkSrc=\"\/img\/dark-screenshot.png\"\n  alt=\"\u00d6rnek Ekran G\u00f6r\u00fcnt\u00fcs\u00fc\"\n\/>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu y\u00f6ntem i\u015flevsel olsa da, her g\u00f6r\u00fcnt\u00fc i\u00e7in iki dosya gerektirir ve MDX i\u00e7eri\u011fini biraz karma\u015f\u0131kla\u015ft\u0131r\u0131r. Ayr\u0131ca, g\u00f6r\u00fcnt\u00fclerin manuel olarak y\u00f6netilmesi bak\u0131m y\u00fck\u00fcn\u00fc art\u0131r\u0131r.<\/p>\n<h4>Manuel Ge\u00e7i\u015f Mekanizmalar\u0131<\/h4>\n<p>Baz\u0131 durumlarda, kullan\u0131c\u0131lar\u0131n bir d\u00fc\u011fmeye t\u0131klayarak ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fcn a\u00e7\u0131k veya karanl\u0131k mod versiyonunu g\u00f6rmelerini sa\u011flayan manuel ge\u00e7i\u015fler uygulan\u0131r. Bu, kullan\u0131c\u0131n\u0131n ek bir etkile\u015fimde bulunmas\u0131n\u0131 gerektirir ve otomatik bir \u00e7\u00f6z\u00fcm de\u011fildir.<\/p>\n<h4>Statik G\u00f6r\u00fcnt\u00fclerin Dezavantajlar\u0131<\/h4>\n<ul>\n<li><strong>Y\u00fcksek Bak\u0131m Maliyeti:<\/strong> Her g\u00f6r\u00fcnt\u00fc i\u00e7in iki versiyon olu\u015fturmak ve s\u00fcrd\u00fcrmek.<\/li>\n<li><strong>Dosya Boyutu:<\/strong> \u0130ki kat daha fazla g\u00f6r\u00fcnt\u00fc dosyas\u0131, potansiyel olarak daha b\u00fcy\u00fck paket boyutlar\u0131.<\/li>\n<li><strong>Kullan\u0131c\u0131 Deneyimi:<\/strong> Otomatik ge\u00e7i\u015f olmamas\u0131 veya manuel etkile\u015fim gerektirmesi.<\/li>\n<li><strong>Tutars\u0131zl\u0131k:<\/strong> Dok\u00fcmantasyonun di\u011fer \u00f6\u011feleri temaya uyarken, ekran g\u00f6r\u00fcnt\u00fclerinin uymamas\u0131.<\/li>\n<\/ul>\n<h3>Docusaurus'un Temel Tema Mekanizmas\u0131<\/h3>\n<p>Dinamik ekran g\u00f6r\u00fcnt\u00fcs\u00fc \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fc anlamak i\u00e7in Docusaurus'un tema y\u00f6netimini nas\u0131l ele ald\u0131\u011f\u0131n\u0131 bilmek \u00f6nemlidir. Docusaurus, tema ge\u00e7i\u015fini y\u00f6netmek i\u00e7in modern web standartlar\u0131n\u0131 ve React ba\u011flam\u0131n\u0131 kullan\u0131r.<\/p>\n<h4><code>data-theme<\/code> \u00d6zniteli\u011fi ve CSS De\u011fi\u015fkenleri<\/h4>\n<p>Docusaurus, uygulaman\u0131n k\u00f6k HTML elementine (genellikle <code><html><\/code> veya <code><body><\/code>) <code>data-theme<\/code> ad\u0131nda bir \u00f6znitelik ekler. Bu \u00f6zniteli\u011fin de\u011feri, mevcut temay\u0131 (<code>light<\/code> veya <code>dark<\/code>) g\u00f6sterir. \u00d6rne\u011fin:<\/p>\n<pre><code class=\"language-html\"><html lang=\"tr\" data-theme=\"dark\">\n  <!-- ... -->\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6znitelik, CSS de\u011fi\u015fkenlerini (custom properties) kullanarak stil de\u011fi\u015fikliklerini tetiklemek i\u00e7in kullan\u0131l\u0131r. Docusaurus temas\u0131, <code>:root[data-theme='dark']<\/code> gibi se\u00e7icilerle farkl\u0131 CSS de\u011fi\u015fken de\u011ferleri tan\u0131mlar. \u00d6rne\u011fin:<\/p>\n<pre><code class=\"language-css\">:root {\n  --ifm-color-primary: #3075c9; \/* Light theme primary color *\/\n}\n\n:root[data-theme='dark'] {\n  --ifm-color-primary: #66b0ff; \/* Dark theme primary color *\/\n}\n<\/pre>\n<p><\/code><\/p>\n<h4>Tema De\u011fi\u015fimini Alg\u0131lama<\/h4>\n<p>Docusaurus, React ba\u011flam\u0131 arac\u0131l\u0131\u011f\u0131yla tema durumunu bile\u015fenlere de sunar. <code>@docusaurus\/theme-common<\/code> paketinden <code>useColorMode<\/code> hook'unu kullanarak mevcut tema durumuna (<code>light<\/code> veya <code>dark<\/code>) eri\u015febiliriz. Bu, React bile\u015fenlerinde tema ge\u00e7i\u015fine duyarl\u0131 mant\u0131k olu\u015fturmak i\u00e7in temel bir ara\u00e7t\u0131r.<\/p>\n<h4>Varsay\u0131lan Tema Ayarlar\u0131<\/h4>\n<p><code>docusaurus.config.js<\/code> dosyas\u0131nda teman\u0131n varsay\u0131lan ayarlar\u0131n\u0131 yap\u0131land\u0131rabilirsiniz. \u00d6rne\u011fin, varsay\u0131lan temay\u0131 karanl\u0131k olarak ayarlamak veya tema ge\u00e7i\u015f d\u00fc\u011fmesini \u00f6zelle\u015ftirmek m\u00fcmk\u00fcnd\u00fcr.<\/p>\n<pre><code class=\"language-javascript\">\/\/ docusaurus.config.js\nmodule.exports = {\n  themeConfig: {\n    colorMode: {\n      defaultMode: 'dark',\n      disableSwitch: false,\n      respectPrefersColorScheme: true,\n    },\n  },\n};\n<\/pre>\n<p><\/code><\/p>\n<h3>Dinamik Ekran G\u00f6r\u00fcnt\u00fcs\u00fc \u00c7\u00f6z\u00fcm\u00fcne Genel Bak\u0131\u015f<\/h3>\n<p>Amac\u0131m\u0131z, kullan\u0131c\u0131n\u0131n Docusaurus'ta se\u00e7ti\u011fi temaya (a\u00e7\u0131k veya karanl\u0131k) otomatik olarak uyum sa\u011flayan ekran g\u00f6r\u00fcnt\u00fcleri olu\u015fturmakt\u0131r. Bunu ba\u015farmak i\u00e7in, her bir ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fcn a\u00e7\u0131k ve karanl\u0131k mod versiyonlar\u0131n\u0131 \u00f6nceden haz\u0131rlayacak ve ard\u0131ndan bu versiyonlar\u0131 dinamik olarak y\u00fckleyecek bir mekanizma geli\u015ftirece\u011fiz.<\/p>\n<h4>Temel Fikir: Tema Bazl\u0131 G\u00f6r\u00fcnt\u00fc Y\u00fckleme<\/h4>\n<p>\u00c7\u00f6z\u00fcm\u00fcn ana fikri, bir g\u00f6r\u00fcnt\u00fcn\u00fcn kaynak yolunu (<code>src<\/code> \u00f6zniteli\u011fini) kullan\u0131c\u0131n\u0131n mevcut tema tercihine g\u00f6re de\u011fi\u015ftirmektir. Bu, ya CSS de\u011fi\u015fkenleri arac\u0131l\u0131\u011f\u0131yla ya da \u00f6zel bir React bile\u015feni kullanarak yap\u0131labilir.<\/p>\n<h4>Gereksinimler ve \u00d6n Ko\u015fullar<\/h4>\n<ul>\n<li>Her ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fcn hem a\u00e7\u0131k hem de karanl\u0131k mod versiyonlar\u0131 olmal\u0131 (\u00f6rn: <code>my-screenshot-light.png<\/code> ve <code>my-screenshot-dark.png<\/code>).<\/li>\n<li>Docusaurus projesinde \u00f6zel bile\u015fenler olu\u015fturma yetene\u011fi.<\/li>\n<li>Temel React ve CSS bilgisi.<\/li>\n<\/ul>\n<h4>\u00c7\u00f6z\u00fcm Mimarisi<\/h4>\n<p>\u0130ki ana yakla\u015f\u0131m \u00fczerinde duraca\u011f\u0131z:<\/p>\n<ol>\n<li><strong>CSS De\u011fi\u015fkenleri ile G\u00f6r\u00fcnt\u00fc Y\u00f6netimi:<\/strong> CSS de\u011fi\u015fkenlerini kullanarak g\u00f6r\u00fcnt\u00fc yollar\u0131n\u0131 tema bazl\u0131 olarak tan\u0131mlama ve <code>background-image<\/code> \u00f6zelli\u011fi ile kullanma.<\/li>\n<li><strong>React Bile\u015fenleri ile Ak\u0131ll\u0131 G\u00f6r\u00fcnt\u00fc Y\u00fckleme:<\/strong> Docusaurus'un tema ba\u011flam\u0131n\u0131 kullanarak bir React bile\u015feni olu\u015fturma ve <code><img><\/code> etiketinin <code>src<\/code> \u00f6zelli\u011fini dinamik olarak ayarlama.<\/li>\n<\/ol>\n<p>React bile\u015feni yakla\u015f\u0131m\u0131, MDX i\u00e7eri\u011fiyle daha iyi entegre oldu\u011fu ve <code><img><\/code> etiketinin t\u00fcm \u00f6zelliklerinden faydalanabildi\u011fi i\u00e7in genellikle daha esnektir ve tercih edilir.<\/p>\n<h3>React Bile\u015fenleri ile Ak\u0131ll\u0131 G\u00f6r\u00fcnt\u00fc Y\u00fckleme<\/h3>\n<p>Bu yakla\u015f\u0131m, Docusaurus'un React tabanl\u0131 yap\u0131s\u0131ndan tam olarak faydalan\u0131r ve MDX i\u00e7eri\u011fiyle sorunsuz bir entegrasyon sunar. \u00d6zel bir React bile\u015feni olu\u015fturarak, tema durumunu dinleyebilir ve buna g\u00f6re do\u011fru g\u00f6r\u00fcnt\u00fc yolunu se\u00e7ebiliriz.<\/p>\n<h4>\u00d6zel Bir <code><ThemeImage><\/code> Bile\u015feni Olu\u015fturma<\/h4>\n<p>\u0130lk ad\u0131m, Docusaurus projenizin <code>src\/components<\/code> klas\u00f6r\u00fcnde (veya benzer bir yerde) <code>ThemeImage.js<\/code> ad\u0131nda yeni bir dosya olu\u015fturmakt\u0131r. Bu bile\u015fen, <code>lightSrc<\/code> ve <code>darkSrc<\/code> ad\u0131nda iki prop alacak ve mevcut temaya g\u00f6re do\u011fru <code>src<\/code> de\u011ferini se\u00e7ecektir.<\/p>\n<h4><code>useColorMode<\/code> Hook'u Kullan\u0131m\u0131<\/h4>\n<p><code>@docusaurus\/theme-common<\/code> paketinden <code>useColorMode<\/code> hook'unu kullanarak mevcut tema durumuna kolayca eri\u015febiliriz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/components\/ThemeImage.js\nimport React from 'react';\nimport { useColorMode } from '@docusaurus\/theme-common';\n\nfunction ThemeImage({ lightSrc, darkSrc, alt, ...props }) {\n  const { colorMode } = useColorMode();\n  const src = colorMode === 'dark' ? darkSrc : lightSrc;\n\n  return <img src={src} alt={alt} {...props} \/>;\n}\n\nexport default ThemeImage;\n<\/pre>\n<p><\/code><\/p>\n<p>Bu bile\u015fen, ek <code>props<\/code>'lar\u0131 (geni\u015flik, y\u00fckseklik, s\u0131n\u0131f vb.) do\u011frudan <code><img><\/code> etiketine iletebilmek i\u00e7in <code>{...props}<\/code> s\u00f6zdizimini kullan\u0131r.<\/p>\n<h4>G\u00f6r\u00fcnt\u00fc Yollar\u0131n\u0131 Dinamik Olarak Belirleme<\/h4>\n<p>G\u00f6r\u00fcnt\u00fclerinizi Docusaurus'un statik klas\u00f6r\u00fcnde (genellikle <code>static\/img<\/code>) d\u00fczenli bir \u015fekilde saklaman\u0131z \u00f6nerilir. \u00d6rne\u011fin:<\/p>\n<ul>\n<li><code>static\/img\/screenshots\/light\/dashboard.png<\/code><\/li>\n<li><code>static\/img\/screenshots\/dark\/dashboard.png<\/code><\/li>\n<\/ul>\n<p>MDX dosyan\u0131zda bu bile\u015feni kullanmak i\u00e7in:<\/p>\n<pre><code class=\"language-mdx\">import ThemeImage from '@site\/src\/components\/ThemeImage';\n\n# Dashboard Ekran G\u00f6r\u00fcnt\u00fcs\u00fc\n\nA\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fc, uygulaman\u0131n ana panosunu g\u00f6stermektedir. Tema de\u011fi\u015fti\u011finde otomatik olarak g\u00fcncellenecektir.\n\n<ThemeImage\n  lightSrc=\"\/img\/screenshots\/light\/dashboard.png\"\n  darkSrc=\"\/img\/screenshots\/dark\/dashboard.png\"\n  alt=\"Uygulama Panosu\"\n  width=\"800\"\n  loading=\"lazy\"\n\/>\n\nBu, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.\n<\/pre>\n<p><\/code><\/p>\n<p>Bu y\u00f6ntem, Docusaurus'un MDX yetenekleriyle m\u00fckemmel bir uyum sa\u011flar ve geli\u015ftiricilere tan\u0131d\u0131k bir React bile\u015feni aray\u00fcz\u00fc sunar.<\/p>\n<h3>Entegrasyon ve Optimizasyon \u0130pu\u00e7lar\u0131<\/h3>\n<p>Dinamik ekran g\u00f6r\u00fcnt\u00fclerini Docusaurus projenize entegre ederken ve performans\u0131n\u0131 optimize ederken dikkat etmeniz gereken baz\u0131 noktalar bulunmaktad\u0131r.<\/p>\n<h4>Docusaurus Projesine Entegre Etme<\/h4>\n<ol>\n<li><strong>Bile\u015fen Olu\u015fturma:<\/strong> Yukar\u0131daki <code>ThemeImage.js<\/code> dosyas\u0131n\u0131 <code>src\/components\/<\/code> dizininize yerle\u015ftirin.<\/li>\n<li><strong>G\u00f6r\u00fcnt\u00fcleri D\u00fczenleme:<\/strong> T\u00fcm ekran g\u00f6r\u00fcnt\u00fclerinizin hem a\u00e7\u0131k hem de karanl\u0131k mod versiyonlar\u0131n\u0131 <code>static\/img\/<\/code> alt\u0131nda uygun bir klas\u00f6r yap\u0131s\u0131yla saklay\u0131n (\u00f6rn. <code>static\/img\/light\/<\/code> ve <code>static\/img\/dark\/<\/code>).<\/li>\n<li><strong>MDX \u0130\u00e7eri\u011finde Kullan\u0131m:<\/strong> Belgelerinizdeki <code><img><\/code> etiketlerini <code><ThemeImage><\/code> bile\u015feniyle de\u011fi\u015ftirin ve <code>lightSrc<\/code> ile <code>darkSrc<\/code> prop'lar\u0131n\u0131 do\u011fru yollarla sa\u011flay\u0131n.<\/li>\n<\/ol>\n<h4>G\u00f6r\u00fcnt\u00fc Optimizasyonu ve Performans<\/h4>\n<p>Her ne kadar iki ayr\u0131 g\u00f6r\u00fcnt\u00fc dosyas\u0131 kullansak da, performans\u0131 art\u0131rmak i\u00e7in baz\u0131 ad\u0131mlar atabiliriz:<\/p>\n<ul>\n<li><strong>S\u0131k\u0131\u015ft\u0131rma:<\/strong> G\u00f6r\u00fcnt\u00fcleri web i\u00e7in optimize edin. TinyPNG veya Squoosh gibi ara\u00e7lar kullanarak dosya boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fclt\u00fcn.<\/li>\n<li><strong>Format Se\u00e7imi:<\/strong> PNG, \u015feffafl\u0131k gerektiren veya keskin \u00e7izgili g\u00f6r\u00fcnt\u00fcler i\u00e7in iyidir. JPEG, foto\u011fraflar i\u00e7in daha uygundur. WebP veya AVIF gibi modern formatlar daha iyi s\u0131k\u0131\u015ft\u0131rma sunar, ancak taray\u0131c\u0131 deste\u011fini kontrol edin.<\/li>\n<li><strong>Lazy Loading:<\/strong> <code><ThemeImage><\/code> bile\u015fenine <code>loading=\"lazy\"<\/code> prop'unu ekleyerek g\u00f6r\u00fcnt\u00fclerin yaln\u0131zca g\u00f6r\u00fcn\u00fcr alana girdi\u011finde y\u00fcklenmesini sa\u011flay\u0131n. Bu, sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/li>\n<li><strong>Boyutland\u0131rma:<\/strong> G\u00f6r\u00fcnt\u00fclerinizi do\u011fru boyutlarda sunun. \u00c7ok b\u00fcy\u00fck g\u00f6r\u00fcnt\u00fcleri taray\u0131c\u0131da k\u00fc\u00e7\u00fcltmek performans kayb\u0131na yol a\u00e7ar. Gerekirse <code>width<\/code> ve <code>height<\/code> prop'lar\u0131n\u0131 kullanarak taray\u0131c\u0131n\u0131n yer ay\u0131rmas\u0131n\u0131 sa\u011flay\u0131n.<\/li>\n<\/ul>\n<h4>Alternatif \u00c7\u00f6z\u00fcmler ve Gelecek Yakla\u015f\u0131mlar<\/h4>\n<p>Daha geli\u015fmi\u015f \u00e7\u00f6z\u00fcmler i\u00e7in, Docusaurus'un <code>@theme\/ThemedImage<\/code> bile\u015fenini inceleyebilirsiniz. Bu bile\u015fen, <code>light<\/code> ve <code>dark<\/code> prop'lar\u0131n\u0131 alarak benzer bir i\u015flevsellik sunar ve Docusaurus taraf\u0131ndan dahili olarak kullan\u0131l\u0131r. Kendi \u00f6zel bile\u015feninizi yazmak yerine bu bile\u015feni do\u011frudan kullanmak da m\u00fcmk\u00fcnd\u00fcr:<\/p>\n<pre><code class=\"language-mdx\">import ThemedImage from '@theme\/ThemedImage';\nimport useBaseUrl from '@docusaurus\/useBaseUrl';\n\n<ThemedImage\n  alt=\"Docusaurus themed image\"\n  sources={{\n    light: useBaseUrl('\/img\/screenshots\/light\/dashboard.png'),\n    dark: useBaseUrl('\/img\/screenshots\/dark\/dashboard.png'),\n  }}\n\/>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu yakla\u015f\u0131m, Docusaurus'un yerle\u015fik yeteneklerinden faydalan\u0131r ve daha az \u00f6zel kod yazman\u0131z\u0131 sa\u011flar. <code>useBaseUrl<\/code> hook'u, statik varl\u0131k yollar\u0131n\u0131 do\u011fru \u015fekilde \u00e7\u00f6zmek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Docusaurus belgelerinde dinamik karanl\u0131k mod ekran g\u00f6r\u00fcnt\u00fcleri kullanmak, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131ran ve dok\u00fcmantasyonunuzu daha profesyonel hale getiren kritik bir ad\u0131md\u0131r. Statik g\u00f6r\u00fcnt\u00fclerden dinamik, temaya duyarl\u0131 \u00e7\u00f6z\u00fcmlere ge\u00e7i\u015f yaparak, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n g\u00f6z yorgunlu\u011funu azalt\u0131r, eri\u015filebilirli\u011fi art\u0131r\u0131r ve dok\u00fcmantasyonunuzun genel tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flars\u0131n\u0131z. \u0130ster kendi \u00f6zel React bile\u015feninizi olu\u015fturun, ister Docusaurus'un yerle\u015fik <code><ThemedImage><\/code> bile\u015fenini kullan\u0131n, bu teknikler sayesinde belgeleriniz modern web standartlar\u0131na uygun, esnek ve kullan\u0131c\u0131 dostu olacakt\u0131r. Unutmay\u0131n, iyi bir dok\u00fcmantasyon sadece bilgi vermekle kalmaz, ayn\u0131 zamanda bilgiyi sunu\u015f bi\u00e7imiyle de kullan\u0131c\u0131y\u0131 etkiler.<\/p>\n<h3>SSS (S\u0131k Sorulan Sorular)<\/h3>\n<h4>Bu y\u00f6ntem t\u00fcm Docusaurus versiyonlar\u0131nda \u00e7al\u0131\u015f\u0131r m\u0131?<\/h4>\n<p>Evet, bu makalede a\u00e7\u0131klanan React bile\u015feni tabanl\u0131 y\u00f6ntem, Docusaurus v2 ve v3 ile uyumludur. <code>useColorMode<\/code> hook'u ve <code>@theme\/ThemedImage<\/code> bile\u015feni Docusaurus'un modern versiyonlar\u0131n\u0131n bir par\u00e7as\u0131d\u0131r.<\/p>\n<h4>Performans \u00fczerinde bir etkisi var m\u0131?<\/h4>\n<p>Her g\u00f6r\u00fcnt\u00fc i\u00e7in iki ayr\u0131 dosya bulundurmak, toplam dosya boyutunu art\u0131rabilir. Ancak, do\u011fru g\u00f6r\u00fcnt\u00fc optimizasyonu (s\u0131k\u0131\u015ft\u0131rma, modern formatlar) ve lazy loading (<code>loading=\"lazy\"<\/code>) kullanarak bu etkiyi minimize edebilirsiniz. Taray\u0131c\u0131, yaln\u0131zca kullan\u0131c\u0131n\u0131n mevcut temas\u0131 i\u00e7in ilgili g\u00f6r\u00fcnt\u00fcy\u00fc y\u00fckleyecektir.<\/p>\n<h4>Sadece ekran g\u00f6r\u00fcnt\u00fcleri i\u00e7in mi kullan\u0131labilir?<\/h4>\n<p>Hay\u0131r, bu y\u00f6ntem sadece ekran g\u00f6r\u00fcnt\u00fcleri i\u00e7in de\u011fil, logonuz, ikonlar\u0131n\u0131z veya temaya g\u00f6re de\u011fi\u015fmesini istedi\u011finiz di\u011fer t\u00fcm g\u00f6rseller i\u00e7in de kullan\u0131labilir. Temaya duyarl\u0131 herhangi bir g\u00f6rsel varl\u0131k i\u00e7in ayn\u0131 mant\u0131k uygulanabilir.<\/p>\n<h4>G\u00f6r\u00fcnt\u00fcleri nas\u0131l optimize etmeliyim?<\/h4>\n<p>G\u00f6r\u00fcnt\u00fcleri optimize etmek i\u00e7in online ara\u00e7lar (TinyPNG, Squoosh) kullanabilir, modern formatlara (WebP, AVIF) d\u00f6n\u00fc\u015ft\u00fcrebilir ve <code><img><\/code> etiketinde <code>width<\/code>, <code>height<\/code> ve <code>loading=\"lazy\"<\/code> gibi \u00f6znitelikleri kullanarak taray\u0131c\u0131ya daha fazla bilgi sa\u011flayabilirsiniz.<\/p>\n<h4>Tema ge\u00e7i\u015fi s\u0131ras\u0131nda anl\u0131k bir \"flicker\" olu\u015fur mu?<\/h4>\n<p>G\u00f6r\u00fcnt\u00fclerin y\u00fcklenmesi anl\u0131k bir gecikmeye neden olabilir. Ancak, taray\u0131c\u0131lar genellikle \u00f6nbellekleme yapar ve Docusaurus'un tema ge\u00e7i\u015fi genellikle \u00e7ok h\u0131zl\u0131d\u0131r. E\u011fer bu bir sorun te\u015fkil ederse, yer tutucu (placeholder) g\u00f6r\u00fcnt\u00fcler kullanmak veya ge\u00e7i\u015f s\u0131ras\u0131nda k\u00fc\u00e7\u00fck bir y\u00fckleme animasyonu g\u00f6stermek gibi \u00e7\u00f6z\u00fcmler d\u00fc\u015f\u00fcn\u00fclebilir.<\/p>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131 ve dok\u00fcmantasyon platformlar\u0131, kullan\u0131c\u0131 deneyimini art\u0131rmak amac\u0131yla karanl\u0131k mod (dark mode) deste\u011fi sunmaktad\u0131r. Docusau&#8230;","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-38270","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","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>Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler - 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\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler\" \/>\n<meta property=\"og:description\" content=\"Modern web uygulamalar\u0131 ve dok\u00fcmantasyon platformlar\u0131, kullan\u0131c\u0131 deneyimini art\u0131rmak amac\u0131yla karanl\u0131k mod (dark mode) deste\u011fi sunmaktad\u0131r. Docusau...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-27T09:30:40+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=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler\",\"datePublished\":\"2026-01-27T09:30:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/\"},\"wordCount\":2241,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/\",\"name\":\"Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-27T09:30:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler\"}]},{\"@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":"Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler - 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\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/","og_locale":"tr_TR","og_type":"article","og_title":"Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler","og_description":"Modern web uygulamalar\u0131 ve dok\u00fcmantasyon platformlar\u0131, kullan\u0131c\u0131 deneyimini art\u0131rmak amac\u0131yla karanl\u0131k mod (dark mode) deste\u011fi sunmaktad\u0131r. Docusau...","og_url":"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-27T09:30:40+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler","datePublished":"2026-01-27T09:30:40+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/"},"wordCount":2241,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/","url":"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/","name":"Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-27T09:30:40+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/docusaurus-belgelerinde-dinamik-karanlik-mod-ekran-goruntuleri-gercekten-gecis-yapan-cozumler\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Docusaurus Belgelerinde Dinamik Karanl\u0131k Mod Ekran G\u00f6r\u00fcnt\u00fcleri: Ger\u00e7ekten Ge\u00e7i\u015f Yapan \u00c7\u00f6z\u00fcmler"}]},{"@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\/38270","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=38270"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38270\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}