css的color-scheme实现暗色亮色布局效果代码-html代码-BFW代码库

css的color-scheme实现暗色亮色布局效果代码

代码语言：html

代码描述：css的color-scheme实现暗色亮色布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
.dark, .light {
  color-scheme: var(--color-scheme);
}

.dark {
  --color-scheme: dark;
}

.light {
  --color-scheme: light;
}

section {
  background: light-dark(#ddd, #222);
  color: light-dark(#222, #ddd);
  
  @container style(--color-scheme: light) {
    /* adapt anything you want */
    border: 10px solid pink;
  }
  
  @container style(--color-scheme: dark) {
    /* adapt anything you want */
    border: 5px dashed cyan;
  }
}











@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
    display: grid;
    
    @media (orientation: landscape) {
      grid-auto-flow: column;
    }
  }
  
  .dark, .light, section {
    display: grid;
  }
  
  sect.........完整代码请登录后点击上方下载按钮下载查看