Smf 2.1 RC2 Karanlık Mod Özelliği

Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
466
Tepkime puanı
88
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%);
}
 
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
 

Benzer konular

Geri
Üst Alt