Firefox:如何测试首选颜色方案?

2024-06-21

在 Firefox 67 中,可以使用媒体查询来检测用户对浅色或深色主题的偏好。 https://davidwalsh.name/demo/prefers-color-scheme.php

在我的 Firefox 版本(在 Ubuntu 下)中,我似乎更喜欢浅色主题。也就是说,下面的 CSS 给出了蓝色背景:

@media (prefers-color-scheme: light) {
   :root {}
  body {
    background-color: blue;
  }
}

我如何更改我的 Firefox 偏好设置,以便prefers-color-scheme: dark评估为真?

我发现一个插件似乎可以解决这个问题,但我一定是我自己的 CSS 出了问题,因为它在我的页面上不起作用。黑暗网站强制者 https://davidwalsh.name/demo/prefers-color-scheme.php


从 Firefox 87 开始,有待测试的功能prefers-color-schemedevtools 中默认启用,无需设置配置标志。您可以在检查器选项卡中找到它:

  • 选择太阳按钮模拟光照模式;
  • 选择月亮按钮模拟黑暗模式;
  • 如果未选择任何按钮,则将照常使用您的操作系统默认值。

在某些旧版本的 Firefox 中,此功能存在于标志后面。要测试这些版本之一,您可以通过以下方式启用此功能:about:config,并设置devtools.inspector.color-scheme-simulation.enabled财产给true。完成后,您将在与现代开发工具相同的位置找到它的控件,但作为单个画笔图标而不是今天的太阳/月亮切换按钮。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Firefox:如何测试首选颜色方案? 的相关文章

  • 使用 CSS 选择器和 BeautifulSoup 获取属性值

    我正在抓取网页Python并使用BeutifulSoup library I have HTML像这样的标记 tr class deals span class hotel name a href www example2 com a sp
  • CSS 底部边框悬停“抖动”

    我有一个导航栏 当您将鼠标悬停在导航按钮上时 我想给它一个橙色的底部边框 唯一的问题是 每当您悬停时 边框都会使内容 导航按钮 抖动 这是不应该的 另外 我的导航栏上已经有一个黑色的底部边框 因此无法更改它 HTML div ul li a
  • 尝试将星号添加到必填输入字段

    我想我不太明白 before and after因为我无法让这个工作 我只是想在表单中的必填字段后添加一个星号 我的代码很简单
  • 使用 CSS 修复自定义字体行高

    在我正在开发的新网络应用程序上使用自定义字体时 我遇到了一个奇怪的问题 这种自定义字体 FF DIN 似乎具有自然垂直的偏离中心的行高 这迫使我放置一些顶部填充黑客来补偿按钮和输入等元素的顶部空间 示例 绿色字体 Helvetica Neu
  • CSS 字体不起作用

    我正在尝试向我的网站添加自定义字体 我尝试了很多事情但没有成功 这是我的CSS代码 font face font family myFirstFont src url ellis ttf body margin 0 padding 0 wi
  • 如何制作可扩展的文本框?

    我想制作一本以给定宽度 高度开始的教科书 然后 如果用户输入的内容超过给定的空间量 文本框就会向下扩展 我该怎么做呢 我使用 CSS 吗 当用户超过允许的行数时 基本文本框仅显示滚动条 如何使文本框将行数再扩展 5 行
  • 带有透明背景的css3锯齿状边缘

    我试图在图像上的 div 上用 css3 制作锯齿状边缘 并且我需要它有一个透明的 bg bg 我的意思是锯齿状边缘在哪里 请参阅以下小提琴 http jsfiddle net ovb597yq http jsfiddle net ovb5
  • 如何在响应式设计中禁用缩放功能?

    在使用 iPad iPhone 和 或其他智能手机时 如何禁用响应式设计页面中的放大和缩小功能 有什么办法可以控制吗 创建 META 视口标签 并设置用户可扩展属性为 否 如下所示 更新的答案
  • Chrome扩展程序自定义光标

    我构建了一个 Google Chrome 扩展程序 在网站中放置一些 IMG 标签 hover 上的此 img 标记必须显示自定义光标 该扩展使用 jQuery 作为其注入的核心脚本 我尝试了以下方法 1 var cursor url ch
  • 如何在 Quill(富文本编辑器)中检测和修剪前导/尾随空格?

    如何检测并删除前导 尾随空格Quill https quilljs com 哪个是富文本编辑器 例如 样本HTML下面代表Quill文本的输出 nHi 我们想要检测并删除由以下命令创建的每个文本块的前导和尾随空格Quill 不适用于整个文档
  • 带有边框半径的CSS中的完美圆不起作用

    圆往往是椭圆形的 我想要的是完美的圆 border radius 100 不起作用我想知道为什么 http jsfiddle net 8gD2m 1 http jsfiddle net 8gD2m 1 badge display inlin
  • jquery - 如何根据我的滚动位置滚动顶部动画到下一个可见的 div/类?

    如果标题有点模糊 请原谅我 因为我不知道如何写下来 基本上 我们有一个包含 6 个 场景 的页面 他们都有班级 scene和不同的 ID 例如 scene1 scene2 etc 首先 我们必须动态更改每个场景的颜色 gt 场景 1 是浅色
  • HTML/CSS 水平导航子菜单悬停显示错误

    我正在创建一个带有水平导航和垂直子菜单的 HTML 页面 一切工作正常 除了子菜单上的悬停显示在实际菜单项的左侧 看我的jsfiddle https jsfiddle net qmcte349 https jsfiddle net qmct
  • 如何为带有标题图像的移动设备设置 HTML,该图像占据浏览器的整个宽度?

    我担心的是我必须为移动设备建立一个网站 概念中是将图像设置为标题 现在的问题是 不同的智能手机具有不同的显示分辨率 有例如840x560 480x320 或 800x480 我必须编写什么元标签 CSS 等才能使 每个 现代智能手机中的图像
  • 使用 css3 列 - 如何获取元素位置?

    为了将长 html 文件与列分开 我使用了 css3 列 padding 0px height 1024px webkit column gap 0px webkit column width 768px 我想获取指定元素的位置 所以我使用
  • 复制 Chrome 默认输入的轮廓样式

    如何设置默认 Chrome 输入的轮廓样式 焦点上为橙色 使其在每个浏览器中看起来都相同 Chrome 风格似乎是textarea focus outline rgb 229 151 0 auto 5px outline offset 2p
  • 如何以“打印”模式查看 Google 地图?

    我正在使用 Google Maps API v2 并且希望能够像 Google 在其地图页面上那样打印地图 您可以单击小打印机图标 它会创建一个具有相同地图的新弹出窗口 但所有不可打印的内容 如控件 都会被删除 我知道他们使用 media
  • 向 Twitter Bootstrap 添加新字体系列

    我怎样才能按照他们的方式将新的字体系列添加到 twitter bootstrap 中 他们使用一种叫做 woff 的东西 我正在尝试将 roboto 添加到 css 文件中 我怎样才能像他们那样做 woff 的事情呢 font face f
  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j
  • CSS3 背景渐变未验证,有人可以告诉我为什么吗?里面的代码示例

    有人能告诉我为什么下面的 css 没有验证吗 我一直在尝试自己研究这个问题 但没有运气 我读过的所有文档都说这是在 css3 中进行渐变的正确原因 header color white font size 12px font family

