Nasıl yapılır ? Karanlik Mod Özeliği Eklemek?

gecitli · 18 Şub 2022

Merhaba xenforo ya karanlık mod özeliği eklemek istiyorum bunu yaparken ayrı ayrı temalar kullanmak istemiyorum zira bu çok anlamsız yapmak istediğim js/css ile bunu yapmak

js

JavaScript:

$(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");
        }
      }
    }

css

CSS:

[data-theme="dark"] {
     --dark-color: #323a45;
     --color-fff: #000000;
    --color-10: #3e5a78;
     --color-100: #212121;
     --color-200: #262727;
    --color-200-s: #262727;
     --color-300: #616161;
     --color-400: #757575;
     --color-500: #8f8f8f;
     --color-600: #bdbdbd;
     --color-700: #e0e0e0;
     --color-800: #eeeeee;
     --color-900: #f0f0f0;
     --color-000: #ffffff;
     --border-color: #494c62;
    --border-color-s: #353535;
     --card-color: #262727;
     --body-color: #383b50;
     --white-color: #ffffff;
     --sidebar-color: #fcfcfc;
     --text-color: #d9dae9;
    --text-color-a: #292525;
     --hc-font-color: #555555;
     --hc-bg-color: rgb(0 0 0 / 10%);
    --border-bottom: #494c62;
    --main-menu: #323448;
    --table-color: #333549;
    --bg-color: #333549;
    --head-color: #3f4257;
    --head-renk: #b46100;
    --cell-user: #383b50;
    --user-Arrow: #333549;
    --Arrow-after: #333549;
    --children: #383b50;
     --poster: #333549;
     --poster-left: #2c2e40;
     --ulke: #333549;
     --ulke-s: #3f4257;     
}

kodlar gayet uyumlu çalışıyor sorun benim xenforo renk kodlarını bilmemem bunlara nasıl ulaşırım.

netr0n · 18 Şub 2022

Tema özellikleri alanında temel renkler ve renk paleti alanından ya da o alanda kendi renk paletinizi yeniden oluşturabilirsiniz.

Monarch · 18 Şub 2022

Merhaba gecitli Aşağıdaki Anlatımı Harfiyen Uygularsan Tek Tema İçinde Cif Tema Kullanabilirsin.

1- Page Conteiner şablonu'nu açın head etiketin üstüne aşağıdaki kodu ekleyin.

JavaScript:

<script type="text/javascript">   
(function(window, document, undefined) { 
'use strict';   
if (!('localStorage' in window)) return;   
var darkmode = localStorage.getItem('darkmode');   
if (darkmode) {
document.documentElement.className += ' nightmode';
}
})(window, document);   
</script>

2- Page Conteiner şablonu'nu açın <body> </html> etiketin altına aşağıdaki kodu ekleyin.

JavaScript:

<script type="text/javascript">   
document.addEventListener('DOMContentLoaded',function() {
'use strict';
if (!('localStorage' in window)) return;   
var darkmode = document.querySelector('#nightmode');   
if (!darkmode) return;   
darkmode.addEventListener('click', function (event) {
event.preventDefault();
document.documentElement.classList.toggle('nightmode');
if ( document.documentElement.classList.contains('nightmode') ) {
localStorage.setItem('darkmode', true);
return;
}
localStorage.removeItem('darkmode');
}, false);
});
</script>

3- Page Container şablonu'nu açın Gece / Gündüz Mod iconun nerede görünmesini isterseniz o alana ekleyin.

XML:

<a  id="nightmode" data-xf-init="tooltip" data-original-title="gecegunduz"
class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--night">
<i aria-hidden="true"></i> </a>

4- system.less isimli şablon oluşturun aşağıdaki CSS kodlarını ekleyin.

CSS:

:root {
  --strdarkbuton: "\f186";
  --strdarkbutoncolor: #fefefe;
}

.nightmode:root {
  --strdarkbuton: "\f185";
  --strdarkbutoncolor: rgb(7, 224, 183);
  --strnavbg: linear-gradient(to bottom, rgb(29,35,51) -100%, rgb(22, 27, 40) 100%);
}
 
