ساده ترین راه برای اضافه کردن حالت تاریک به وب سایت شما

Summarize this content to 400 words in Persian Lang
توانایی استفاده از وب سایت ها و برنامه ها در حالت تاریک در سال های اخیر محبوبیت زیادی پیدا کرده است. این فشار چشم را تسکین می‌دهد، عمر باتری دستگاه‌های نمایشگر OLED را طولانی‌تر می‌کند، و جایگزینی زیبایی‌شناختی برای تم نور سنتی ارائه می‌دهد. این آموزش به شما نشان می دهد که چگونه از جاوا اسکریپت برای تغییر تم ها و متغیرهای CSS برای اضافه کردن حالت تاریک به وب سایت خود استفاده کنید.

مرحله 1: راه اندازی HTML خود

ابتدا اجازه دهید با یک ساختار اولیه HTML شروع کنیم. ایجاد کنید index.html فایل با محتوای زیر:

Dark Mode Example

Toggle Dark Mode

This is a sample website to demonstrate dark mode implementation.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این فایل HTML شامل یک عنوان با عنوان و یک دکمه برای تغییر حالت تاریک، یک قسمت محتوای اصلی با مقداری متن و پیوندهایی به فایل‌های CSS و جاوا اسکریپت ما است.

مرحله 2: تعریف متغیرهای CSS

حالا بیایید متغیرها را در CSS خود تعریف کنیم. ساختن یک styles.css فایل با محتوای زیر:

:root {
–background-color: #ffffff;
–text-color: #000000;
–header-background-color: #f1f1f1;
}

body {
background-color: var(–background-color);
color: var(–text-color);
font-family: Arial, sans-serif;
transition: background-color 0.3s, color 0.3s;
}

header {
background-color: var(–header-background-color);
padding: 20px;
text-align: center;
}

button {
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
}

.dark-mode {
–background-color: #181818;
–text-color: #ffffff;
–header-background-color: #242424;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما استفاده می کنیم : ریشه برای تعریف گروهی از متغیرهای CSS در این فایل CSS. برای حالت نور، این متغیرها رنگ پس‌زمینه، رنگ متن و رنگ پس‌زمینه هدر را تعیین می‌کنند. علاوه بر این، الف حالت تاریک کلاس تعریف شده است و تنظیمات آن بر این متغیرها اولویت دارد. انتقال بدون درز بین تم ها توسط ویژگی انتقال عنصر بدن تضمین می شود.

مرحله 3: افزودن جاوا اسکریپت برای تغییر تم

اکنون، بیایید جاوا اسکریپت را برای کنترل تغییر موضوع اضافه کنیم. ایجاد یک script.js فایل با محتوای زیر:

const themeToggle = document.getElementById(‘theme-toggle’);
const body = document.body;

// Check for saved user preference
const savedTheme = localStorage.getItem(‘theme’);
if (savedTheme) {
body.classList.add(savedTheme);
}

// Toggle dark mode
themeToggle.addEventListener(‘click’, () => {
body.classList.toggle(‘dark-mode’);

// Save user preference
if (body.classList.contains(‘dark-mode’)) {
localStorage.setItem(‘theme’, ‘dark-mode’);
} else {
localStorage.removeItem(‘theme’);
}
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این اسکریپت دکمه تغییر موضوع و عنصر بدنه را انتخاب می کند. هنگامی که دکمه کلیک می شود، آن را تغییر می دهد حالت تاریک کلاس روی بدن این اسکریپت همچنین ترجیحات تم کاربر را در localStorage ذخیره می‌کند، بنابراین موضوع در بارگذاری مجدد صفحه باقی می‌ماند.

مرحله 4: آزمایش پیاده سازی

مرورگر وب خود را راه اندازی کنید و فایل index.html را برای آزمایش پیاده سازی باز کنید. برای جابه‌جایی بین تم‌های روشن و تاریک، روی دکمه «Toggle Dark Mode» کلیک کنید.به یاد داشته باشید که بازخوانی صفحه نباید بر اولویت موضوع تأثیر بگذارد.

نتیجه

با استفاده از متغیرهای CSS و کمی جاوا اسکریپت می توانید به سرعت یک حالت تاریک را به وب سایت خود اضافه کنید. این روش انتقال بدون درز موضوع را تسهیل می کند و تجربه کاربری پیشرفته ای را ارائه می دهد. لطفاً به راحتی عناصر بیشتری را به صفحه خود اضافه کنید و سبک ها را برای ساختن این درس تغییر دهید.

کد نویسی مبارک 😀

    
    
    
    


    

        
        Toggle Dark Mode
    
    

        
This is a sample website to demonstrate dark mode implementation.
    
    

		

			

										

							
							 هم‌رسانی
						
						
				
					 فیس بوک
				
				
					 توییتر (X)
				
				
					 لینکدین
				
				
					 ‫تامبلر
				
				
					 ‫پین‌ترست
				
				
					 ‫رددیت
				
				
					 ‫VKontakte
				
				
					 ‫Odnoklassniki
				
				
					 پاکت
				
				
					 رایانامه
				
				
					 چاپ