رفتن به مطلب

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


برو به راه حل حل شده توسط 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;
}

 

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

  • پسند 1
  • تشکر 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر کل | موسس سایت

سلام.

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

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

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

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

 

  • پسند 2

IPSforum.ir  astrocat.webp

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری
  • کاربران آنلاین در این صفحه   0 کاربر

    • هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.
×
×
  • ایجاد مورد جدید...

اطلاعات مهم

برای تجربه رابط کاربری بهتر و تعامل بهتر شما با انجمن ما از کوکی ها استفاده میکنیم قوانین