avatar_orhan

Smf 2.1 RC2 Karanlık Mod Özelliği

Started by orhan, Jul 01, 2020, 05:54 PM

Previous topic - Next topic
Topic keywords [SEO] KaranlıkMod
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

echo '
</select>
<noscript>
<input type="submit" value="', $txt['quick_mod_go'], '">
</noscript>
</form>';
}

altına ekleyin

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

/ 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

$(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
/* iPhone Tests */
@media (max-width: 320px) {

}

üstüne ekleyin

#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

#top_section {
    background: #fff;
    background-image: linear-gradient(to bottom, #e2e9f3 0%, #fff 70%);
}

Biz bunu böyle değiştiriyoruz

[data-theme="dark"] #top_section {
    background: #161622;
    background-image: linear-gradient(to bottom, #161622 0%, #161622 70%);
}