:root {
@media (max-width: @xf-responsiveNarrow){--responsive: 'Narrow';}
@media (min-width: (@xf-responsiveWide + 1px)){--responsive: 'Full';}
@media (min-width: (@xf-responsiveMedium + 1px)) and (max-width: @xf-responsiveWide){--responsive: 'Wide';}
@media (min-width: (@xf-responsiveNarrow + 1px)) and (max-width: @xf-responsiveMedium){--responsive: 'Medium';}
    
--STR-Elite-Style: 'v1.2';
--XenForo-Version: 'v2.2.8 Pach-1';
--Powered-by-StarTR: 'www.startr.org';
}

5- nightmode.less isimli şablon oluşturun aşağıdaki CSS kodlarını ekleyin.

CSS:

// tema degistir butonu
.nightmode .p-navgroup-link.p-navgroup-link--night i::after {
content: var(--strdarkbuton);display: inline-block;
width: .88em; opacity: .6;color: var(--strdarkbutoncolor);}

// navbar bg
.nightmode .p-nav {background: var(--strnavbg);}

6- extra.less isimli şablon açın aşağıdaki CSS kodlarını ekleyin.

CSS:

{{ include('system.less') }}
{{ include('nightmode.less') }}

// tema degistir butonu
.p-navgroup-link.p-navgroup-link--night i:after {
content: var(--strdarkbuton);display: inline-block;
width: .88em;opacity: .6;color: var(--strdarkbutoncolor);}

murogram · 21 Şub 2022

Monarch' Alıntı:

Merhaba gecitli Aşağıdaki Anlatımı Harfiyen Uygularsan Tek Tema İçinde Cif Tema Kullanabilirsin.

1- Page Conteiner şablonu'nu açın head etiketin üstüne aşağıdaki kodu ekleyin.

JavaScript:

<script type="text/javascript">  
(function(window, document, undefined) {
'use strict';  
if (!('localStorage' in window)) return;  
var darkmode = localStorage.getItem('darkmode');  
if (darkmode) {
document.documentElement.className += ' nightmode';
}
})(window, document);  
</script>

2- Page Conteiner şablonu'nu açın <body> </html> etiketin altına aşağıdaki kodu ekleyin.

JavaScript:

<script type="text/javascript">  
document.addEventListener('DOMContentLoaded',function() {
'use strict';
if (!('localStorage' in window)) return;  
var darkmode = document.querySelector('#nightmode');  
if (!darkmode) return;  
darkmode.addEventListener('click', function (event) {
event.preventDefault();
document.documentElement.classList.toggle('nightmode');
if ( document.documentElement.classList.contains('nightmode') ) {
localStorage.setItem('darkmode', true);
return;
}
localStorage.removeItem('darkmode');
}, false);
});
</script>

3- Page Container şablonu'nu açın Gece / Gündüz Mod iconun nerede görünmesini isterseniz o alana ekleyin.

XML:

<a  id="nightmode" data-xf-init="tooltip" data-original-title="gecegunduz"
class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--night">
<i aria-hidden="true"></i> </a>

4- system.less isimli şablon oluşturun aşağıdaki CSS kodlarını ekleyin.

CSS:

:root {
  --strdarkbuton: "\f186";
  --strdarkbutoncolor: #fefefe;
}

.nightmode:root {
  --strdarkbuton: "\f185";
  --strdarkbutoncolor: rgb(7, 224, 183);
  --strnavbg: linear-gradient(to bottom, rgb(29,35,51) -100%, rgb(22, 27, 40) 100%);
}
 
:root {
@media (max-width: @xf-responsiveNarrow){--responsive: 'Narrow';}
@media (min-width: (@xf-responsiveWide + 1px)){--responsive: 'Full';}
@media (min-width: (@xf-responsiveMedium + 1px)) and (max-width: @xf-responsiveWide){--responsive: 'Wide';}
@media (min-width: (@xf-responsiveNarrow + 1px)) and (max-width: @xf-responsiveMedium){--responsive: 'Medium';}
   
--STR-Elite-Style: 'v1.2';
--XenForo-Version: 'v2.2.8 Pach-1';
--Powered-by-StarTR: 'www.startr.org';
}

5- nightmode.less isimli şablon oluşturun aşağıdaki CSS kodlarını ekleyin.

