标签: darkmode
将身体元素设计得苗条
我的目标是为我的网络应用程序制作暗模式。为了让我的设置进入npm init vite并选择 svelte 作为框架。然后按照命令行说明进行操作。转到 src > App.svelte：
请尝试以下操作：
body {
background: black;
}您将通过 vs-code 中的 svelte 扩展收到以下警告：
Unused CSS selector "body"
为了检查这个错误是否与浏览器有关，我在 chrome 开发工具中手动设置了该属性，并达到了预期的结果。
因此我有以下问题：
- 为什么 svelte 不允许以这种方式塑造身体造型？
- 如何将 body 标签设置为 svelte 样式？
- 深色模式如何实现？
推荐指数
解决办法
查看次数
三星互联网强制深色模式
我的网站是在浅色模式下设计的，不应该对任何形式的深色模式做出反应。这适用于除 Samsung Internet 之外的所有网站。每当我在三星互联网上打开网站时，它都会自动将白色背景替换为深色背景，并将字母颜色更改为白色。有谁知道如何解决这一问题？
推荐指数
解决办法
查看次数
无法在“创建下一个应用程序”中关闭/删除暗模式
以前使用 create-next-app 时，我总是会引导一个漂亮的浅色主题“欢迎使用 Next.js”应用程序，但今天当我使用 create-next-app 初始化 next.js 应用程序时，该应用程序会自动使用深色模式，因为这是我的系统偏好。以前没有发生过这种情况。
我想删除深色模式并仅保留浅色主题而不更改我的系统首选项，但我无法做到这一点。
这是我的 package.json：
{
"name": "next-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.2.3",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.20.0",
"eslint-config-next": "12.2.3"
}
}
推荐指数
解决办法
查看次数
在深色模式下嵌入 Instagram 帖子
Instagram 有一个深色模式，目前，如果您在浏览器版本/电脑上使用它，则只能通过 URL 参数“？theme =“dark””进行访问。
由于我的页面也有深色模式，因此当我的页面样式设置为深色时，我显然希望将帖子嵌入深色模式样式，因为否则看起来很糟糕。
我的第一个想法是，在使用之前将嵌入代码中的 URL 更改为具有 'theme="dark"' 属性，这是行不通的，并且由于没有关于此的真正文档，我想知道是否有人找出了正确的参数 以及 将其放在嵌入代码中的位置。
顺便说一句：我不打算使用 API 来嵌入帖子
推荐指数
解决办法
查看次数
How to automatically toggle the Dark Reader Chrome plugin?
Question
How can we automatically toggle Dark Mode at predetermined times?
Background
Every day, around 5 PM, I switch on the dark mode of the Dark Reader Chrome extension. I toggle it off again the next morning to get more bright light in the morning.
As of now, I have remind myself everyday to hit the <Alt>+<Shift>+<D>-shortcut that I have configured in Google Chrome (chrome://extensions/shortcuts):
browser google-chrome browser-automation google-chrome-extension darkmode
推荐指数
解决办法
查看次数
Tailwind 在 monorepo 架构中无法正常工作
我正在使用使用纱线工作区的 monorepo 架构，其中 Tailwind CSS 是项目的根。在其中一个工作区中，我正在使用 React，并且我已将 Tailwind 实用程序添加到其样式中。Tailwind 在项目中运行良好
- 每当我定义新颜色时它就不起作用。
- 此外，我还想实现 darkMode，
tailwind.config.js我在其中添加darkMode: 'class'并制作了一个上下文包装器来将 class='dark' 设置为 html 根，但在更改主题时<html class='dark'设置但dark:bg-black不起作用。
我的文件夹结构
Project
|
+-- packages
| |
| \-- react-project-1
| | |
| | +--app.js
| | +--app.css
| |
| \-- react-project-2
|
+-- tailwind.config.js
我的 tailwind.config.js
module.exports = {
mode: 'jit',
purge: [
'./packages/react-project-1/src/**/*.{js,ts,jsx,tsx}',
'./packages/react-project-2/src/**/*.{js,ts,jsx,tsx}',
],
darkMode: 'class',
theme: {
colors: {
orange: '#E05507',
},
extend: {},
},
variants: { …推荐指数
解决办法
查看次数
如何像 GitHub 一样切换到 Chromes 深色滚动条？
我刚刚发现，当您使用 GitHub 的暗模式时，GitHub 在 Chrome 中使用暗滚动条。如果您切换颜色模式，滚动条也会切换。
我怎样才能达到这种行为？我找不到任何方法告诉浏览器使用暗模式。
暗模式滚动条：
推荐指数
解决办法
查看次数
如何根据用户喜欢的配色方案呈现不同的下一个/图像？
我正在尝试在下面的代码中使用 anext/image而不是常规标签。img使用常规<img>标签，以下内容完全实现了我正在寻找的内容：
<div>\n <picture>\n <source\n srcSet="https://via.placeholder.com/100/333333/ffffff.png"\n media="(prefers-color-scheme: dark)"\n />\n <img\n src=\'https://via.placeholder.com/100/dddddd/000000.png\'\n width=\'100px\'\n height=\'100px\'\n alt=\'Placeholder image\'\n />\n </picture>\n <p>Change your OS or browser\'s preferred color scheme to see a different image.</p>\n</div>事实上，当我将操作系统（或浏览器）设置为深色主题时，我会得到深色图像，反之亦然。
\n但是，如果我尝试使用 a 进行同样的操作next/image，我每次都会得到以光为主题的图像\xe2\x80\xa6 我无法将其放入代码片段中，因为next/image需要 Next.js 服务器，但这里是代码我正在使用的，在我的测试中，它由 Next.js 开发服务器支持，并在 next.config.js 中配置了适当的图像相关设置：
// pages/test.js\nimport Image from \'next/image\'\n\nexport default function MyWebPage () {\n return (\n <div>\n <picture>\n <source\n srcSet="https://via.placeholder.com/100/333333/ffffff.png"\n media="(prefers-color-scheme: …推荐指数
解决办法
查看次数
如何检测浏览器是否支持深色模式
我们可以用来prefers-color-scheme: dark检测黑暗模式是否被激活：
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
有没有办法检测浏览器是否支持深色模式？（“支持深色模式”是指浏览器自动更改网页的默认背景/文本颜色）。
在 CSS 中，我们可以强制使用深色模式
color-scheme: dark;
但是，某些浏览器（Android 版 Firefox）会忽略它。因此，如果黑暗模式不可用，我想隐藏主题选择。
推荐指数
解决办法
查看次数
用户禁用“首选颜色方案”或深色模式的方法？
我在这个网站上看到了大量关于程序员如何打开和关闭网页的暗模式的问答。
但是，作为用户，我如何禁用浏览器的暗模式呢？
我习惯将操作系统设置为深色主题，但我希望浏览器页面默认为浅色主题。
我chrome://flags/#enable-force-dark
也试过了chrome.exe --disable-features=DarkMode
，都没有效果。（2023 年 2 月，Chrome 110）
我知道很多网页都是通过阅读来决定是否启用深色模式prefers-color-scheme，但这似乎是一个无法改变的值。
我还知道在 DevTools 中可以通过“模拟 CSS 媒体功能”来启用它prefers-color-scheme: light。但它无法持久化和自动化 - 这意味着我必须启用 DevTools 并为每个打开的新页面启用模拟。
到目前为止，除了关闭操作系统的深色模式之外，还有什么方法可以禁用网页的深色模式呢？
推荐指数
解决办法
查看次数
标签 统计
darkmode ×10
css ×4
javascript ×3
next.js ×3
browser ×2
html ×2
embed ×1
image ×1
instagram ×1
nextjs-image ×1
package.json ×1
reactjs ×1
svelte ×1
tailwind-css ×1
themes ×1
userscripts ×1
vite ×1