رفتن به مطلب
رونمایی از اولین و قویترین قالب IPS در ایران و در مارکتهای جهانی ×

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


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

 

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

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

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

سلام.

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

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

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

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

 

IPSforum.ir  astrocat.webp

 

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

  • تیم مدیریت

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

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

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

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

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

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

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

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

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

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

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

اطلاعات مهم

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