、問題描述

FineReport能不能設置單選按鈕組控件每個選項的顏色，而且每個顏色都不一樣，這樣使選項看起來更加美觀，而且有層次感。

最終效果如下：

二、解決思路

FineReport內置的單選按鈕組控件并沒有提供可以設置選項顏色的地方，因此，要改變顏色，就需要使用代碼來修改。針對這個問題，可以有以下兩種思路：

一是直接通過js初始化后事件，修改對應的對應選項的css屬性。

二是直接對選項的顯示值拼接HTML代碼。

三、實現步驟

1）先創建一個單選按鈕組控件

將控件的數據字典設置如下：

類型設置選擇公式，實際值設置為：

range(3)+"#"

此時的預覽效果如下，顏色單一不美觀。

2）查看對應的HTML源碼

預覽報表頁面之后，按下F12鍵，定位到單選按鈕組控件的源碼，如下，可見選項的文字與它前面的圓圈都在同一個span標簽里面，這樣如果通過js直接給這個span標簽設置css屬性，就達成不了我們想要的效果。需要另外做一些處理才行，這樣相比另一種方式比較麻煩，因此我們放棄了通過js來實現的方法。

3）設置控件的顯示值

顯示值的公式如下，給選項拼接了span標簽，并且設置標簽的前景顏色為白色，背景顏色為紅色：

"<span style='color:#fff;background-color:red'>" + $$$ + "</span>"

此時預覽的效果如下，：

初步的效果已經達成了，但是樣式還是不太美觀。第一背景顏色都一樣，沒能體現選項之間的層次感；第二背景顏色剛好包裹了文字，顯得有點小家子氣，不夠大方得體；第三，背景塊是方形的，有棱有角，顯得難看。

下面一一來解決這些問題。

第一個問題，背景顏色一致，如何實現不同顏色呢。其實只要判斷一下不同的選項拼接出不同的顏色即可。

第二個問題，背景太小。首先想到的是改變span標簽的寬和高。但是span的寬度是不能直接改變的，需要先將span標簽設置成block塊，才能改變寬度。同時還要考慮一個問題，如果我們設置了span標簽的寬度，結果選項里的文字長度超過了這個寬度怎么辦？綜合各種考慮之后，最終決定改變span的內邊距padding屬性來達到這個效果。

第三個問題，方塊太難看，那就把它改成圓角。通過設置border-radius屬性來達成這個效果。

最終將顯示值的公式修改如下：

"<span style='color:#fff;padding:1px 5px;border-radius:10px;background-color:" + switch($$$, "1#", "red", "2#", "#f5c13c", "3#", "green") + "'>" + $$$ + "</span>"

此時預覽效果如下，已經達成了最初想要的結果：

四、備注

版本信息：10.0.19(Build#persist-2022.06.10.10.03.23.562)

注意事項：控件顯示值雖然拼接了HTML代碼，但是不需要設置使用HTML來顯示內容，也能實現效果。當然，如果設置了使用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 屏幕的設備的電池壽命，因為較亮的顏色消耗更多能量
• 最重要的一點，暗盒模式現狀非常非常受歡迎

前端開發中，CSS樣式經常需要覆蓋默認樣式以實現定制化的視覺效果。有時我們需要使用CSS穿透（穿透CSS）來實現這一點，特別是當我們需要修改內置元素的默認樣式時，例如select下拉菜單。下面是一個關于如何使用CSS穿透覆蓋默認樣式并實現自定義原生select控件樣式的教程。

首先，讓我們來看看如何使用CSS穿透覆蓋默認樣式。CSS穿透是一種通過在CSS中使用偽元素和子元素選擇器來覆蓋默認樣式的技術。以下是一個示例代碼：

css

復制代碼

select {

background: transparent;

border: none;

outline: none;

}