子們，來了。

這一章繼續繼續，講解小程序的常見組件（7）— radio單選框。

它與網頁的單選框用法是大致相同的，但是有2個細節需特別注意。

1、可以通過 color屬性來修改顏色

如上圖，"選中"圖標被選中時，默認樣式是呈現綠色，這里可以通過 color屬性來修改顏色。

2、當需要選中某個單選框，觸發某一事件時，需和radio group 一起使用。

啥意思呢？看不懂？

別急，我們用一個需求來講講就懂了。

需求：創建男，女兩個標簽，當選中一個時，在圖標下方顯示文字"你選中的為男/女"

擼起袖子加油干：

1、新建一個頁面 demo15

2、打開demo15.wxml 文件，刪除原先的代碼，寫入如下代碼：

  <radio-group bindchange="    ">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>

3、保存，小程序界面顯示男，女兩標簽。

點擊男/女標簽，圖標出現紅色選中，但沒有提示文字。

別著急，我們慢慢來。

4、給radio-group 綁定change 事件，修改代碼成如下：

（與上面代碼神似，注意觀察啊）

 <radio-group bindchange="handlechange">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>

5、在demo15.wxml中，加上view標簽，用來顯示頁面中顯示的值，代碼如下：

<radio-group bindchange="handlechange">  
  <radio color="red" value="male">男</radio> 
 <radio color="red" value="female" >女</radio> 
 </radio-group>

<view>您選中的是：{{gender}}</view>

保存后，小程序頁面選中某個圖標后，出現提示文字。

6、在demo15.js文件中，寫入頁面邏輯的代碼。

首先先刪除原先的代碼，只保留data部分。

寫入如下代碼（內含每步的注釋）：

Page({
  data: {
    gender: ""
 },
 handleChange(e){
 // 1 獲取單選框中的值
 let gender=e.detail.value;
 // 2 把值 賦值給 data中的數據
 this.setData({
 // gender:gender
 gender
 })
 }
})

保存后，小程序顯示如下，選中某一個圖標，下面就會有提示文字。

我們的需求實現了。

以上步驟很好的解釋了radio 單選框的第2個細節：

當需要選中某個單選框，觸發某一事件時，需和radio group 一起使用。

還有第一個細節：radio的顏色屬性。

我們演示一下：

很簡單，只需一步就搞定。

修改demo15.wxml文件中 radio color 的部分，

這里將原先的紅色修改為 綠色（green），其余不變。

代碼如下：

  <radio-group bindchange="handlechange">
 <radio color="green" value="male">男</radio>
 <radio color="green" value="female" >女</radio>
 </radio-group>
 
 <view>您選中的是：{{gender}}</view>

保存后，圖標被選中后的顏色發生了變化：

到這里，我們的第一個小細節也演示完了。

單選框的用法基本就這兩點與網頁中的單選框的使用不同，其余具體知識點，請移步官方文檔。

快門傳送：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

黑模式是一種設計趨勢，由暗色（dark）和高亮（light）兩種視覺模式組成。暗黑模式之所以成為設計或者 Web 端的熱點，主要歸功于 Apple 公司，該公司在 iOS 和 macOS 操作系統中加入了暗黑模式，即系統級別的兩種皮膚，用戶可以通過系統切換，讓整個應用的顏色可以輕松切換。暗黑模式流行之后，Windows 和 谷歌也加入了暗黑模式，選多流行的網站和應用程序中都提供了暗黑模式選型。

本文將從以下幾個方面深入探討網頁暗黑模式的實現：

• 效果預覽
• 暗黑模式現狀
• 暗黑模式實現方案
• 傳統方案：類名或者樣式表切換
• 現代方案：CSS變量 + @container + :has()
• 未來方案：light-dark()
• 暗黑模式的應用

如果本文對您有幫助，歡迎在關注、點贊、分享給更多需要的人。

1.效果預覽

2.暗黑模式現狀

暗黑模式在操作系統被支持之后，在APP、網頁、瀏覽器中得到廣泛支持，尤其是現在網頁端的框架已實現的對暗黑模式的功能支持。

2.1.操作系統

以 macOS 為例，在操作系統中 Settings > 通用 面板可以切換 light 和 dark 模式。

2.2.瀏覽器

在 Chrome 開發工具中 DevTools > Settings > Preferences > Theme 可以設置 light 和 dark 模式。

2.3.前端框架

1）Bootstrap

Bootstrap 在 v5.3.0 版本支持了 light 和 dark 兩種顏色模式，開發者可以通過 data-bs-theme 屬性在 html 元素上全局切換，也可以在特定的組件和元素上切換。

更多：https://getbootstrap.com/docs/5.3/customize/color-modes/

2）Tailwind CSS

Tailwind CSS 中暗黑模式可以通過 media 和 class 兩種方式進行設置，media 選項由操作系統設置，只會考慮瀏覽器的配色方案偏好，而 class 選項將查找 .dark 應用于 html 標簽的類，通過這種方法，開發者可以手動進行偏好設置。

更多：https://tailwindcss.com/docs/dark-mode

3.暗黑模式實現方案

3.1.傳統方案：類名或者樣式表切換

