Smf 2.0 Karanlık Mod Özelliği

[orhan]

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

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />

altına ekleyin

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

Bulun

// Here comes the JavaScript bits!
 echo '

Sonrasına ekleyin

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

index-templete.php de

Bulun

}

 echo '
 </ul>

sonrasına ekleyin

<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

// 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

$(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

#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]

ellerinize emeğinize sağlık. muazzam bir paylaşım oldu eminim ki bir çok smf kullanıcısı bunu kendi sitesine uygulayacaktır.

 

[medeniyetmuhendisi]

İ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]

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

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

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

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

örnek windowbg kodunuz bu

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

yapmamiz gereken

[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.