CSS 的媒体查询方法：prefers-color-scheme
    (https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme) 

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         @media (prefers-color-scheme: light) {
    10.             .article {
    11.                 background: #fff;
    12.                 color: #000;
    13.             }
    14.         }
    16.         @media (prefers-color-scheme: dark) {
    17.             html {
    18.                 background: #000;
    19.             }
    21.             .article {
    22.                 background: #000;
    23.                 color: white;
    24.             }
    25.         }
    27.         @media (prefers-color-scheme: no-preference) {
    28.             html {
    29.                 background: #fff;
    30.             }
    32.             .article {
    33.                 background: #fff;
    34.                 color: #000;
    35.             }
    36.         }
    37.     </style>
    38. </head>
    40. <body>
    41.     <div class="article">
    42.         Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, laudantium? Numquam harum provident beatae
    43.         commodi laborum, neque non vero, temporibus pariatur tempore ducimus hic consectetur. Deleniti provident
    44.         voluptatem eligendi ea!
    45.         Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, laudantium? Numquam harum provident beatae
    46.         commodi laborum, neque non vero, temporibus pariatur tempore ducimus hic consectetur. Deleniti provident
    47.         voluptatem eligendi ea!
    48.     </div>
    50. </body>
    52. </html>

    image.png
    image.png

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme
    https://www.zoo.team/article/dark-theme