暗黑模式最傳統的實現方案就是實現兩套顏色主題，包含類名切換和按條件加載樣式表兩種不同方案。

1）類名切換：一個樣式文件 + 兩套顏色類選擇器：

通過一個樣式文件和兩套顏色類選擇器，通過 Javascript 實現類名 light 或者 dark 切換。

<style>
  .container {
    .light {
      color: #ccc;
    }
    .dark {
      color: #333;
    }
  }
</style>
<div class="container light"></div>
<div class="container dark"></div>

2）樣式表按需：兩個樣式文件 + 一套顏色類選擇器：

<%if(theme==='dark') {%>
  <link href="https://xxx.com/dark.css">
<%>} else {%>
  <link href="https://xxx.com/light.css">
<%}%>

<div class="container"></div>

3.2.現代方案：CSS變量 + @container + :has()

現代方案采用現代 CSS 屬性：CSS變量、@container、:where()、:has() 等組合來實現。

1）核心樣式：

body {
  display: grid;
  place-items: center;
  --background-color: #fff;
  --text-color: #222;
  background-color: var(--background-color);
  color: var(--text-color);
  color-scheme: light dark;
  margin-top: 20px;
}

:where(html) {
  --darkmode: 0;
  container-name: root;
  container-type: normal;
}

@container root style(--darkmode: 1) {
  body {
    --background-color: hsl(228, 5%, 15%);
    --text-color: hsl(228, 5%, 80%);
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --darkmode: 1;
  }
}

@media (prefers-color-scheme: light) {
  html {
    --darkmode: 0;
  }
}

html:has(#color-scheme-light:checked) {
  --darkmode: 0;
}

html:has(#color-scheme-dark:checked) {
  --darkmode: 1;
}

2）部分樣式解析：

html:has(#color-scheme-dark:checked)：html 子元素含有 id 屬性值為 color-scheme-dark 且 checked 屬性值為 true 的元素。示例中使用的是 input[type=radio] 元素。

@media (prefers-color-scheme: light)：prefers-color-scheme CSS 媒體特性用于檢測用戶是否有將系統的主題色設置為亮色或者暗色。本示例在切換系統暗黑模式時，網頁的顏色也會跟著變化。

:where()：CSS 偽類函數，接受選擇器列表作為它的參數，將會選擇所有能被該選擇器列表中任何一條規則選中的元素。

:has()：CSS 偽類函數，通過把可容錯相對選擇器列表作為參數，提供了一種針對引用元素選擇父元素或者先前的兄弟元素的方法。

@container root style(--darkmode: 1)： 是一種條件組規則，可將樣式應用于包含上下文。樣式聲明由條件篩選，如果條件為真，則應用于容器。當容器改變大小時，將對條件進行評估。

color-scheme: light dark：color-scheme 屬性允許元素指明它可以使用哪些配色方案。當用戶選擇其中一種配色方案時，操作系統會對用戶界面進行調整。這包括表單控件、滾動條和 CSS 系統顏色的使用值。

3.3.未來方案：light-dark()

1）light-dark() 介紹

好消息！，CSS Color Module Level 5 Specification 新增加了一個函數 light-dark()。該函數接受兩個顏色值作為參數。根據您正在使用的顏色方案，它將輸出第一個或第二個顏色參數。

light-dark(<color>, <color>);

如規范中描述：

This function computes to the computed value of the first color, if the used color scheme is light or unknown, or to the computed value of the second color, if the used color scheme is dark.

使用的配色方案不僅基于用戶的 Light/Dark 模式設置，還基于 color-scheme 屬性的值。這與系統顏色的計算方法類似。

:root {
  color-scheme: light dark;
}

/* light 對應 #333，dark 對應 #ccc */
:root {
  --text-color: light-dark(#333, #ccc); 
}

2）light-dark() 兼容性

當前，現代瀏覽器對 light-dark() 的支持還不太好，僅有 firefox 瀏覽器的最新版本支持。

2）light-dark() 支持判斷

可以通過 @supports 和 CSS 偽元素來判斷。

#support::after {
  content: "? Your browser does not support light-dark()";
  background-color: #ff00002b;

  display: block;
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #ccc;
}
@supports(color: light-dark(#fff, #000)) {
  #support::after {
    content: "? Your browser supports light-dark()";
    background-color: #00ff002b;
  }
}

4.暗黑模式的應用

除了主要的網頁顏色主題切換外，還有一些其他應用場景。

1）暗黑模式圖像

2）暗黑模式陰影

3）暗黑模式調色板

4）暗黑模式段落

5.最后

網站是否啟用暗黑模式，取決于不同團隊、不同用戶群體、不同設計風格，下面是一些推薦你開啟的理由：

• UI 風格和功能會看起來很酷、很時尚
• 通過支持對 light 主題敏感的用戶，它可以增強可訪問性，減輕他們的眼睛疲勞
• 它允許用戶決定最舒適的內容消費方式，同時為我們提供了一種保持外觀和感覺的控制方式
• 它有助于延長具有 OLED 屏幕的設備的電池壽命，因為較亮的顏色消耗更多能量
• 最重要的一點，暗盒模式現狀非常非常受歡迎