Xenforo Dark Mode Switch (Karanlık mod)

Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

cakal

Yönetici
Katılım
5 Ara 2018
Mesajlar
516
Tepkime puanı
167
Puanları
43
Konum
izmir
Anlatım Default Temaya göre dir
Kodlardan anlamayanlar için ekte temanin orjinalini ekliyorum sürümü 2.2.12
dosyalar

extra.less
helper_js_global
PAGE_CONTAINER

PAGE_CONTAINER

Bul
HTML:
<xf:if is="!$noH1">
                            <h1 class="p-title-value">{$h1}</h1>
                        </xf:if>
Sonrasına Ekle
HTML:
<div class="toggle">
                        <input type="checkbox" class="custom-control-input" id="darkSwitch">
                        <label class="custom-control-label" for="darkSwitch">
                         <div class="icons">
                        <i class="fas fa-sun"></i>
                        <i class="fas fa-moon"></i>
                      </div>
                     </label>
                       </div>

helper_js_global

Bul
JavaScript:
<form style="display:none" hidden="hidden">
        <input type="text" name="_xfClientLoadTime" value="" id="_xfClientLoadTime" title="_xfClientLoadTime" tabindex="-1" />
    </form>

Öncesine ekle
JavaScript:
<script>
 $(function() {
     var html = $('#XF');
  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");
      }
    }
  }
});
    </script>

extra.less

CSS:
/* siyah beyaz */
.p-title .toggle {
    margin-right: 5px;
}
.toggle input[type='checkbox'] {
    display: none;
}
.toggle label {
    background-color: #fefefe;
    border: 2px solid #dfdfdf;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: all ease-in-out 0.3s;
    width: 68px;
    height: 33px;
}
.toggle label::after {
    background-color: ~"rgb(0 0 0 / 20%)";
    border-radius: 50%;
    content: ' ';
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 1.9px;
    left: 4px;
    transition: all ease-in-out 0.3s;
    width: 25px;
    height: 25px;
}
.toggle input[type='checkbox']:checked ~ label {
    background-color: #2577b1;
    border-color: #006dc9;
}

