اضافه کردن حالت تاریک به قالب

[MR-K4SR3]

سلام بر دوستای عزیز یک سوالی برام خیلی وقت پیش اومده ! داشتم از سایت آقای @AriaMv دیدن میکردم دیدم حالت تاریک هم به سایت اضافه کرده که با یک کلیک عوض میشه کسی میدونه چطوری میشه این کار رو روی یک قالب کرد ؟

[AriaMv]

سلام ! ماله سایت من اینجوریه !

کد با استفاده از کد javascript :

 <script>
  

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
  
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);


</script>

 

کد مربوط به تغییر دارک و لایت :

<div class="theme-switch-wrapper">
    <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox">
        <div class="slider round"></div>
  </label>
</div>

 

کد css :

.theme-switch-wrapper {
	display:flex;
	align-items:center;
	transform:rotate(-90deg);
	width:50px;
	height:50px;
	margin:0 auto;
}
.theme-switch-wrapper em {
	margin-left:10px;
	font-size:1rem;
}
.ariamv-darklightswitch {
	text-align:center;
}
.theme-switch {
	display:inline-block;
	height:20px;
	position:relative;
	width:40px;
}
.theme-switch input {
	display:none;
}
.slider {
	background-color:#8c9fc6;
	bottom:0;
	cursor:pointer;
	left:0;
	position:absolute;
	right:0;
	top:0;
	transition:.4s;
}
input:checked + .slider::before {
	transform:translateX(19px);
}
.slider.round::before {
	border-radius:50%;
}
.slider::before {
	background-color:#fff;
	bottom:2px;
	content:"";
	height:16px;
	left:2px;
	position:absolute;
	transition:.4s;
	width:16px;
}
.slider.round {
	border-radius:34px;
}
input:checked + .slider {
	background-color:#5d4efe;
}

 

و اضافه کردن کد زیر به custom.css :

html[data-theme="dark"] body {
	background:#000 !important;
}

 

حالا با استفاده از همین روش هرجایی که میخای دارک کنی رو کلاسشو میذاریو بهش رنگ میدی !

[Support]

سلام.

ببینید روال کار به این صورت هستش که شما ابتدا باید از طریق خاصیت زیر رنگهای مود تاریک رو برای قسمتهای مختلف تنظیم کنین

html[data-theme="dark"] .ipsWidget_title {
	color:#FFF;
	background:#313744;
}

مثلا این کد برای عنوان تالارها هستش که تو حالت پیش فرض زمینه سفید و رنگ سسیاه داره ولی ما تو حالت مود تاریک رنگ رو سفید و زمینه رو سیاه در نظر میگیریم. به این روال برای سایر بخش ها هم رنگ ها رو تنظیم میکنیم

برای ادامه کار شما نیاز به یک دکمه دارین که با زدنش رنگ دارک اعمال بشه و چون نمیخواین انجمن مجددا بارگذاری شه باید از کد جاوا برای این کار استفاده کنید.

 

[MR-K4SR3]

@Arash.Ranjbar@AriaMvممنون از هر دوی شما عزیزان واقعا یکی از مشکل های بزرگ رو حل کردید