حسنًا.. هناك القليل من CSS المعنية؟، ولكن الأمر كان أسهل بكثير من الإجابات التي وجدتها على الإنترنت.

ما الذي أحاول تحقيقه؟
أحاول تحقيق شيئين بهذه الطريقة.

1. أحتاج إلى السماح لموقع الويب بالتحميل بالطريقة التي يفضلها المستخدم (الجزء الذي اختاروا فيه المظهر الخاص بهم بالفعل في نظام التشغيل)
2. لكنني أريد أيضًا السماح لهم بالتبديل بين الوضع الداكن والوضع الفاتح بعد التحميل.

لذلك سيكون لدينا موقع ويب سيتم تحميله في المظهر المتوقع للمستخدم ثم السماح له بتغييره عندما يريد ذلك.

الخطوة 1: إنشاء زر للتبديل

أنا أستخدم صورة كزر يحتوي على صورة svg للقمر. يمكنك إضافة الزر أو مربع الاختيار الذي يناسبك للتبديل بين خيارين.

الخطوة 2: ضع تفاصيل الألوان في CSS كخصائص مخصصة

:root{
    color-scheme: light dark;

    --light-bg: ghostwhite;
    --light-color: darkslategray;
    --light-code: tomato;

    --dark-bg: darkslategray;
    --dark-color: ghostwhite;
    --dark-code: gold;
}

.light{
    color-scheme: light;
}

.dark{
    color-scheme: dark;
}

حسنًا.. إذن، في الجذر، ترى خاصية تسمى نظام الألوان وهذا سيغير قواعد اللعبة لدينا.
كما ترون، يأخذ القيم الضوء أو الظلام لذلك. لقد قمت أيضًا بإنشاء فئتين .light و .dark التي تحدد قيمة نظام الألوان إلى داكن أو فاتح.

الخطوة 3: إضافة الألوان إلى أجزاء مختلفة من التعليمات البرمجية الخاصة بك

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

الآن عندما تطلب خاصية ما لونًا (مثل الخلفية، وخصائص اللون)، يمكنك استخدام الوظيفة المسماة light-dark().
تأخذ هذه الوظيفة قيمتين، يتم استخدام الأولى عندما يتم ضبط نظام الألوان على الضوء ويتم استخدام الثانية عندما يتم ضبط نظام الألوان على الظلام.

نعم... تم إصدار هذه الوظيفة في مايو 2024. إنها جديدة إلى حد ما، ولكن سيتم تعديلها قريبًا. وهو في دعم خط الأساس حتى كتابة هذا المقال. إليك المستندات الخاصة بذلك

light-dark() - CSS: أوراق الأنماط المتتالية | MDN

تتيح وظيفة light-dark() CSS تعيين لونين لخاصية ما - إرجاع أحد خياري الألوان عن طريق اكتشاف ما إذا كان المطور قد قام بتعيين نظام ألوان فاتح أو داكن أو أن المستخدم طلب سمة لون فاتح أو داكن - دون الحاجة إلى تغليف ألوان السمة ضمن استعلام ميزة الوسائط المفضلة لنظام الألوان. يمكن للمستخدمين الإشارة إلى تفضيلاتهم لنظام الألوان من خلال إعدادات نظام التشغيل الخاص بهم (مثل الوضع الفاتح أو الداكن) أو إعدادات وكيل المستخدم الخاصة بهم. تتيح الدالة light-dark()‎ توفير قيمتي لون حيث يتم قبول أي قيمة . ترجع وظيفة الألوان light-dark() CSS القيمة الأولى إذا تم ضبط تفضيل المستخدم على اللون الفاتح أو إذا لم يتم تعيين أي تفضيل، وترجع القيمة الثانية إذا تم ضبط تفضيل المستخدم على اللون الداكن.

Developer.mozilla.org

إذا كنت تستخدم هذا، فسيقوم CSS تلقائيًا باكتشاف تفضيلات المستخدم من نظام التشغيل وتعيينه على اللون الذي يريده.
لقد حققنا هدفنا الأول، حيث سيتم تحميل الموقع الإلكتروني بوضع الألوان الذي يريده المستخدم بالفعل في نظام التشغيل الخاص به.

الخطوة 4: استخدم Javascript للتبديل بين الوضع الداكن والفاتح

// mode is the toggle button 
mode.addEventListener("click", ()=>{
    // we are getting the color scheme here
    let theme = document.documentElement.style.colorScheme;
    /*  when a website is first loaded
    it will have null as its color-scheme value*/
    if(theme == null){
        // this window.matchMedia() checks if the user prefers the dark theme
        if(window.matchMedia("(prefers-color-scheme:dark)").matches){
            /* if they prefer dark, clicking on our button should turn everything to light, 
            the color-scheme will be given a value as light  */
            document.documentElement.style.colorScheme = "light"; 
        }
        // Or else the color-scheme will be set to dark
        document.documentElement.style.colorScheme = "dark";
    }

    /* Now since our toggle button set the color scheme,
        we can simply change light to dark and dark to light using below code 
    */

    else{
        document.documentElement.style.colorScheme = (theme == "light")? "dark": "light";
    }
});

هنا، document.documentElement.style.colorScheme يشير فعليًا إلى عنصر :root من CSS.
نظرًا لأننا نجحنا بالفعل في فتح موقع الويب في الوضع المفضل للمستخدم في الخطوة السابقة، فعند النقر على زر التبديل، يتم تنفيذ المهام التالية.

1. إنه يتحقق مما إذا كان نظام الألوان له أي قيمة، وإذا لم يكن كذلك، فإن موقع الويب في الوضع المفضل للمستخدم، ونحن بحاجة إلى تحديد ما إذا كان داكنًا أم فاتحًا لتغيير الوضع.
2. يستخدم window.matchMedia("(prefers-color-scheme:dark)"). يتطابق لمعرفة ما إذا كان في الوضع المظلم، وإذا كان في الوضع المظلم، فإننا نغير نظام الألوان إلى اللون الفاتح، وإذا لم يكن كذلك ، نغيره إلى الظلام.
3. في المرة التالية التي ينقرون فيها على الزر، قمنا بالفعل بتعيين قيمة لنظام الألوان الخاص بنا، لذلك نقوم فقط بالتبديل بين اللون الداكن أو الفاتح.

*ملاحظة: * هذه أول مشاركة لي وما زلت مبتدئًا في تطوير الويب. ولكن عندما بحثت عن هذه الطريقة، لم أر أي منشورات ذات صلة بها. إذا كنت تعرف هذا بالفعل، فأنا آسف للنقر فوق اصطيادك؟. اعتقدت أن هذا المنشور سيساعدني على تذكر هذه العملية في كل مرة أعمل فيها على مشروع جديد.
إذا كنت تعمل على أن يعمل موقع الويب الخاص بك على المتصفحات القديمة، فهذه الطريقة ليست مناسبة لك بالتأكيد. أخبرني في التعليقات حول هذا المنشور. شكرا على القراءة.