要解决按钮边框在暗模式下选择的颜色不正确的问题,您可以使用 CSS 中的媒体查询和伪类来为不同模式下的按钮设置不同的边框颜色。
以下是一个示例代码,演示如何使用媒体查询和伪类来设置按钮边框的正确颜色:
HTML:
CSS:
/* 默认按钮样式 */
.btn {
padding: 10px;
background-color: #ffffff; /* 按钮背景色 */
color: #000000; /* 按钮文字颜色 */
border: 2px solid #000000; /* 按钮边框颜色 */
}
/* 暗模式下的样式 */
@media (prefers-color-scheme: dark) {
/* 修改按钮边框颜色为白色 */
.btn {
border-color: #ffffff;
}
}
/* 鼠标悬停时的样式 */
.btn:hover {
background-color: #000000; /* 高亮背景色 */
color: #ffffff; /* 高亮文字颜色 */
}
在上述代码中,我们使用了媒体查询 @media (prefers-color-scheme: dark)
来检测用户的系统是否处于暗模式。在暗模式下,我们使用 .btn
类的样式修改按钮的边框颜色为白色。
注意,为了让按钮在鼠标悬停时仍然具有正确的颜色,我们还使用了 .btn:hover
伪类来修改按钮的背景色和文字颜色。
您可以根据自己的需求修改按钮的样式和颜色。