Smf 2.1 RC2 Karanlık Mod Özelliği

orhan · 1 Tem 2020

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%);
}

replikacep · 3 Tem 2020

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

kingvalls · 4 Eyl 2021

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

cakal · 4 Eyl 2021

kingvalls' Alıntı:
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%);
}

kingvalls · 4 Eyl 2021

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

cakal · 5 Eyl 2021

kingvalls' Alıntı:
ben rc4 de denedim ondan olmadı sanırım

Farketmez mantik ayni
bu temayı incele

CSS:

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

kingvalls · 5 Eyl 2021

denedim yine olmadı bak video da çektim yaparken

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

kingvalls · 5 Eyl 2021

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

orhan · 5 Eyl 2021

kingvalls' Alıntı:
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.

kingvalls · 5 Eyl 2021

hee anlatmak istemiş zaten çakalda çok sagol kafa gitti

deneyeceğim

kingvalls · 5 Eyl 2021

denedim olmadı yine yazı renkeleride background rekleride olumsuz

orhan · 5 Eyl 2021

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

kingvalls · 5 Eyl 2021

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

replikacep · 26 Şub 2022

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

orhan · 27 Şub 2022

replikacep' Alıntı:
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.

Smf 2.1 RC2 Karanlık Mod Özelliği

We value your privacy