CSS:

// tema degistir butonu
.nightmode .p-navgroup-link.p-navgroup-link--night i::after {
content: var(--strdarkbuton);display: inline-block;
width: .88em; opacity: .6;color: var(--strdarkbutoncolor);}

// navbar bg
.nightmode .p-nav {background: var(--strnavbg);}

6- extra.less isimli şablon açın aşağıdaki CSS kodlarını ekleyin.

CSS:

{{ include('system.less') }}
{{ include('nightmode.less') }}

// tema degistir butonu
.p-navgroup-link.p-navgroup-link--night i:after {
content: var(--strdarkbuton);display: inline-block;
width: .88em;opacity: .6;color: var(--strdarkbutoncolor);}

Hocam merhabalar,

Bunu tüm tema için uyumlu hale getirebilir miyiz? Ben denediğimde sadece navigasyon için karanlık tema aktif oluyor. Kullandığım temanın dark modu ne yazık ki aynı değil ve üyeler dark mod istiyorlar.

Monarch · 22 Şub 2022

Merhaba navbar'ı örnek ekledim. sizin yapacağınız Karanlık tasarım. nightmode.less şablonu üzerinden yürümek olacak, istediğin alanı CSS ile tasarlayıp nightmode.less şablonuna ekliyeceksiniz veya extra.less şablonunada ekleyebilirsiniz. Ancak kafa karışmasın DARK ile LİGHT temanın CSS kodları ayrı yerlerde durması kendi şablonlarını kullanmanız daha faydalıdır.

Öncelikle; system.less şablonu içine gelin, nightmode:root satırın altına Karanlık temanın ana kodlarını ekleyeceksiniz, daha sonra bu kodları nightmode.less'e ekleyeceksiniz yani tasarlamak istediğiniz alanları önce system.less şablonuna ekleyin ardından kısa başlıklar ile nightmode.less şablonuna yazacaksınız.

