{"id":497,"date":"2022-10-10T21:56:13","date_gmt":"2022-10-10T13:56:13","guid":{"rendered":"http:\/\/gjweb.top\/?p=497"},"modified":"2022-10-10T21:56:15","modified_gmt":"2022-10-10T13:56:15","slug":"%e6%a0%b9%e6%8d%ae%e7%b3%bb%e7%bb%9f%e4%b8%bb%e9%a2%98%e5%8a%a8%e6%80%81%e5%88%87%e6%8d%a2%e5%89%8d%e7%ab%af%e9%a2%9c%e8%89%b2","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=497","title":{"rendered":"\u6839\u636e\u7cfb\u7edf\u4e3b\u9898\u52a8\u6001\u5207\u6362\u524d\u7aef\u989c\u8272"},"content":{"rendered":"\n

\u4ee5 windows \u7cfb\u7edf\u4e3a\u4f8b \u53d8\u6362\u4e3b\u9898\u989c\u8272\u6d4f\u89c8\u5668\u9875\u9762\u4f1a\u6839\u636e\u4e3b\u9898\u81ea\u52a8\u5207\u6362\u76f8\u5e94\u7684\u989c\u8272<\/p>\n\n\n\n

\u8bdd\u4e0d\u591a\u8bf4\u8fdb\u5165\u6b63\u6587<\/p>\n\n\n\n

CSS\u89e3\u51b3\u65b9\u6848<\/h2>\n\n\n\n

css \u89e3\u51b3\u65b9\u6848\u9700\u8981\u501f\u52a9 css3\u7684\u65b0\u7279\u6027 prefers-color-scheme<\/em> \u8fd4\u56de no-preference ( \u672a\u77e5 ) \\ light ( \u6d45\u8272 ) \\ dark ( \u6df1\u8272 )<\/p>\n\n\n\n

\u4ee3\u7801<\/p>\n\n\n\n

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <title>Document<\/title>
  <style>
    *{
      margin:0px;
      padding: 0px;
      box-sizing: border-box;
    }
    \/* \u6d45\u8272\u4e3b\u9898 *\/
    @media(prefers-color-scheme: light){ 
      body{
        background: #eee;
        color:#222
      }
\u200b
    }
    \/*\u6697\u8272\u4e3b\u9898*\/
    @media(prefers-color-scheme: dark){
      body{
        background: #222;
        color:#eee
      }
    }
  <\/style>
<\/head>
<body>
  <h1>\u53d8\u6362\u4e3b\u9898\u8272<\/h1>
<\/body>
<\/html><\/code><\/pre>\n\n\n\n
JS \u89e3\u51b3\u65b9\u6848<\/h2>\n\n\n\n
\u9700\u8981\u501f\u52a9 window.matchMedia() API \u6765\u76d1\u542c\u5f53\u524d\u4e3b\u9898\u7684\u53d8\u5316.<\/p>\n\n\n\n
\u793a\u4f8b\u4ee3\u7801<\/p>\n\n\n\n
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <title>Document<\/title>
  <style>
    *{
      margin:0px;
      padding: 0px;
      box-sizing: border-box;
    }
    .light{
      background: #eee;
      color:#222
    }
    .dark{
      background: #222;
      color:#eee
    }
  <\/style>
<\/head>
<body>
  <h1>\u53d8\u6362\u4e3b\u9898\u8272<\/h1>
<\/body>
<\/html>
<script>
  let theme = window.matchMedia(\"(prefers-color-scheme: light)\")
  let body = document.getElementsByTagName(\"body\")[0]
  if(theme.matches){body.className  = \"light\"}
  theme.onchange = (data)=>{
    console.log(data.matches,body)
    if(data.matches){
      body.className  = \"light\"
    }else{
      body.className  = \"dark\"
    }
  }
<\/script><\/code><\/pre>\n\n\n\n
\n\n\n\n
\u6548\u679c\u5982\u4e0b<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"
\u4ee5 windows \u7cfb\u7edf\u4e3a\u4f8b \u53d8\u6362\u4e3b\u9898\u989c\u8272\u6d4f\u89c8\u5668\u9875\u9762\u4f1a\u6839\u636e\u4e3b\u9898\u81ea\u52a8\u5207\u6362\u76f8\u5e94\u7684\u989c\u8272 \u8bdd\u4e0d\u591a\u8bf4\u8fdb\u5165\u6b63\u6587 CSS\u89e3\u51b3 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[],"class_list":["post-497","post","type-post","status-publish","format-standard","hentry","category-38"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=497"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/497\/revisions"}],"predecessor-version":[{"id":502,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/497\/revisions\/502"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}