{ "componentChunkName": "component---src-templates-doc-template-js", "path": "/tr/docs/dark-mode", "result": {"data":{"current":{"fields":{"page":{"path":"/docs/dark-mode","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"en","title":"Dark Mode","markdown":"\n## Activating Dark Mod\n\nYou can use `.dark` class to use the dark mode offered by Gralig. Simply use it on wrapper element of your project or use it in `body` tag.\n\n```html\n\n\n\n```\n\n_You can switch to dark mode on navbar and see how the elements look in this mode._\n\n## Our Map\n\nWe prepared scss map like this;\n\n```scss\n$modes: (\n dark: (\n transparentColor: $transparent, // as a value, you can use a scss variable or any value you use in css.\n colorMain: $color-main-dt,\n colorSecondary: $color-secondary-dt,\n colorBackground: $color-background-dt,\n colorFont: $color-font-dt,\n colorFontSecondary: $color-font-secondary-dt,\n colorFontButton: $color-button-font-dt,\n colorFontRevert: $color-font-revert-dt,\n colorBorder: $color-border-dt,\n colorBorderLight: $color-border-light-dt,\n colorCode: $color-code-dt,\n colorMute: $color-mute-dt,\n colorAlert: $color-alert-dt,\n colorAlertFont: $color-alert-font-dt,\n colorCardBg: $color-card-dt,\n colorLinkFont: $color-link-font-dt,\n colorLinkHover: $color-link-hover-dt,\n colorInputDisabled: $color-input-disabled-dt,\n colorInputPlaceholder: $color-input-placeholder-dt,\n colorLoadings: $color-main-dt,\n colorIcon: $color-background-dt\n )\n);\n```\n\n## Usage Inside SCSS\n\nFirst you have to import relevant `scss` files.\n\n```scss\n@import 'gralig/scss/abstracts/all.scss';\n@import 'gralig/scss/modes/modes.scss';\n```\n\nUsage inside scss, you can use `moder` mixin and `mode()` function with map key which you want to use.\n\nExample;\n\n```scss\n.subheading {\n color: $color-font-secondary;\n font-weight: $font-normal;\n @include moder($modes) {\n color: mode(\"colorFontSecondary\");\n }\n}\n```\n\n## Editing or Adding\n\nIf you will use new mode or overwrite existing mod, you should create `$modes` map and add your mod inside it. If you will use more than one mode, you should use same key names for each mode.\n\nExample;\n\n```scss\n$modes: (\n dark: (\n mainColor: black,\n font: 'Roboto', sans-serif\n ),\n blueTheme: (\n mainColor: blue,\n font: 'Catamaran', sans-serif\n )\n);\n```","mdtype":"MDHTML","section":"dark-mode"},{"lang":"tr","title":"Karanlık Mod","markdown":"\n## Karanlık Modu Etkinleştirme\n\nGralig içerisinde hazır olarak gelen karanlık modu kullanmak için `.dark` classını kullanabilirsiniz. Projeyi kapsayan elementte ya da `body` etiketinde kullanın.\n\n```html\n\n\n\n```\n\n_Yukarıdan karanlık moda geçiş yaparak elementlerin bu modda nasıl göründüğünü görebilirsiniz._\n\n## Kullanılan Map\n\nAşağıdaki gibi bir scss map kullanıldı;\n\n```scss\n$modes: (\n dark: (\n transparentColor: $transparent, // değer olarak herhangi bir scss değişkeni ya da css yazarken kullandığınız herhangi bir değeri kullanabilirsiniz.\n colorMain: $color-main-dt,\n colorSecondary: $color-secondary-dt,\n colorBackground: $color-background-dt,\n colorFont: $color-font-dt,\n colorFontSecondary: $color-font-secondary-dt,\n colorFontButton: $color-button-font-dt,\n colorFontRevert: $color-font-revert-dt,\n colorBorder: $color-border-dt,\n colorBorderLight: $color-border-light-dt,\n colorCode: $color-code-dt,\n colorMute: $color-mute-dt,\n colorAlert: $color-alert-dt,\n colorAlertFont: $color-alert-font-dt,\n colorCardBg: $color-card-dt,\n colorLinkFont: $color-link-font-dt,\n colorLinkHover: $color-link-hover-dt,\n colorInputDisabled: $color-input-disabled-dt,\n colorInputPlaceholder: $color-input-placeholder-dt,\n colorLoadings: $color-main-dt,\n colorIcon: $color-background-dt\n )\n);\n```\n\n## SCSS İçerisinde Kullanımı\n\nİlgili `scss` dosyalarını import edin.\n\n```scss\n@import 'gralig/scss/abstracts/all.scss';\n@import 'gralig/scss/modes/modes.scss';\n```\n\n`moder` mixini ve `mode()` fonksiyonunu map dosyanızdaki ilgili key ile scss dosyanız içerisinde kullanabilirsiniz.\n\nÖrnek;\n\n```scss\n.subheading {\n color: $color-font-secondary;\n font-weight: $font-normal;\n @include moder($modes) {\n color: mode(\"colorFontSecondary\");\n }\n}\n```\n\n## Düzenlemek ya da Eklemek\n\nYeni bir mod oluşturmak isterseniz ya da hali hazırda olanı değiştirmek isterseniz, öncelikle `$modes` adında bir map oluşturup istediğiniz modları içerisine ekleyebilirsiniz. Birden çok mod ekleyecekseniz, her biri için aynı isimde keyler oluşturmalısınız.\n\nÖrnek;\n\n```scss\n$modes: (\n dark: (\n mainColor: black,\n font: 'Roboto', sans-serif\n ),\n blueTheme: (\n mainColor: blue,\n font: 'Catamaran', sans-serif\n )\n);\n```","mdtype":"MDHTML","section":"dark-mode"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/dark-mode/en.md","language":"tr","intl":{"language":"tr","languages":["en","tr"],"messages":{"404.pagenotfound":"Sayfa Bulunamadı","404.emptyroute":"Aradığınız sayfa muhtemelen değiştirildi ya da kaldırıldı.","404.gotodocs":"Dökümanlara Dön","404.gotohome":"Ana Sayfaya Dön","title":"Gralig CSS","description":"Sade, grimsi CSS Kütüphanesi","summary":"Gralig sade, gri tonlu bir CSS kütüphanesi. Bu kütüphaneyi başlangıç yardımcınız olarak kullanabilirsiniz.","author":"@erenesto","keywords":"css, css kütüphanesi, frontend, ui, tasarım, gri, basit css","pages.404":"Hata 404","pages.index":"Gralig CSS","pages.docs":"Gralig Dökümantasyonu","sidenavLinks.docs.name":"Giriş","sidenavLinks.colors.name":"Renkler","sidenavLinks.grid.name":"Izgara(Grid)","sidenavLinks.dark.name":"Karanlık Mod","sidenavLinks.vars.name":"Değişkenler","sidenavLinks.responsive.name":"Mobil Uyumluluk","sidenavLinks.utils.name":"Yardımcılar","sidenavLinks.typography.name":"Tipografi","sidenavLinks.button.name":"Buton","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Özel Inputlar","sidenavLinks.checkbox.name":"Onay Butonu","sidenavLinks.radio.name":"Radyo Buton","sidenavLinks.switch.name":"Anahtar","sidenavLinks.nav.name":"Navigasyon","sidenavLinks.navbar.name":"Navigasyon Barı","sidenavLinks.footer.name":"Altbilgi Barı","sidenavLinks.breadcrumb.name":"Gezinti Menüsü","sidenavLinks.card.name":"Kart","sidenavLinks.alert.name":"Uyarı","sidenavLinks.list.name":"Liste","sidenavLinks.table.name":"Tablo","sidenavLinks.dropdown.name":"Açılır Liste","sidenavLinks.progress.name":"İlerleme","sidenavLinks.loading.name":"Bekleme","sidenavLinks.modal.name":"Açılır Pencere","words.copy":"Kopyala","words.copied":"Kopyalandı!","words.docs":"Döküman","words.builtwith":"ile yapıldı."},"routed":true,"originalPath":"/docs/dark-mode","redirect":false,"defaultLanguage":"en"}}}, "staticQueryHashes": ["63159454"]}