Smf 2.1 RC2 Karanlık Mod Özelliği

[orhan]

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

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

altına ekleyin

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

/ 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

$(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

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

}

üstüne ekleyin

#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

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

Biz bunu böyle değiştiriyoruz

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

 

[replikacep]

Güzel paylaşım teşekkürler

 

[kingvalls]

denedim buton geldi ama olmadı siyah yazılar kayboluyor bzı bölümelerin

 

[cakal]

denedim buton geldi ama olmadı siyah yazılar kayboluyor bzı bölümelerin

Merhaba tema css renk dosyalarını düzenlemeniz lazi bunun gibi

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

 

[kingvalls]

ben rc4 de denedim ondan olmadı sanırım

 

[cakal]

ben rc4 de denedim ondan olmadı sanırım

Farketmez mantik ayni
bu temayı incele

[data-theme="dark"] .ilgili alan {
    background/yada/color: renkkodunun siyaha cevir #000; 
}

 

[kingvalls]

denedim yine olmadı bak video da çektim yaparken

Bu içeriği görüntülemek için üçüncü taraf çerezlerini ayarlamak üzere izninize ihtiyacımız olacak.
Daha ayrıntılı bilgi için çerezler sayfamıza bakın.

Üçüncü taraf tanımlama bilgilerini kabul et

Ben hata yapmadım sanırım ama bir yerde sorun var galiba üstat sizsiniz

 

[kingvalls]

Videonun kalitesini yükselterek bakabirsin açılışta bulanık çıkıyor ayarlamamışım

 

[orhan]

Videonun kalitesini yükselterek bakabirsin açılışta bulanık çıkıyor ayarlamamışım

örnek veriyorum videoda gösterdiğin yerin kodu bu

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

[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.

 

[kingvalls]

hee anlatmak istemiş zaten çakalda çok sagol kafa gitti deneyeceğim

 

[kingvalls]

denedim olmadı yine yazı renkeleride background rekleride olumsuz

Bu içeriği görüntülemek için üçüncü taraf çerezlerini ayarlamak üzere izninize ihtiyacımız olacak.
Daha ayrıntılı bilgi için çerezler sayfamıza bakın.

Üçüncü taraf tanımlama bilgilerini kabul et

 

[orhan]

Merhaba ilk fırsatta detaylı yapa bileceğiniz şekilde bir anlatım yapayım.

 

[kingvalls]

bekliyorum kura bakamayın biz sadece basit kullanıcılarız ögreneceğiz inşallah

 

[replikacep]

kodlarda eksiklik var sanırım karanlık mod butonu yukarıda çıkmıyor kara kutucuk çıkıyor kodları güncellemeniz lazım

 

[orhan]

kodlarda eksiklik var sanırım karanlık mod butonu yukarıda çıkmıyor kara kutucuk çıkıyor kodları güncellemeniz lazım

merhaba bir hata görünmüyor lakin yeniden düzenlenmesi gereke bilir.