{"id":7768,"date":"2024-12-26T21:30:10","date_gmt":"2024-12-26T18:30:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/"},"modified":"2024-12-26T21:30:10","modified_gmt":"2024-12-26T18:30:10","slug":"tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/","title":{"rendered":"Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod"},"content":{"rendered":"<p>Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod<\/p>\n<p>Merhaba! Fatih Soysal olarak, bug\u00fcn size Tailwind CSS ve CSS de\u011fi\u015fkenlerini kullanarak web sitenize karanl\u0131k ve gece modlar\u0131 eklemenin basit ve etkili bir yolunu g\u00f6sterece\u011fim. Bu y\u00f6ntem, kullan\u0131c\u0131 deneyimini geli\u015ftirmenin yan\u0131 s\u0131ra, farkl\u0131 \u0131\u015f\u0131k ko\u015fullar\u0131nda daha rahat bir okuma deneyimi sunuyor.  Ayr\u0131ca,  <a href=\"https:\/\/fatihsoysal.com\">fatihsoysal.com<\/a> sitemde bu konuya daha detayl\u0131 \u00f6rnekler bulabilirsiniz.<\/p>\n<h2>CSS De\u011fi\u015fkenlerinin G\u00fcc\u00fc<\/h2>\n<p>\u00d6ncelikle, CSS de\u011fi\u015fkenlerinin (CSS custom properties) ne kadar g\u00fc\u00e7l\u00fc oldu\u011funu anlamam\u0131z gerekiyor.  Bunlar,  CSS stilinizi daha d\u00fczenli ve y\u00f6netilebilir hale getirmek i\u00e7in harika bir yoldur.  Bir renk, yaz\u0131 tipi boyutu veya ba\u015fka bir stili bir de\u011fi\u015fkende tan\u0131mlayarak, bu de\u011feri projenizin her yerinde tek bir noktadan y\u00f6netebilirsiniz.  Bu, \u00f6zellikle karanl\u0131k ve gece modlar\u0131 gibi farkl\u0131 temalar olu\u015ftururken son derece faydal\u0131d\u0131r.<\/p>\n<h2>Tailwind CSS ile Entegrasyon<\/h2>\n<p>Tailwind CSS,  h\u0131zl\u0131 ve kolay bir \u015fekilde \u00f6zelle\u015ftirilebilir CSS s\u0131n\u0131flar\u0131 sunan harika bir framework&#8217;t\u00fcr.  Bu s\u0131n\u0131flar\u0131 CSS de\u011fi\u015fkenlerimizle birle\u015ftirerek,  karanl\u0131k ve gece modlar\u0131n\u0131 uygulamak \u00e7ok daha kolay hale gelir.  \u00d6rne\u011fin, arka plan rengi i\u00e7in bir de\u011fi\u015fken tan\u0131mlay\u0131p,  bu de\u011fi\u015fkeni Tailwind&#8217;in arka plan rengi s\u0131n\u0131flar\u0131yla birlikte kullanabiliriz.<\/p>\n<pre><code class=\"language-css\">\n:root {\n  --bg-color: #ffffff; \/* A\u00e7\u0131k mod i\u00e7in arka plan rengi *\/\n  --text-color: #333333; \/* A\u00e7\u0131k mod i\u00e7in metin rengi *\/\n}\n\n.dark-mode {\n  --bg-color: #111111; \/* Karanl\u0131k mod i\u00e7in arka plan rengi *\/\n  --text-color: #ffffff; \/* Karanl\u0131k mod i\u00e7in metin rengi *\/\n}\n\nbody {\n  background-color: var(--bg-color);\n  color: var(--text-color);\n}\n\n\/* Tailwind CSS s\u0131n\u0131flar\u0131 ile birlikte kullan\u0131m\u0131 *\/\n<div class=\"bg-gray-100 dark:bg-gray-900 p-4\">...<\/div>\n<\/code><\/pre>\n<p>Bu \u00f6rnekte,  :root se\u00e7icisi ile varsay\u0131lan renkleri tan\u0131ml\u0131yoruz.  .dark-mode s\u0131n\u0131f\u0131 ise karanl\u0131k modu etkinle\u015ftirdi\u011fimizde kullan\u0131lacak renkleri tan\u0131mlar.  Son olarak,  body etiketinin arka plan ve metin renklerini CSS de\u011fi\u015fkenlerimizden almas\u0131n\u0131 sa\u011fl\u0131yoruz.  Ayr\u0131ca,  Tailwind&#8217;in dark: \u00f6nekli modifierlar\u0131n\u0131 kullanarak da karanl\u0131k mod stillerini kolayca ekleyebiliriz.<\/p>\n<h2>JavaScript ile Dinamik Ge\u00e7i\u015f<\/h2>\n<p>Kullan\u0131c\u0131 deneyimini daha iyi hale getirmek i\u00e7in,  JavaScript kullanarak karanl\u0131k ve gece modlar\u0131 aras\u0131nda dinamik bir ge\u00e7i\u015f sa\u011flayabiliriz.  Bu ge\u00e7i\u015fi bir toggle d\u00fc\u011fmesi veya yerel depolama (local storage) kullanarak yapabiliriz. \u00d6rne\u011fin,  bir toggle d\u00fc\u011fmesi t\u0131kland\u0131\u011f\u0131nda,  dark-mode s\u0131n\u0131f\u0131n\u0131 ekleyip kald\u0131rarak,  stil de\u011fi\u015fikli\u011fini ger\u00e7ekle\u015ftirebiliriz.  Kullan\u0131c\u0131n\u0131n tercihlerini hat\u0131rlamak i\u00e7in de local storage&#8217;\u0131 kullanabiliriz.<\/p>\n<pre><code class=\"language-javascript\">\nconst darkModeToggle = document.getElementById('dark-mode-toggle');\nconst body = document.body;\n\ndarkModeToggle.addEventListener('click', () => {\n  body.classList.toggle('dark-mode');\n  localStorage.setItem('darkMode', body.classList.contains('dark-mode'));\n});\n\nconst darkMode = localStorage.getItem('darkMode');\nif (darkMode === 'true') {\n  body.classList.add('dark-mode');\n}\n<\/code><\/pre>\n<p>Bu kod,  bir toggle d\u00fc\u011fmesinin t\u0131klanmas\u0131na tepki verir ve dark-mode s\u0131n\u0131f\u0131n\u0131 ekler veya kald\u0131r\u0131r.  Ayr\u0131ca,  kullan\u0131c\u0131n\u0131n tercihlerini local storage&#8217;da saklar, b\u00f6ylece sayfa yenilendi\u011finde bile tercih korunur.  Bu \u00f6rnekte,  dark-mode-toggle  id&#8217;sine sahip bir elementin varl\u0131\u011f\u0131n\u0131 varsay\u0131yoruz.  Bu,  bir buton olabilir \u00f6rne\u011fin.<\/p>\n<h2>Gece ve Karanl\u0131k Mod Aras\u0131ndaki Fark<\/h2>\n<p>Gece modu genellikle daha d\u00fc\u015f\u00fck parlakl\u0131k ve kontrast seviyelerine sahipken, karanl\u0131k mod ise genellikle siyah veya koyu gri bir arka plana sahiptir.  Kullan\u0131c\u0131 tercihlerine g\u00f6re, gece veya karanl\u0131k mod aras\u0131nda se\u00e7im sunman\u0131z daha iyi bir kullan\u0131c\u0131 deneyimi sa\u011flar.  Bu,  farkl\u0131 stil setleri olu\u015fturarak ve bir toggle ile kontrol edilerek ger\u00e7ekle\u015ftirilebilir.<\/p>\n<p>Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur.  Daha fazla bilgi i\u00e7in,  <a href=\"https:\/\/dev.to\/anandu_dev_a75fe0162e268f\/dark-mode-and-night-mode-with-tailwind-css-and-css-variables-3047\">buraya<\/a> bakabilirsiniz.  Ayr\u0131ca,  <a href=\"https:\/\/fatihsoysal.com\">fatihsoysal.com<\/a> sitemi ziyaret ederek daha fazla bilgiye ula\u015fabilirsiniz.<\/p>\n<p>#Etiketler: Tailwind CSS, CSS De\u011fi\u015fkenleri, Karanl\u0131k Mod, Gece Modu, JavaScript, Kullan\u0131c\u0131 Deneyimi, Web Geli\u015ftirme,  CSS,  Local Storage<\/p>\n","protected":false},"excerpt":{"rendered":"Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod Merhaba! Fatih Soysal olarak, bug\u00fcn size Tailwind CSS ve&hellip;","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-7768","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>Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod<\/title>\n<meta name=\"description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn size Tailwind CSS ve CSS de\u011fi\u015fkenlerini kullanarak web sitenize karanl\u0131k ve gece modlar\u0131 eklemenin basit ve etkili bir yolunu g\u00f6sterece\u011fim. Bu y\u00f6ntem, kullan\u0131c\u0131 deneyimini geli\u015ftirmenin yan\u0131 s\u0131ra, farkl\u0131 \u0131\u015f\u0131k ko\u015fullar\u0131nda daha rahat bir okuma deneyimi sunuyor. Ayr\u0131ca, fatihsoysal.com sitemde bu konuya daha detayl\u0131 \u00f6rnekler bulabilirsiniz.\" \/>\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\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn size Tailwind CSS ve CSS de\u011fi\u015fkenlerini kullanarak web sitenize karanl\u0131k ve gece modlar\u0131 eklemenin basit ve etkili bir yolunu g\u00f6sterece\u011fim. Bu y\u00f6ntem, kullan\u0131c\u0131 deneyimini geli\u015ftirmenin yan\u0131 s\u0131ra, farkl\u0131 \u0131\u015f\u0131k ko\u015fullar\u0131nda daha rahat bir okuma deneyimi sunuyor. Ayr\u0131ca, fatihsoysal.com sitemde bu konuya daha detayl\u0131 \u00f6rnekler bulabilirsiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-26T18:30:10+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=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod\",\"datePublished\":\"2024-12-26T18:30:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/\"},\"wordCount\":571,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/\",\"name\":\"Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-12-26T18:30:10+00:00\",\"description\":\"Merhaba! Fatih Soysal olarak, bug\u00fcn size Tailwind CSS ve CSS de\u011fi\u015fkenlerini kullanarak web sitenize karanl\u0131k ve gece modlar\u0131 eklemenin basit ve etkili bir yolunu g\u00f6sterece\u011fim. Bu y\u00f6ntem, kullan\u0131c\u0131 deneyimini geli\u015ftirmenin yan\u0131 s\u0131ra, farkl\u0131 \u0131\u015f\u0131k ko\u015fullar\u0131nda daha rahat bir okuma deneyimi sunuyor. Ayr\u0131ca, fatihsoysal.com sitemde bu konuya daha detayl\u0131 \u00f6rnekler bulabilirsiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod\"}]},{\"@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":"Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn size Tailwind CSS ve CSS de\u011fi\u015fkenlerini kullanarak web sitenize karanl\u0131k ve gece modlar\u0131 eklemenin basit ve etkili bir yolunu g\u00f6sterece\u011fim. Bu y\u00f6ntem, kullan\u0131c\u0131 deneyimini geli\u015ftirmenin yan\u0131 s\u0131ra, farkl\u0131 \u0131\u015f\u0131k ko\u015fullar\u0131nda daha rahat bir okuma deneyimi sunuyor. Ayr\u0131ca, fatihsoysal.com sitemde bu konuya daha detayl\u0131 \u00f6rnekler bulabilirsiniz.","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\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/","og_locale":"tr_TR","og_type":"article","og_title":"Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod","og_description":"Merhaba! Fatih Soysal olarak, bug\u00fcn size Tailwind CSS ve CSS de\u011fi\u015fkenlerini kullanarak web sitenize karanl\u0131k ve gece modlar\u0131 eklemenin basit ve etkili bir yolunu g\u00f6sterece\u011fim. Bu y\u00f6ntem, kullan\u0131c\u0131 deneyimini geli\u015ftirmenin yan\u0131 s\u0131ra, farkl\u0131 \u0131\u015f\u0131k ko\u015fullar\u0131nda daha rahat bir okuma deneyimi sunuyor. Ayr\u0131ca, fatihsoysal.com sitemde bu konuya daha detayl\u0131 \u00f6rnekler bulabilirsiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-12-26T18:30:10+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod","datePublished":"2024-12-26T18:30:10+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/"},"wordCount":571,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/","url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/","name":"Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-12-26T18:30:10+00:00","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn size Tailwind CSS ve CSS de\u011fi\u015fkenlerini kullanarak web sitenize karanl\u0131k ve gece modlar\u0131 eklemenin basit ve etkili bir yolunu g\u00f6sterece\u011fim. Bu y\u00f6ntem, kullan\u0131c\u0131 deneyimini geli\u015ftirmenin yan\u0131 s\u0131ra, farkl\u0131 \u0131\u015f\u0131k ko\u015fullar\u0131nda daha rahat bir okuma deneyimi sunuyor. Ayr\u0131ca, fatihsoysal.com sitemde bu konuya daha detayl\u0131 \u00f6rnekler bulabilirsiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-css-degiskenleriyle-gece-ve-karanlik-mod\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tailwind CSS ve CSS De\u011fi\u015fkenleriyle Gece ve Karanl\u0131k Mod"}]},{"@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\/7768","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=7768"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/7768\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=7768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=7768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=7768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}