Xenforo Dark Mode Switch (Karanlık mod)

[cakal]

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

<xf:if is="!$noH1">
                            <h1 class="p-title-value">{$h1}</h1>
                        </xf:if>

Sonrasına Ekle

<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

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

Öncesine ekle

<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

Spoiler: Kod

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

}