Smf 2.1 RC2 Karanlık Mod Özelliği

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
466
Tepkime puanı
92
Puanları
28
Son zamanlarda popüler bir uygulama ben de smf temalarıma kullanabiliyorum isteyen kendi temasına uygulaya bilir ben defult tema için anlatayım

teman izin index-templete.php sini açın şunu bulun

Kod:
echo '
				</select>
				<noscript>
					<input type="submit" value="', $txt['quick_mod_go'], '">
				</noscript>
			</form>';
	}

altına ekleyin

Kod:
echo '
	<ul class="p-nav-opposite floatright">
 <li class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="darkSwitch">
            <label class="custom-control-label" for="darkSwitch"></label>
          </li>
        </ul>';

temanizin scripts kilasorunden theme.js yi acin bulun

Kod:
/ Add a load event for the function above.
addLoadEvent(smc_toggleImageDimensions);

function smf_addButton(stripId, image, options)
{
	$('#' + stripId).append(
		'<a href="' + options.sUrl + '" class="button last" ' + ('sCustom' in options ? options.sCustom : '') + ' ' + ('sId' in options ? ' id="' + options.sId + '_text"' : '') + '>'
			+ options.sText +
		'</a>'
	);
}

sonrasına ekleyin

Kod:
$(function() {
  var darkSwitch = document.getElementById("darkSwitch");
  if (darkSwitch) {
    initTheme();
    darkSwitch.addEventListener("change", function(event) {
      resetTheme();
    });
    function initTheme() {
      var darkThemeSelected =
        localStorage.getItem("darkSwitch") !== null &&
        localStorage.getItem("darkSwitch") === "dark";
      darkSwitch.checked = darkThemeSelected;
      darkThemeSelected
        ? document.body.setAttribute("data-theme", "dark")
        : document.body.removeAttribute("data-theme");
    }
    function resetTheme() {
      if (darkSwitch.checked) {
        document.body.setAttribute("data-theme", "dark");
        localStorage.setItem("darkSwitch", "dark");
      } else {
        document.body.removeAttribute("data-theme");
        localStorage.removeItem("darkSwitch");
      }
    }
  }
});

şimdi css kilasorunden responsive.css dosyam izi acalim

bul
Kod:
/* iPhone Tests */
@media (max-width: 320px) {

}

üstüne ekleyin

Kod:
#main_menu .p-nav-opposite {
    cursor: pointer;
    position: relative;
    right: 0px;
    top: 50%;
    height: 30px;
    line-height: 30px;
    margin-top: -20px;
    color: #fff;
    z-index: 20;
    font-size: 12px;
    border-radius: 4px;
}

.custom-switch {
    padding-left: 2.25rem;
}
.p-nav-opposite {
    margin-left: auto;
    margin-right: 10px;
    text-align: right;
    flex-shrink: 0;
    margin: 0 0 0 10px;
}

input[type="radio"], input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}
.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.custom-control-label {
    position: relative;
    cursor: pointer;
}
label {
    display: inline-block;
    margin-bottom: 0.5rem;
}
.custom-switch .custom-control-label::before {
    left: -2.25rem;
    width: 1.85rem;
    pointer-events: all;
    border-radius: 0.5rem;
}
.custom-switch .custom-control-label::after {
    top: calc(0.36rem + -3px);
    left: calc(-2.2rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #f6f6f6;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}
.custom-control-label::after {
    position: absolute;
    top: 0.1rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50% / 50% 50%;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #4d90fe;
    background-color: #4d90fe;
}
.custom-control-label::before, .custom-file-label, .custom-select {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.custom-control-label::before {
    position: absolute;
    top: -1px;
    left: -1.5rem;
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    pointer-events: none;
    content: "";
    background-color: #4DB7FE;
    border: #808285 solid 1px;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    -webkit-transform: translateX(0.75rem);
    transform: translateX(0.75rem);
}

[data-theme="dark"] {
  background: #161622 !important;
  color: #eee;
}

[data-theme="dark"] .bg-light {
  background: #333 !important;
}

[data-theme="dark"] .bg-white {
  background: #000 !important;
}

[data-theme="dark"] .bg-black {
  background: #eee !important;
}
[data-theme="dark"] #main {
    background: #161622;
}

Ben Kabaca Anlatım gerisi size kalmış dikkat etmemiz gereken  Örnek Temamizin Heder kisminin rengi orijinal bu

Kod:
#top_section {
    background: #fff;
    background-image: linear-gradient(to bottom, #e2e9f3 0%, #fff 70%);
}

Biz bunu böyle değiştiriyoruz

Kod:
[data-theme="dark"] #top_section {
    background: #161622;
    background-image: linear-gradient(to bottom, #161622 0%, #161622 70%);
}


 
denedim buton geldi ama olmadı siyah yazılar kayboluyor bzı bölümelerin
 
denedim buton geldi ama olmadı siyah yazılar kayboluyor bzı bölümelerin
Merhaba tema css renk dosyalarını düzenlemeniz lazi bunun gibi
CSS:
[data-theme="dark"] #top_section {
    background: #161622;
    background-image: linear-gradient(to bottom, #161622 0%, #161622 70%);
}
 
ben rc4 de denedim ondan olmadı sanırım
 
denedim yine olmadı bak video da çektim yaparken

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Ben hata yapmadım sanırım ama bir yerde sorun var galiba üstat sizsiniz :)
 
Videonun kalitesini yükselterek bakabirsin açılışta bulanık çıkıyor ayarlamamışım
 
Videonun kalitesini yükselterek bakabirsin açılışta bulanık çıkıyor ayarlamamışım
örnek veriyorum videoda gösterdiğin yerin kodu bu
CSS:
body {
    background: #e9eef2;
    font: 83.33%/150% "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
    color: #4d4d4d;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
senin yapman gereken boyle bir kod eklemek

CSS:
[data-theme="dark"] body {
  background: #161622 !important;
  color: #eee;
}
renkleri kendine göre ayarla diğer renklerimde başına [data-theme="dark"] ekleyerek düzenle.
 
hee anlatmak istemiş zaten çakalda çok sagol kafa gitti :) deneyeceğim
 
denedim olmadı yine yazı renkeleride background rekleride olumsuz
To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
 
Merhaba ilk fırsatta detaylı yapa bileceğiniz şekilde bir anlatım yapayım.
 
bekliyorum kura bakamayın biz sadece basit kullanıcılarız ögreneceğiz inşallah
 
kodlarda eksiklik var sanırım karanlık mod butonu yukarıda çıkmıyor kara kutucuk çıkıyor kodları güncellemeniz lazım
 

Yasal Uyarı

İçerik sağlayıcı paylaşım sitesi olarak hizmet veren webtiryakin.com 5651 sayılı kanunun 8. maddesine ve T.C.Knın 125. maddesine göre tüm üyelerimiz yaptıkları paylaşımlardan kendileri sorumludur. Hukuka ve mevzuata aykırı olduğunu düşündüğünüz içeriği BURADAN bildirebilirsiniz. Kısa sürede dönüş yapmaya çalışacağız.
Geri
Üst