.toggle input[type='checkbox']:checked ~ label::after {
    background-color: ~"rgb(0 0 0 / 20%)";
    transform: translateX(35px);
}
.toggle .icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  margin: 0 5px;
}
.toggle .icons i {
  height: 30px;
  width: 30px;
  margin-top: 15px;
  z-index: 0;
}
.icons .fa-moon {
    z-index: 0;
    margin-left: 19px;
}
.icons .fa-sun {
   left: 4px;
}
.toggle .icons .fa-sun label::after {
    left: 4px;
}
/* dark color */
[data-theme="dark"] body {
    color: #c2cbd8;
    background-color: #101b2c;
}
[data-theme="dark"] .p-pageWrapper {
    background: #101b2c;
}
[data-theme="dark"] .p-header,
[data-theme="dark"] .p-nav,
[data-theme="dark"] .p-footer {
    color: #c2cbd8;
    background: #1b293f;
}
[data-theme="dark"] .p-nav-list .p-navEl.is-selected,
[data-theme="dark"] .blockLink.is-selected,
[data-theme="dark"] .blockLink:hover{
    background: #283c5a;
}
[data-theme="dark"] .memberOverviewBlock-seeMore {
    background: #283c5a;
    border: 1px solid #283c5a;
}
[data-theme="dark"] .p-sectionLinks {
    background: #283c5a;
    border-bottom: 1px solid #23334c;
}
[data-theme="dark"] .block--messages .block-container {
    background: none;
    border: none;
}
[data-theme="dark"] .block-container,
[data-theme="dark"] .menu-content,
[data-theme="dark"] .overlay,
[data-theme="dark"] .overlay-title,
[data-theme="dark"] .button.button--link,
[data-theme="dark"] a.button.button--link,
[data-theme="dark"] .block--messages .message,
[data-theme="dark"] .block--messages .block-row,
[data-theme="dark"] .userBanner.userBanner--staff,
[data-theme="dark"] .userBanner.userBanner--primary,
[data-theme="dark"] .tooltip--bookmark .tooltip-content,
[data-theme="dark"] .tooltip--member .tooltip-content,
[data-theme="dark"] .tooltip--share .tooltip-content,
[data-theme="dark"] .tabs--standalone,
[data-theme="dark"] .actionBar-action.actionBar-action--view,
[data-theme="dark"] .notice.notice--primary,
[data-theme="dark"] .reactionsBar,
[data-theme="dark"] .benzer-konular-resimli .block-container,
[data-theme="dark"] .benzerkonular-liste .block-container,
[data-theme="dark"] .benzerkonular-mobil .block-container {
    color: #c2cbd8;
    background: #1b293f;
    border-width: 1px;
    border-style: solid;
    border-color: #23334c;
}
[data-theme="dark"] .message-cell.message-cell--user,
[data-theme="dark"] .message-cell.message-cell--action {
    background: #283c5a;
    border-right: 1px solid #23334c;
}
[data-theme="dark"] .fr-toolbar .fr-btn-grp {
    border-color: #23334c;
}
[data-theme="dark"] .fr-toolbar .fr-command.fr-btn,
[data-theme="dark"] .fr-popup .fr-command.fr-btn,
[data-theme="dark"] .fr-modal .fr-command.fr-btn {
    color: #c2cbd8;
}
[data-theme="dark"] a,
[data-theme="dark"] .node-description,
[data-theme="dark"] .node-stats,
[data-theme="dark"] .node-icon i:before {
  color: #c2cbd8;
   
  &:hover {
  color: #c2cbd8;
 }
}
[data-theme="dark"] .node + .node,
[data-theme="dark"] .structItem,
[data-theme="dark"] .menu-separator,
[data-theme="dark"] .block-row.block-row--separated + .block-row,
[data-theme="dark"] .menu-row.menu-row--separated + .menu-row,
[data-theme="dark"] .formRowSep,
[data-theme="dark"] .memberHeader-separator,
[data-theme="dark"] .memberTooltip-separator,
[data-theme="dark"] .block-body + .block-minorHeader{
    border-top: 1px solid #23334c;
}
[data-theme="dark"] .node:nth-child(even),
[data-theme="dark"] .block-filterBar .filterBar-filterToggle:hover,
[data-theme="dark"] .block-filterBar .filterBar-menuTrigger:hover {
    background: #18263a;
}
.node:nth-child(even) {
    background: #f8f8f8;
}
[data-theme="dark"] .menu-tabHeader,
[data-theme="dark"] .menu-header,
[data-theme="dark"] .block-filterBar,
[data-theme="dark"] .memberTooltip-header,
[data-theme="dark"] .memberHeader-main {
    background: #1b293f;
    border-bottom: 1px solid #23334c;
}
[data-theme="dark"] .formRow > dt {
    background: #283c5a;
    border-color: #212a38;
}
[data-theme="dark"] .menu-row.menu-row--alt,
[data-theme="dark"] .menu-linkRow.menu-linkRow--alt,
[data-theme="dark"] .xgt-category-statistic {
    color: #fbf7f7;
    background: #283c5a;
}
[data-theme="dark"] .menu-footer,
[data-theme="dark"] .formSubmitRow-bar,
[data-theme="dark"] .block-footer,
[data-theme="dark"] .message-articleUserInfo {
    color: #fbf7f7;
    background: #283c5a;
    border-top: 1px solid #23334c;
}
[data-theme="dark"] .menu-linkRow.is-selected,
[data-theme="dark"] .menu-linkRow:hover,
[data-theme="dark"] .menu-linkRow:focus {
    color: #fbf7f7;
    background: #283c5a;
}
[data-theme="dark"] .input,
[data-theme="dark"] .fr-box.fr-basic {
    color: #fff;
    background: #283c5a;
    border: 1px solid #23334c;
}
[data-theme="dark"] .message-attribution {
    color: #fbf7f7;
    border-bottom: 1px solid #23334c;
}
[data-theme="dark"] .block-formSectionHeader {
    border-color: #212a38;
}
[data-theme="dark"] .fr-box.fr-basic .fr-element {
    color: #f3eded;
}
[data-theme="dark"] .fr-wrapper ::selection {
    background: #bcdef5;
    color: #f3eded;
}
[data-theme="dark"] ::placeholder,
[data-theme="dark"] .input:focus::-webkit-input-placeholder,
[data-theme="dark"] .input.is-focused::-webkit-input-placeholder,
[data-theme="dark"] .fr-wrapper .fr-placeholder {
  color: #8c8c8c;
}
[data-theme="dark"] .fr-box.fr-basic.is-focused .fr-toolbar.fr-top {
  background: linear-gradient(180deg, #283c5a, #283c5a);
}
[data-theme="dark"] .fr-box.fr-basic.is-focused {
    background: #1b293f;
}

[data-theme="dark"] .message-userArrow {
    border-right-color: #1b293f;
   
    &:after {
    border-right-color: #1b293f;
  }
}
[data-theme="dark"] .message--solution .message-cell.message-cell--vote,
[data-theme="dark"] .message-cell.message-cell--vote {
    background: #283c5a;
    border-left: 1px solid #283c5a;
}
[data-theme="dark"] .pageNav-page,
[data-theme="dark"] .pageNav-jump,
[data-theme="dark"] .tagItem {
    background: linear-gradient(0deg, #283c5a, #283c5a);
    color: #fefefe;
    border-color: #23334c;
 
}
[data-theme="dark"] .bbCodeBlock {
    background: #283c5a;
    border: 1px solid #23334c;
    border-left: 3px solid #f2930d;
}
[data-theme="dark"] .bbCodeBlock-title {
    color: #f2930d;
    background: #23334c;
}
[data-theme="dark"] .p-body-header {
    color: #fff;
}
[data-theme="dark"] .block-header {
    color: #fff;
    background: #283c5a;
    border-bottom: 1px solid #23334c;
    background: linear-gradient(0deg, #283c5a, #23334c);
}
[data-theme="dark"] .fr-toolbar .fr-more-toolbar,
[data-theme="dark"] .fr-toolbar .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active) {
    background-color: #23334c;
}
[data-theme="dark"] .formRow.formRow--fullWidth + .formRow,
[data-theme="dark"] .menu .formRow + .formRow,
[data-theme="dark"] .formRow + .formRow.formRow--fullWidth,
[data-theme="dark"] .formRow + .menu .formRow,
[data-theme="dark"] .formRow.formRow--fullWidth + * > .formRow:first-of-type,
[data-theme="dark"] .menu .formRow + * > .formRow:first-of-type,
[data-theme="dark"] .formRow + * > .formRow.formRow--fullWidth:first-of-type,
[data-theme="dark"] .formRow + * > .menu .formRow:first-of-type {
    border-top: 1px solid #283c5a;
}
[data-theme="dark"] .codeEditor.CodeMirror,
[data-theme="dark"] .codeEditor.CodeMirror.CodeMirror-focused {
    color: #fefefe;
    background: #283c5a;
    border: 1px solid #283c5a;

}

liht-dark.jpg
 

Ekli dosyalar

  • style-Gece.zip
    11 KB · Görüntüleme: 12

Geri
Üst Alt