#10-帮网页加上黑暗模式！日夜开关(CSS变数&Media Query)

这几年手机、电脑有黑暗模式，很多网页也加上像电灯一样的开关啦！
黑暗模式可以降低亮度，减少对眼睛的压力。弱光环境下比较有可读性。
我自己是喜欢去网页一直玩开关（哈哈，不过真的很少调黑暗模式，真的有人会用吗？

CSS里面就有@media query可以看使用者预设的黑暗模式而对应样式,
一开始是iOS safari先宣布，後来其他浏览器一起跟进。这个配合上CSS的变数功能就搞定啦！

//喜欢暗暗的
@media (prefers-color-scheme: dark) {}
//喜欢亮亮的
@media (prefers-color-scheme: light) {}

如果你跟我一样是用Mac，可以在电脑设定的地方>General>Appearance选择Dark
就可以测试一下media query有没有用啦！
也可以到：Google Fonts去玩玩他的黑暗模式啦！

今天是要做一个按钮切换日夜，先看成果：

先看Media Query实作起来怎麽样，再来搭配开关看看吧！

Media Query实作

主要就是在:root的地方宣告变数，
在@media (prefers-color-scheme: dark) 再把本来的变数盖过去啦！

:root{
  --clr-primary:#003f88;
  --clr-secondary: #00296b;
  --bg:#ffd500;
  --bg-toggle: #14213d;
}

@media (prefers-color-scheme: dark) {
   :root {
     --clr-primary: #ffd500;
     --clr-secondary: #fdc500;
     --bg: #14213d;
     --bg-toggle: black;
   }
 }

搭配JS 开关

有了开关後就是用JS去做一个点击监听器，
再toggle class

toggle.addEventListener('click',()=>{
  target.classList.toggle('dark-mode');
})

今天的案例，刚好也用到了几个CSS的东西，之前没有用过，顺便记录一下：grid / min-max /fr
gird: 网格排版，可参考：这里
min-max: 取得单位比min值大，比max小
fr: 空间分块

今天主要参考这里的教学

上code:

//SCSS
:root{
  --clr-primary:#003f88;
  --clr-secondary: #00296b;
  --bg:#ffd500;
  --font-regular: "Assistant", sans-serif;
  --bg-toggle: #14213d;
  --clr-toggle: #fca311;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-refular);
  color: var(--clr-secondary);
  font-size: 18px;
}

   h1{
    color: var(--clr-primary);
    font-family: var(--font);
    font-size: 3rem;
  }
  h2{
    color: var(--clr-secondary);
  }
  
  p{
    color: var(--clr-secondary);
  }
  
  a{
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    color: var(--bg);
    background: var(--clr-secondary);
  }

section{
  width: 100%;
  height: 100vh;
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(2em, 1fr) minmax(80vw, 300px) minmax(2em, 1fr);
  
  *{
    grid-column: 2 / 3;
  }
  
  .toggle{
    margin-top: 20px;
    width: 4em;
    height: 2em;
    background: var(--bg-toggle);
    position: relative;
    border-radius: 2em;
    cursor: pointer;
    
    &:before{
      transition: 0.5s;
      cursor: pointer;
      content: '';
      position: absolute;
      width: 1.8em;
      height: 1.8em;
      border-radius: 50%;
      background: var(--clr-toggle);
      top: 0.1em;
      left: 0.2em;
    }
  }
  
  &.dark-mode{
    --clr: #e5e5e5;
    --clr-primary: #ffd500;
    --clr-secondary: #fdc500;

    --button-primary: #219ebc;
    --button-secondary: #02c39a;
    --bg: #14213d;
    
    --bg-toggle: black;
    --clr-toggle: #003f88;
    
    //让球球往右跑
    .toggle::before{
      left: calc( 100% - 2em);
    }
  }
  
}

//JS
const toggle = document.querySelector('#toggle');
const target = document.querySelector('#target');

toggle.addEventListener('click',()=>{
  target.classList.toggle('dark-mode');
})

以上！

今天的内容应该跟昨天的调换一下的...还是CSS为主
今天的code在这里

有任何问题＆意见欢迎留言！