كيفية جعل موقعي html ملائم لاوضاع المتصفح اللايت والدارك تلقائي

أبسط طريقة هي من خلال CSS كالتالي:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}


@media (prefers-color-scheme: light) {
  body {
    background-color: #fff;
    color: #333;
  }
}

لاحظ استخدام prefers-color-scheme وهي media query تكتشف تفضيلات المستخدم تلقائيًا وتطبيق الوضع المفعل لديه في المتصفح.