Örnek: system.less şablonun içi
.nightmode:root {
--strtitleclr: rgb(154, 164, 191);
--strtitlebg: linear-gradient(45deg, rgb(29,35,51) 0%, rgb(22, 27, 40) 70%, rgb(29,35,51) 100%);

nightmode.less şablonun içi
.nightmode .p-title {
color: var(--strtitleclr);
background: var(--strtitlebg);}

Bu anlatımlar Gündüz tasarımı içinde geçerlidir. system.less içindeki :root { alanını LİGHT tema için kullanabilir, kodlarınıda extra.less şablonuna ekleyebilirsiniz veya onada lightmode.less şablonu oluşturup veya farklı bir isim ile oluşturup gündüz tasarım kodlarını ekleyebilirsiniz.

murogram · 22 Şub 2022

Monarch' Alıntı:
Merhaba navbar'ı örnek ekledim. sizin yapacağınız Karanlık tasarım. nightmode.less şablonu üzerinden yürümek olacak, istediğin alanı CSS ile tasarlayıp nightmode.less şablonuna ekliyeceksiniz veya extra.less şablonunada ekleyebilirsiniz. Ancak kafa karışmasın DARK ile LİGHT temanın CSS kodları ayrı yerlerde durması kendi şablonlarını kullanmanız daha faydalıdır.

Öncelikle; system.less şablonu içine gelin, nightmode:root satırın altına Karanlık temanın ana kodlarını ekleyeceksiniz, daha sonra bu kodları nightmode.less'e ekleyeceksiniz yani tasarlamak istediğiniz alanları önce system.less şablonuna ekleyin ardından kısa başlıklar ile nightmode.less şablonuna yazacaksınız.

Örnek: system.less şablonun içi
.nightmode:root {
--strtitleclr: rgb(154, 164, 191);
--strtitlebg: linear-gradient(45deg, rgb(29,35,51) 0%, rgb(22, 27, 40) 70%, rgb(29,35,51) 100%);

nightmode.less şablonun içi
.nightmode .p-title {
color: var(--strtitleclr);
background: var(--strtitlebg);}

Bu anlatımlar Gündüz tasarımı içinde geçerlidir. system.less içindeki :root { alanını LİGHT tema için kullanabilir, kodlarınıda extra.less şablonuna ekleyebilirsiniz veya onada lightmode.less şablonu oluşturup veya farklı bir isim ile oluşturup gündüz tasarım kodlarını ekleyebilirsiniz.

Yorumunuz için teşekkür ederim henüz o kadar bilgili değilim kodları okuyamıyorum. Bolt tema kullanıyorum elinizde hazır hali olma olasılığı nedir?

Monarch · 22 Şub 2022

Var ama ziyaretcilere kapalı bir kısmıda kayıtlı kullanıcılara kapalı tam kısmı özel üye grublarına aktif malesef devir böyle artık çalan çalana sağdan soldan bacadan girip CTRL + U yapıp sayfa kaynağna bakmalar, ne bilim öğeyi denetle yapanlar çoğaldı artık malesef bu konuda yardımcı olamıyacağım. Yukarıdaki anlatımı detaylıca takip edersen istediğin tasarım muhakkak yapacaksın.

Sis · 16 Mar 2022

Monarch' Alıntı:
Merhaba navbar'ı örnek ekledim. sizin yapacağınız Karanlık tasarım. nightmode.less şablonu üzerinden yürümek olacak, istediğin alanı CSS ile tasarlayıp nightmode.less şablonuna ekliyeceksiniz veya extra.less şablonunada ekleyebilirsiniz. Ancak kafa karışmasın DARK ile LİGHT temanın CSS kodları ayrı yerlerde durması kendi şablonlarını kullanmanız daha faydalıdır.

Öncelikle; system.less şablonu içine gelin, nightmode:root satırın altına Karanlık temanın ana kodlarını ekleyeceksiniz, daha sonra bu kodları nightmode.less'e ekleyeceksiniz yani tasarlamak istediğiniz alanları önce system.less şablonuna ekleyin ardından kısa başlıklar ile nightmode.less şablonuna yazacaksınız.

Örnek: system.less şablonun içi
.nightmode:root {
--strtitleclr: rgb(154, 164, 191);
--strtitlebg: linear-gradient(45deg, rgb(29,35,51) 0%, rgb(22, 27, 40) 70%, rgb(29,35,51) 100%);

nightmode.less şablonun içi
.nightmode .p-title {
color: var(--strtitleclr);
background: var(--strtitlebg);}

Bu anlatımlar Gündüz tasarımı içinde geçerlidir. system.less içindeki :root { alanını LİGHT tema için kullanabilir, kodlarınıda extra.less şablonuna ekleyebilirsiniz veya onada lightmode.less şablonu oluşturup veya farklı bir isim ile oluşturup gündüz tasarım kodlarını ekleyebilirsiniz.

XF 2 default temasını kullanıyorum. Şimdi benim tam olarak hangi kodlardan yola çıkarak temanın bütün heryerini gece modu olarak ayarlıyabilirim ? Komple siyah yapmayacağım siyah genelde çok karanlık duruyor. R10 gece modu renklerini kullanıcam. Bu konuda yardımcı olabilirsen çok bakbule geçer

Hatta yaparım dersen vaktin varsa anydesk/Team verebilirim

Kendim el atarsam %80 bi yerleri bozarım.

Monarch · 16 Mar 2022

Merhaba Sis anlatımı sırasıyla uygularsan işlemler gerçekleşecektir. yapamassan yardımcı oluruz sorun değil.

Sis · 16 Mar 2022

Monarch' Alıntı:
Merhaba Sis anlatımı sırasıyla uygularsan işlemler gerçekleşecektir. yapamassan yardımcı oluruz sorun değil.

İşte bende yaparım derken bi yerleri bozmayalım açısından müsaitsen vaktin varsa bi el atabilir misin diye ricada bulundum.

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Nasıl yapılır ? Karanlik Mod Özeliği Eklemek?

gecitli

xFanatik

netr0n

XGT

Monarch

Forever StarTR!

murogram

Sabit kullanıcı

Monarch

Forever StarTR!

murogram

Sabit kullanıcı

Monarch

Forever StarTR!

Sis

xFanatik

Monarch

Forever StarTR!

Sis

xFanatik

Foruma hoş geldin 👋, Ziyaretçi

Gizliliğinize değer veriyoruz