在颤动中更改暗模式的文本颜色(具有动态主题)？
在颤动中更改暗模式的文本颜色是通过使用CSS中的@media查询和CSS变量来实现的。具体步骤如下：
- 首先，我们需要在HTML文档的头部添加一个meta标签，用于指定页面支持暗模式：
<meta name="color-scheme" content="light dark">- 接下来，在CSS中定义两套主题的颜色变量，一套用于亮模式，一套用于暗模式。例如：
:root {
--text-color-light: #000000; /* 亮模式下的文本颜色 */
--text-color-dark: #ffffff; /* 暗模式下的文本颜色 */
}- 然后，使用@media查询来根据当前的颜色模式选择相应的文本颜色。例如：
body {
color: var(--text-color-light); /* 默认使用亮模式下的文本颜色 */
}
@media (prefers-color-scheme: dark) {
body {
color: var(--text-color-dark); /* 当前为暗模式时使用暗模式下的文本颜色 */
}
}通过上述步骤，当用户的设备处于暗模式时，文本颜色会自动切换为暗模式下的颜色，而在亮模式下则使用亮模式下的颜色。这样可以实现在颤动中更改暗模式的文本颜色。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云云数据库MySQL版、腾讯云CDN加速等。具体产品介绍和链接地址请参考腾讯云官方网站。
相关·内容
1回答
如何在:root和for全局变量中触发偏好配色方案？
html、css、color-scheme
我有一个类似下面的scss代码：
:root {
...some global color related variables
@media (prefers-color-scheme: dark) {
...global colors are overwritten
}
}
我有一个在暗模式和亮模式之间切换的按钮，它的javascript代码是这样工作的：
document.documentElement.style = `color-scheme: ${mode};`; // mode is either light or dark
const meta = docu
浏览 3提问于2021-07-03得票数 0
1回答
CSS配色方案选择器或媒体查询
css、media-queries、color-scheme
是否可以编写只在color-scheme暗时应用的媒体查询或CSS选择器。
:root {
/*Special CSS variable see: https://twitter.com/diegohaz/status/1529543787311144961*/
color-scheme: dark;
}
:root {
--blue-france: #f5f5fe;
}
/* Psudo code, I know it isn't possible to use var in selectors, I just hope there is a way aro
浏览 12提问于2022-09-24得票数 1
1回答
在手机上更改深色模式下html电子邮件的背景色
css、html-email、ios-darkmode、darkmode、android-dark-theme
我试图让HTML电子邮件有正常的白色背景，即使移动暗模式是打开的，我已经添加了以下元和媒体查询 meta name="color-scheme" content="light dark"
meta name="supported-color-schemes" content="light dark"
@media (prefers-color-scheme: light dark) {
body {
background: #ffffff !important;
浏览 51提问于2021-07-02得票数 0
5回答
为类和媒体查询定义暗模式，而不重复CSS自定义属性声明，并允许用户在颜色模式之间切换。
javascript、css、media-queries
我有：
body { background: white; }
要显示暗模式，我使用.dark类：
.dark body { background: black; }
为了检测用户是否将操作系统设置为使用暗主题，我们使用了。
@media (prefers-color-scheme: dark) {
body { background: black; }
}
然后，我们有一个想法，干(不要重复自己)编程。我们可以在不重复CSS属性声明的情况下定义暗模式吗？和过程中，允许用户通过JS在颜色模式之间切换吗？
在上面的示例中，.dark类和媒体查询是彼此的副本。
我至今所做的一切
跳过CSS中的
浏览 31提问于2022-01-25得票数 4
回答已采纳
1回答
React Dark模式处理程序
css、reactjs、matchmedia
我在App组件中有以下代码。 const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
const [isDarkMode, setIsDarkMode] = React.useState(darkMode.matches);
const darkModeChangeHandler = (e) => {
console.log('e.matches', e.matches);
setIsDarkMode(e.matches);
};
darkMode.addL
浏览 21提问于2019-12-17得票数 1
1回答
与两个徽标兼容的Sendgrid深色模式
html、css、sendgrid
我正在使用Sendgrid，但它在深色模式下与徽标有冲突，我的徽标是黑色的，我不想在字母上添加白色边框。我有两个标志，一个是黑色的，一个是白色的。我需要在所有设备上检测它何时处于黑暗模式，何时不是。 在我的head html上，我有： <meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark"> 在css样式中，我有这样的设置： .dark-blo
浏览 16提问于2020-11-04得票数 1
1回答
如何使用首选颜色方案媒体查询在电子邮件中呈现不同的图标？
css、media-queries、darkmode
我正在尝试更改我通过应用程序发送的电子邮件的图标。 目前，我使用的方法是创建两组不同的图标，一组用于亮模式，另一组用于暗模式，并将其中一个的CSS显示属性设置为none。 像这样 //for light mode
@media (prefers-color-scheme: light) {
.icon-dark{
display: none !important;
}
}
//for dark mode
@media (prefers-color-scheme: dark ) {
.icon-light{
浏览 19提问于2020-11-27得票数 0
回答已采纳
1回答
背景-支持黑暗模式下的HTML电子邮件
html、css、html-email、mode
这个问题是关于HTML电子邮件通知黑暗或灯光模式。
我很难让background-image在css类中正确地显示白色徽标或黑色徽标，这取决于查看电子邮件的人在他们的应用程序或操作系统上的模式首选项。
这是我的密码。
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
@media (prefers-color-scheme: dark) {
.logo {
background: url(logo-dark.png) center center no-repeat;
}
}
浏览 13提问于2022-11-28得票数 0
回答已采纳
1回答
是否有方法检查用户的浏览器主题是什么颜色？
css、colors
我最近把我的Mac升级到Mojave了。在它中，计算机现在向浏览器发送关于黑暗模式是否打开的信息，以便在CSS中使用，如本例所示，这使得<body>中的文本在打开时为蓝色：
@media (prefers-color-scheme: dark) {
body {
color: blue;
}
}
一些网站使用这个设置他们的标签图标为白色或浅灰色，如果它是开着的。例如：
然而，如果浏览器没有设置为一个黑暗的主题，它看起来很糟糕，所以这并不是一个很好的方法
浏览 0提问于2019-09-04得票数 1
5回答
我有一个css样式的网站。当我在某些浏览器中查看时，当启用深色模式时，css绝对会被破坏，并且在我的网站中发生变化的颜色看起来绝对丑陋。如何防止我的css/配色方案因为暗模式而被更改？
当我通过我的android设备上的whatsapp发送的链接打开我的url时，默认的浏览器Android的'internet‘应用程序会自动调整CSS的样式，因为我激活了暗模式。如果其他用户转到我的页面并激活了暗模式，我希望他们看到的是原始样式，而不是暗模式编辑后的版本。
我发现可以使用这个媒体查询将css设置为暗模式：@media (prefers-color-scheme: dark) {。我可以复
浏览 5提问于2020-02-08得票数 5
1回答
prefers color-scheme激活，无论暗模式是否激活
css、darkmode
我在我的网站上使用下面的CSS在深色模式下反转图像： @media (prefers-color-scheme: dark) {
#main-logo img {filter: invert(1);}
} 它适用于暗模式，但在亮模式下也是激活的。我不确定如何修改它才能让它工作--它看起来很简单。
浏览 9提问于2021-04-26得票数 0
4回答
如何通过系统防止受力暗模式？
javascript、css、google-chrome
网站和应用程序上的暗/光模式切换设置正在执行，还有一些系统默认的主题模式，比如chrome tools提供强制暗模式，但我希望我的网站能够以其构建的方式查看。那么，我如何防止力暗模式，适用于铬？
我尝试过prefers-color-scheme媒体查询，但我想，我做错了什么或者遗漏了什么。
@media (prefers-color-scheme: dark) {
body {
background: #fff;
}
}
浏览 4提问于2020-07-20得票数 7
回答已采纳
11回答
如何覆盖css偏好-配色方案设置
javascript、html、css、media-queries
我正在实现一种黑暗模式，因为macOS、iOS和Windows都引入了黑暗模式。
Safari、Chrome和Firefox有一个本机选项，使用以下CSS媒体规则：
@media (prefers-color-scheme: dark) {
body {
color:#fff;
background:#333333
}
这将自动识别被设置为暗模式的系统，并应用封闭的CSS规则。
然而，即使用户的系统设置为黑暗模式，也可能是因为他们更喜欢某个特定网站的轻量或默认主题。Microsoft用户也不支持@media (prefers-color-scheme。为了获得最好的用户体验，我
浏览 0提问于2019-05-24得票数 65
回答已采纳
1回答
jQuery -使用本地存储和首选颜色方案切换暗模式
javascript、jquery、darkmode
我有一个dark-mode函数，它可以检测系统默认外观(light、dark、auto)，并更改CSS以匹配选定的系统theme。我还允许localStorage在用户浏览我的站点上的不同子页面时记住上次选择的模式。 问题是，我的函数仅在系统默认设置为轻型模式时在模式之间切换。 如何更新代码，以便在系统设置为暗模式或自动模式时，能够覆盖和切换亮模式？ $(document).ready(function() {
if (localStorage.getItem("mode") == "dark-theme") {
$("body"
浏览 13提问于2021-02-01得票数 2
回答已采纳
4回答
是否有一种“静态”的方式来选择一个或另一个图像，根据黑暗模式？
html、css
我有一个非常简单的静态站点，用HTML和CSS风格的规则编写。HTML代码的一种简化形式是：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My titl
浏览 10提问于2022-12-01得票数 2
回答已采纳
1回答
仅在web版本Ionic电容上禁用黑暗主题(请继续使用iOS和安卓)
css、ionic-framework、progressive-web-apps、capacitor、darkmode
我有运行PWA (web)，iOS和Android的Ionic应用程序。我尝试通过设置web版本禁用黑暗模式
<meta name="color-scheme" content="light" />
但没起作用。
在我的variables.css：
@media (prefers-color-scheme: dark) {
body {
...
}
.ios body {
...
}
.md body {
...
}
}
我的网页和安卓版本指的是.md标签，所以
浏览 16提问于2022-01-20得票数 1
1回答
如何不让手机上的暗模式影响我的网站？
html、ios-darkmode、android-darkmode
当手机在系统UI中设置了暗模式时，它会影响我网站上的html和css，例如更改颜色。我不希望这事发生。有没有办法阻止用户界面暗模式改变我的html的样式？
下面是我添加的没有给出任何结果的代码片段。
@media screen and (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
@media (prefers-color-scheme: light) {
}
浏览 22提问于2020-05-24得票数 3
1回答
如何使用媒体查询和选择器同时使用scss？
css、sass、media-queries
所以我正在创建一个支持黑暗模式的web应用程序。
如果设备默认选择暗模式，它将通过媒体查询@media (prefers-color-scheme: dark)使用暗模式。
但我也希望有一个功能，用户可以手动切换到黑暗模式，添加一个属性到主体：data-theme="dark"。
所以我试了一下：
// ...
.ChatScreen {
background-color: #eee;
}
@media (prefers-color-scheme: dark), body[data-theme="dark"] {
.ChatScreen {
浏览 6提问于2020-02-17得票数 0
回答已采纳
1回答
如何检测浏览器是否支持暗模式
javascript、css、browser、darkmode
我们可以使用prefers-color-scheme: dark来检测暗模式是否激活：
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
是否有方法检测浏览器是否完全支持黑暗模式？(所谓“支持黑暗模式”，意思是浏览器自动更改网页的默认背景/文本颜色)。
在CSS中，我们可以使用
color-scheme: dark;
然而，一些浏览器(用于Android的Firefox)会忽略它。因此，我想隐藏主题选择，如果黑暗模式是不可用的。
浏览 1提问于2021-11-13得票数 6
6回答
如何使用JavaScript检测暗模式？
javascript、macos-darkmode
Windows和macOS现在有暗模式。
对于CSS，我可以使用：
@media (prefers-dark-interface) {
color: white; background: black
}
但我用的是
例如：
const stripeElementStyles = {
base: {
color: COLORS.darkGrey,
fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
浏览 2提问于2019-05-31得票数 259
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