随机推荐

  • Python的reduce()短路了吗?

    If I do result reduce operator and False 1000 得到第一个结果后它会停止吗 自从False anything False 相似地 result reduce operator or True 10
  • 使用许多特殊字符将 R 连接到 HANA 数据库时出现问题

    我在将 HANA 数据读入 R 时遇到问题 我已通过以下方式建立了连接 ch lt odbcConnect HANA uid USER pwd PW 并确认我已通过以下方式连接 sqlTables ch 这会调出我的表格列表 对我想要拉取的
  • 为什么在 Windows 中使用 GetConsoleScreenBufferInfoEx 时控制台窗口会缩小?

    我正在尝试使用 GetConsoleScreenBufferInfoEx 和 SetConsoleScreenBufferInfoEx 设置 Windows 命令行控制台的背景和前景色 我正在 Python 中使用 wintypes 进行此
  • 如何限制用户键入时 JTextPane 中的字符数 (Java)

    我需要不允许在输入 X 后输入任何字符 我需要在输入 X 个字符后发出蜂鸣声 我知道如何在用户按 Enter 键后执行此操作 但我需要在用户按 Enter 键之前执行此操作 我从 Oracle 站点找到的方法是将 DocumentSizeF
  • 静态编译器和运行时编译器等术语的实际含义是什么?

    我正在努力学习更多 C 并尝试了解有关不同编译器及其技术的基础知识 我用谷歌搜索了很多次 但每次我都碰巧遇到需要更多解释的新术语 那么 本主题中的静态编译 动态链接等术语实际上意味着什么 某些语言 例如 C 在开始运行 即实际使用 之前将所
  • iOS UITableView:使用 CAGradientLayer 将背景颜色指定为渐变

    我刚刚开始使用 Xcode 4 3 中的主从视图模板 我试图更改主视图的背景颜色并将其设置为颜色渐变 这是我尝试过的 Colors m import Colors h implementation Colors UIColor naviga
  • GWT 在开发模式下运行缓慢

    我在开发模式下使用最新的 GWT 2 0 版本的 Eclipse Galileo 但它运行速度非常慢 我需要等待大约一分钟才能打开一个页面 但编译后 当我使用 Tomcat 5 5 运行它时 我的应用程序运行得很好 我的代码不太重 我猜有一
  • 使用 C# 解码 Git 索引文件

    有没有关于Git索引文件内部结构的文档 从各种书籍中我知道它是二进制的并且包含暂存文件的 SHA 我知道 Git plumbing 命令有助于揭示索引内容 但是 例如 我自己使用 C 读取索引怎么样 我知道这个功能有几种实现方式 所以可以研
  • 使用 EPplus 在 Excel 中添加下拉菜单

    我需要帮助 如何使用 Epplus 在 Excel 中添加下拉列表 无需验证 我只需要把它添加到我的模板中 下拉列表中的记录不是动态的 using ExcelPackage p new ExcelPackage ExcelWorksheet
  • Sub New() 在此上下文中无法访问,因为它是“Friend”

    那么这是什么意思以及如何解决它 如果我将 New 关键字放在下面的行中 则会出现此消息 如果删除它 我会在运行时收到错误消息 提示我需要使用 New 我究竟做错了什么 Dim oPS As AeccPointStyle New AeccPo
  • Youtube 播放器 Iframe,在 Firefox 上有声音但没有视频

    我正在使用 YT Player API 在滑块内创建多个 iframe youtube 视频 第一个视频在 onYouTubeIframeAPIReady 之后调用 当我单击正常工作的下一个按钮时 会出现下一个视频 但是当我尝试在 Fire
  • MAT(Eclipse 内存分析器)- 如何从内存转储中查看位图

    I m analyzing memory usage of my Android app with help of Eclipse Memory Analyzer http www eclipse org mat also known as
  • BluetoothLeScanner 服务内部问题

    Update从Android 10以上我认为你需要ACCESS BACKGROUND LOCATION权限 因此 如果此代码在最新的 Android 版本上不起作用 就是针对此问题的 ACCESS BACKGROUND LOCATION 受
  • Nashorn JSON.parse() - java.lang.OutOfMemoryError:Java 堆空间 - JDK8u60

    Nashron 发行说明声称他们修复了 JSON 解析器错误 但我仍然能够在新补丁 8u60 上产生 不同的 错误 这次是OutOfMemoryError 请参阅随附的 JSON 1 通常是类别和子类别关系 当我尝试调用 JSON pars
  • 使用 powershell 从 tfs 获取项目的最新版本

    我正在尝试使用 powershell 自动化我们的日常开发人员任务 我的 powershell 脚本已经完成一半了 我想从 TFS 获取特定项目的最新版本 开发人员将可以访问 TFS 中的多个项目 在这些项目中 特定项目下的文件需要更新 我
  • React Native ListView:前置项目

    是否可以将项目添加到 React Native 的 ListView 上onTopReached事件类似于将项目附加到onEndReached事件 目前 当我将行添加到列表中时 ListView 会滚动到顶部 用例 我有一个带有用户可以向下
  • 带有列标题的php数组到csv的转换

    我想将数组转换为 csv 我能够将关联数组转换为 csv 但无法获取标题 我想要动态地将数字类型日期作为标题 下面是我转换的数组 Array 0 gt Array NUMBER gt 67 TYPE gt Other DATE gt 3 3
  • 在 MySQL 中将值设置为 NULL

    我想要一个值被设置为NULL如果我提交的表单中的文本框中没有输入任何内容 我怎样才能做到这一点 我试过插入 NULL 但这只是添加了这个词NULL进入现场 我不确定我应该为此提供什么代码 我只是编写一个 UPDATE 查询 不要放NULL更
  • 我的 iPhone 6 获取 iPhone 5 媒体查询

    我不明白这里发生了什么事 我在 CSS 媒体查询中专门针对 iphone 5 media only screen and min device width 320px and max device width 568px some div
  • Firefox:如何测试首选颜色方案?

    在 Firefox 67 中 可以使用媒体查询来检测用户对浅色或深色主题的偏好 https davidwalsh name demo prefers color scheme php 在我的 Firefox 版本 在 Ubuntu 下 中