نحوه پیاده سازی حالت تاریک با استفاده از CSS و JS

حالت تاریک به یک اولویت محبوب تبدیل شده است، بنابراین باید به دنبال پشتیبانی از آن در سایت‌ها و برنامه‌های وب خود باشید.

در سال های اخیر، حالت تاریک به عنوان یک گزینه رابط کاربری محبوبیت قابل توجهی به دست آورده است. پس‌زمینه‌ای تیره‌تر همراه با متن روشن‌تر را ارائه می‌دهد که نه تنها فشار چشم را کاهش می‌دهد، بلکه عمر باتری را نیز حفظ می‌کند، مخصوصاً در صفحه‌های OLED.

کشف کنید که چگونه می توانید با استفاده از ترکیبی از CSS و جاوا اسکریپت، گزینه حالت تاریک را به وب سایت ها و برنامه های وب خود اضافه کنید.

درک حالت تاریک

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

راه اندازی پروژه شما

قبل از اجرای این کار، مطمئن شوید که یک پروژه راه اندازی شده و آماده کار بر روی آن هستید. شما باید فایل های HTML، CSS و جاوا اسکریپت خود را به شکلی ساختاریافته سازماندهی کنید.

کد HTML

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

<body>
    <nav class="navbar">
        <span class="logo">Company Logo</span>

        <ul class="nav__lists">
            <li>About</li>
            <li>Blog</li>
            <li>Contact</li>
        </ul>

        <div id="theme__switcher">
            <img id="theme__image" src="./toggle.svg" alt="" />
        </div>
    </nav>

    <main>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Odit deserunt sit neque in labore quis quisquam expedita minus
    perferendis.
    </main>

    <script src="./script.js"></script>
</body>

کد CSS

برای استایل دادن به مثال، CSS زیر را اضافه کنید. این حالت به‌عنوان حالت نور پیش‌فرض عمل می‌کند که بعداً با سبک‌های جدید برای نمای حالت تاریک آن را تقویت خواهید کرد.

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { font-size: 62.5%; }

body { font-family: "Quicksand", sans-serif; }

.navbar {
    display: flex;
    padding: 2rem;
    font-size: 1.6rem;
    align-items: center;
    color: rgb(176, 58, 46);
    background-color: #fdedec;
}

.navbar span { margin-right: auto; }

.logo { font-weight: 700; }

.nav__lists {
    display: flex;
    list-style: none;
    column-gap: 2rem;
    margin: 0 2rem;
}

#theme__switcher { cursor: pointer; }

main {
    width: 300px;
    margin: 5rem auto;
    font-size: 2rem;
    line-height: 2;
    padding: 1rem 2rem;
    border-radius: 10px;
    box-shadow: 2px 3.5px 5px rgba(242, 215, 213, 0.4);
}

در حال حاضر، رابط کاربری شما باید به شکل زیر باشد:

مطلب مرتبط: دکوراتورهای پایتون: آنها چه هستند و چگونه می توانید از آنها استفاده کنید؟

پیاده سازی حالت تاریک با استفاده از CSS و جاوا اسکریپت

برای پیاده سازی حالت تاریک، ظاهر آن را با استفاده از CSS تعریف می کنید. سپس از جاوا اسکریپت برای انجام تغییر بین حالت تاریک و روشن استفاده خواهید کرد.

ایجاد کلاس های موضوعی

برای هر موضوع از یک کلاس استفاده کنید تا بتوانید به راحتی بین دو حالت جابجا شوید. برای یک پروژه کامل تر، باید در نظر بگیرید که چگونه حالت تاریک ممکن است بر هر جنبه از طراحی شما تأثیر بگذارد.

.dark {
    background: #1f1f1f;
    color: #fff;
}

.light {
    background: #fff;
    color: #333;
}

انتخاب عناصر تعاملی

