英文:
Background Color of Select Elements Not Changing with Site's Scheme in Chrome Extension
问题
我已开发了一个Chrome扩展程序，其中包括一个按钮和一个用于支持浅色和深色模式的网站的选择元素。按钮的颜色根据网站的颜色方案成功更改，但我在选择元素方面遇到了问题。虽然选择元素的颜色按预期更改，但其背景颜色保持不变，不适应网站的颜色方案。
我的目标是使选择元素的背景颜色根据网站的颜色方案动态更改。请注意，网站的颜色方案使用**<html style="color-scheme: light;">**声明进行更改。
我尝试将选择元素的背景颜色设置为透明，但这种解决方案没有产生期望的结果。此外，我尝试在**content.js**文件中添加了一个用于监听方案更改的监听器，但它不起作用。
是否有人能提供一个解决方案或绕过方法，以实现我的Chrome扩展程序中选择元素的动态背景颜色更改，考虑到网站的颜色方案通过**<html style="color-scheme: light;">**进行更改？非常感谢您的帮助。谢谢！
英文:
I have developed a Chrome extension that includes a button and a select element for a website that supports both light and dark modes. The button's color changes successfully according to the site's color scheme, but I'm facing an issue with the select element. While the color of the select element changes as expected, its background color remains unchanged, not adapting to the site's color scheme.
My goal is to make the background color of the select element change dynamically based on the site's color scheme. Note that the site's color scheme changes using the <html style="color-scheme: light;"> declaration.
I attempted to set the background color of the select element to transparent, but this solution did not yield the desired result. Additionally, I tried adding a listener for the scheme changes in the content.js file, but it's not working.
Could anyone suggest a solution or workaround to achieve this dynamic background color change for the select element in my Chrome extension, considering the site's color scheme changes by <html style="color-scheme: light;">? Your help would be greatly appreciated. Thank you!
答案1
得分: 0
我找到了一个Chrome扩展程序，可以通过单击一个按钮来更改我正在使用的网站的主题，所以我在扩展程序的代码中搜索，然后找到了这个：
var rootElement = document.documentElement;
var classList = rootElement.classList;
if (classList.contains('light')) {
console.log('light.');
} else {
console.log('dark.');
}
虽然不是最好的，但它满足了我的需求。
英文:
I found a chrome extension that changes the theme of the site that I was using with a one-button click, so I searched in the code of the extension and then found this:
var rootElement = document.documentElement;
var classList = rootElement.classList;
if (classList.contains('light')) {
console.log('light.');
} else {
console.log('dark.');
}
Though it's not the best, it serves my purposes.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论