رفتن به مطلب
انجمن پشتیبانی فارسی IPS
× تعرفه ها خدمات پشتیبانی
به انجمن پشتیبانی IPS خوش آمدید

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


 اشتراک گذاری

پست های پیشنهاد شده

  • تیم مدیریت

سلام بر دوستای عزیز یک سوالی برام خیلی وقت پیش اومده ! داشتم از سایت آقای @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

پشتیبان فارسی انجمن ساز IPS

 

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

  • تیم مدیریت

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

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

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .
توجه: مطلب ارسالی شما پس از تایید مدیریت برای همه قابل رویت خواهد بود.

مهمان
ارسال پاسخ به این موضوع...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

 اشتراک گذاری

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

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

×
  • اضافه کردن...