جاوا اسکریپت زیر را به فایل script.js خود اضافه کنید. بیت اول کد به سادگی عناصری را انتخاب می‌کند که برای کنترل جابجایی استفاده می‌کنید.

// Get a reference to the theme switcher element and the document body

const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;

افزودن قابلیت تعویض

در مرحله بعد، از جاوا اسکریپت زیر برای جابجایی بین کلاس های حالت روشن (روشن) و حالت تاریک (تاریک) استفاده کنید. توجه داشته باشید که همچنین ایده خوبی است که سوئیچ جابجایی را برای نشان دادن حالت فعلی تغییر دهید. این کد این کار را با یک فیلتر CSS انجام می دهد.

// Function to set the theme

function setTheme(theme) {
    // If the theme is "dark," add the "dark" class, remove "light" class,
    // and adjust filter style
    bodyEl.classList.toggle("dark", theme === "dark");

    // If the theme is "light," add the "light" class, remove "dark" class,
    bodyEl.classList.toggle("light", theme !== "dark");

    // adjust filter of the toggle switch
    themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none";
}


// Function to toggle the theme between light and dark

function toggleTheme() {
    setTheme(bodyEl.classList.contains("dark") ? "light" : "dark");
}

themeToggle.addEventListener("click", toggleTheme);

این باعث می شود که صفحه شما با یک کلیک روی کانتینر تغییر موضوع را تغییر دهد.

مطلب مرتبط: چگونه پایگاه داده NoSQL خود را تنظیم کنید

بهبود حالت تاریک با جاوا اسکریپت

دو پیشرفت زیر را در نظر بگیرید که می‌توانند سایت‌های حالت تاریک شما را برای بازدیدکنندگان دلپذیرتر کنند.

تشخیص تنظیمات برگزیده کاربر

این شامل بررسی موضوع سیستم کاربر قبل از بارگیری وب سایت و تنظیم سایت شما برای مطابقت است. در اینجا نحوه انجام این کار با استفاده از تابع matchMedia آورده شده است:

// Function to detect user's preferred theme

function detectPreferredTheme() {
    // Check if the user prefers a dark color scheme using media queries
    const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
    setTheme(prefersDarkMode);
}

// Run the function to detect the user's preferred theme
detectPreferredTheme();

اکنون، هر کاربری که از سایت شما بازدید می کند، طرحی را می بیند که با موضوع فعلی دستگاهش مطابقت دارد.

تداوم اولویت کاربر با فضای ذخیره‌سازی محلی

برای بهبود بیشتر تجربه کاربر، از حافظه محلی استفاده کنید تا حالت انتخابی کاربر را در طول جلسات به خاطر بسپارید. این تضمین می کند که آنها مجبور نیستند مکررا حالت دلخواه خود را انتخاب کنند.

function setTheme(theme) {
    bodyEl.classList.toggle("dark", theme === "dark");
    bodyEl.classList.toggle("light", theme !== "dark");

    themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none";

    // Setting the theme in local storage
    localStorage.setItem("theme", theme);
}

// Check if the theme is stored in local storage

const storedTheme = localStorage.getItem("theme");

if (storedTheme) {
    setTheme(storedTheme);
}

function detectPreferredTheme() {
    const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;

    // Getting the value from local storage
    const storedTheme = localStorage.getItem("theme");

    setTheme(prefersDarkMode && storedTheme !== "light" ? "dark" : "light");
}

استقبال از طراحی کاربر محور

حالت تاریک فراتر از ظاهر است. این در مورد قرار دادن راحتی و ترجیحات کاربر در اولویت است. با پیروی از این روش، می توانید رابط های کاربر پسند ایجاد کنید و بازدیدهای مجدد را تشویق کنید. همانطور که کدنویسی و طراحی می کنید، رفاه کاربر را در اولویت قرار دهید و تجربه دیجیتالی بهتری را برای خوانندگان خود ارائه دهید.

مطلب مرتبط: جاوا 21: جدیدترین پیشرفت ها را کشف کنید