Smf 2.1 RC2 Karanlık Mod Özelliği


orhan

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


 

kingvalls

Kayıtlı Üye
Katılım
3 Eyl 2021
Mesajlar
23
Tepkime puanı
3
Puanları
3
Konum
istanbul
denedim buton geldi ama olmadı siyah yazılar kayboluyor bzı bölümelerin
 

cakal

Yönetici
Katılım
5 Ara 2018
Mesajlar
348
Tepkime puanı
63
Puanları
28
Konum
izmir
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

Kayıtlı Üye
Katılım
3 Eyl 2021
Mesajlar
23
Tepkime puanı
3
Puanları
3
Konum
istanbul
denedim yine olmadı bak video da çektim yaparken


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

kingvalls

Kayıtlı Üye
Katılım
3 Eyl 2021
Mesajlar
23
Tepkime puanı
3
Puanları
3
Konum
istanbul
Videonun kalitesini yükselterek bakabirsin açılışta bulanık çıkıyor ayarlamamışım
 

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
464
Tepkime puanı
71
Puanları
28
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

Kayıtlı Üye
Katılım
3 Eyl 2021
Mesajlar
23
Tepkime puanı
3
Puanları
3
Konum
istanbul
hee anlatmak istemiş zaten çakalda çok sagol kafa gitti :) deneyeceğim
 

kingvalls

Kayıtlı Üye
Katılım
3 Eyl 2021
Mesajlar
23
Tepkime puanı
3
Puanları
3
Konum
istanbul
denedim olmadı yine yazı renkeleride background rekleride olumsuz
 

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
464
Tepkime puanı
71
Puanları
28
Merhaba ilk fırsatta detaylı yapa bileceğiniz şekilde bir anlatım yapayım.
 

kingvalls

Kayıtlı Üye
Katılım
3 Eyl 2021
Mesajlar
23
Tepkime puanı
3
Puanları
3
Konum
istanbul
bekliyorum kura bakamayın biz sadece basit kullanıcılarız ögreneceğiz inşallah
 

replikacep

Kayıtlı Üye
Katılım
15 Ara 2018
Mesajlar
170
Tepkime puanı
15
Puanları
18
Yaş
1018
Web sitesi
www.replikacep.com
kodlarda eksiklik var sanırım karanlık mod butonu yukarıda çıkmıyor kara kutucuk çıkıyor kodları güncellemeniz lazım
 
Üst Alt