Smf 2.1 RC2 Karanlık Mod Özelliği

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
461
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
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
278
Puanları
18
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
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
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
461
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.
 

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
461
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
Puanları
3
Konum
istanbul
bekliyorum kura bakamayın biz sadece basit kullanıcılarız ögreneceğiz inşallah
 
Üst Alt