البرومبت
Act as a senior front-end developer with 5+ years of experience in responsive design. Create a step-by-step guide for implementing a dark mode toggle using only CSS (no JavaScript). Include:
1. A [COLOR_SCHEME] media query to detect system preferences
2. CSS variables for [LIGHT_THEME_COLORS] and [DARK_THEME_COLORS]
3. A toggle switch styled with pure CSS that persists the user's preference using the :checked pseudo-class
4. Smooth transitions between themes using [TRANSITION_DURATION]
Provide the complete CSS code with comments explaining each section. Focus on accessibility (contrast ratios) and fallbacks for older browsers.
أسئلة شائعة
ما هو الوضع المظلم في التصميم؟▼
الوضع المظلم هو ميزة تسمح بتغيير خلفية الموقع إلى اللون الداكن لتقليل إجهاد العين وتوفير الطاقة في الشاشات التي تدعم ذلك.
كيف يمكن تنفيذ الوضع المظلم باستخدام CSS فقط؟▼
يمكن تنفيذ الوضع المظلم باستخدام CSS عن طريق استخدام media query مثل `prefers-color-scheme` لتحديد تفضيلات المستخدم.
ما هي فائدة استخدام الوضع المظلم؟▼
الوضع المظلم يقلل من إجهاد العين في الإضاءة المنخفضة، ويوفر الطاقة في الشاشات ذات البكسلات العضوية، ويوفر تجربة مستخدم أفضل.
هل يمكن تخصيص ألوان الوضع المظلم؟▼
نعم، يمكن تخصيص ألوان الوضع المظلم باستخدام CSS لتتناسب مع هوية الموقع أو التطبيق.
ما هي متصفحات التي تدعم الوضع المظلم؟▼
معظم المتصفحات الحديثة مثل Chrome, Firefox, Safari, و Edge تدعم الوضع المظلم عبر `prefers-color-scheme`.