Merhaba, tekrar hoş geldiniz!

Tüm özelliklerimize erişmek için şimdi bize katılın. Kaydolduktan ve giriş yaptıktan sonra, konu oluşturabilir, mevcut konulara yanıt gönderebilir, diğer üyelerinize itibar kazandırabilir, kendi özel mesajcınızı alabilir ve çok daha fazlasını yapabilirsiniz. Ayrıca hızlı ve tamamen ücretsiz, o halde ne bekliyorsunuz?

Smf 2.0 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

tema css kilasorune siyah diye bir css oluşturun teman izin index-templete.php sini açın şunu bulun
Kod:
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />
altına ekleyin

Kod:
<link rel="stylesheet" href="', $settings['theme_url'], '/css/siyah.css" />

Bulun
Kod:
// Here comes the JavaScript bits!
 echo '
Sonrasına ekleyin

Kod:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

index-templete.php de

Bulun
Kod:
}

 echo '
 </ul>

sonrasına ekleyin
Kod:
<ul class="p-nav-opposite">
 <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 hover events to list items if the browser requires it.
if (is_ie7down && 'attachEvent' in window)
 window.attachEvent('onload', smf_addListItemHoverEvents);

üstüne 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 siyah.css dosyam izi acalim bu kodları ekleyelim

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

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 sadece Temanin arka background rengini değiştirmeyi gösterdim her tema farklılık gösterir siz ona göre düzenleyin

Demo


 

medeniyetmuhendisi

Kayitli Üye
Katılım
11 Ara 2018
Mesajlar
15
Tepkime puanı
0
Puanları
1
Yaş
1018
Web sitesi
www.medeniyetmuhendisleri.com
İyi günler orhan hocam. Kendi sitem için bir index.css dosyası oluşturdum. koyu moda geçerken bu index dosyasını kullanmasını istiyorum. ama beceremedim. css dosyam ekte

index temlate ve theme.js dosyalarında belirtilen düzeltmeleri yaptım.
 

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
464
Tepkime puanı
71
Puanları
28
Merhaba sanirim NightBreeze Theme kulaniyorsunuz ben defulta baska bir steyle css olmadigi icin ayri bir sitil dosyasi olusturun dedim sizin kulandiginiz temada cok fazla sitil dosyasi var haliyle yeni bir dosyaya gerek yok temanizin responsive.css dosyasini acin css kodlarini ekleyin simdi sizin kulandiginiz tema siyah bir tema sizin temanizin arka alan renk kodu bu

Kod:
body {
    background: #010714;
    font: 78%/130% Roboto,Verdana,Arial,Helvetica,sans-serif;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

yapmaniz gereken

Kod:
[data-theme="dark"] body {
    background: #fff;
}

dikat edin kodun basina [data-theme="dark"] kodunu ekledik

örnek windowbg kodunuz bu

Kod:
.windowbg, #preview_body {
    color: #a4a4a4;
    background-color: #1c2432;
}

yapmamiz gereken

Kod:
[data-theme="dark"] .windowbg, [data-theme="dark"] #preview_body {
    color: #000;
    background-color: #fff;
}

yazimda cok sayida cümle hatasi var ingilizce aypet kulaniyorum cevirme sansim yok.
 

Benzer konular

Üst Alt