、问题描述

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;

}