如何让深色模式效果作用于CSS绘制的圆形元素

问题说明 #

我使用了一款深色模式切换器，可改变页面所有文本及背景色，但CSS绘制的圆形元素存在适配问题。需求如下：

• 亮模式时，圆形内部背景为黑色
• 深色模式（页面背景为黑色）时，圆形内部背景为lime

目前圆形设置了固定背景色#d9ff76!important，移除该设置后，圆形背景会与页面背景色重叠（亮模式下与页面背景同色，深色模式下也与页面背景同色），导致显示异常。

解决方案 #

核心是利用深色模式的父类选择器.dark-mode，针对性覆盖圆形的背景色，同时避免固定优先级的!important干扰。

1. 修改基础圆形CSS #

移除.circle中固定的background-color: #d9ff76!important;，替换为亮模式下的默认背景色：

.circle {
  width: 250px;
  height: 250px;
  border: 0.5px solid; 
  border-radius: 50%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 15px 0px;
  overflow: hidden;
  margin: 0 auto 1em;
  background-color: black; /* 亮模式下默认黑色背景 */
}

2. 添加深色模式下的圆形样式规则 #

在深色模式的CSS代码中，新增对.circle的背景色覆盖：

.dark-mode .circle {
  background-color: lime; /* 深色模式下切换为lime背景 */
}

修改后，亮模式时圆形背景为黑色，与页面亮背景形成区分；切换到深色模式时，圆形背景自动变为lime，与黑色页面背景形成清晰对比，同时不会影响圆形内的背景图显示。

内容的提问来源于stack exchange，提问作者Emanuele Pesa