标签: darkmode

我正在尝试使用 的值localStorage来显示两个 Twitter 提要之一，一个用于浅色模式主题，另一个用于深色模式。它的工作原理，但我必须刷新正确的CSS的网页-要么twitter-dark-display-none或twitter-light-display-none-工作。

使用jQuery(document).ready(function ()没有帮助。

The Fiddle: https://jsfiddle.net/zpsf5q3x/2/但由于 JSFiddle 限制显示第三方框架，示例推文没有显示。而且，localstorage 也可能无法在那里工作。

Fiddle 调用两个外部库： https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css和https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js

HTML：

注意data-theme="dark"第一个块中的 。

<div class="twitter-dark-display-none">
<a class="twitter-timeline" data-width="170" data-height="200" data-theme="dark"
 data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/StackOverflow?ref_src=twsrc%5Etfw">Tweets</a>
</div>

<div class="twitter-light-display-none">
<a class="twitter-timeline" data-width="170" data-height="200" data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/StackOverflow?ref_src=twsrc%5Etfw">Tweets</a>
</div>

jQuery：

使用 localStorage 在暗模式和正常模式之间切换整个站点的整体功能。

$('body').toggleClass(localStorage.toggled);
function darkLight() {
  if (localStorage.toggled != 'dark') {
    $('body').toggleClass('dark', true);
    localStorage.toggled = "dark";
  } else {
    $('body').toggleClass('dark', false);
    localStorage.toggled …

我们可以用来prefers-color-scheme: dark检测黑暗模式是否被激活：

const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

有没有办法检测浏览器是否支持深色模式？（“支持深色模式”是指浏览器自动更改网页的默认背景/文本颜色）。

在 CSS 中，我们可以强制使用深色模式

color-scheme: dark;

但是，某些浏览器（Android 版 Firefox）会忽略它。因此，如果黑暗模式不可用，我想隐藏主题选择。

WinForm可以使用explorer或StartAllBack等系统深色模式主题吗？

我已经尝试过这些事情：

int trueValue = 0x01, falseValue = 0x00;
SetWindowTheme(this.Handle, "DarkMode_Explorer", null);
DwmSetWindowAttribute(this.Handle, DwmWindowAttribute.DWMWA_USE_IMMERSIVE_DARK_MODE, ref trueValue, Marshal.SizeOf(typeof(int)));
DwmSetWindowAttribute(this.Handle, DwmWindowAttribute.DWMWA_MICA_EFFECT, ref trueValue, Marshal.SizeOf(typeof(int)));

但这些只会使标题栏和滚动条变暗，对其他控件没有区别。

如何将所有控件设置为系统深色风格，如下所示：

聚苯乙烯

如果您仅将此代码应用于表单的句柄，则这只对标题栏生效。但是，如果您迭代所有控件的句柄来应用此代码，则会将深色主题应用于某些控件，但不是所有控件。

private void ThemeAllControls(Control parent = null) {
    parent = parent ?? this;
    Action<Control> Theme = control => {
        int trueValue = 0x01;
        SetWindowTheme(control.Handle, "DarkMode_Explorer", null);
        DwmSetWindowAttribute(control.Handle, DwmWindowAttribute.DWMWA_USE_IMMERSIVE_DARK_MODE, ref trueValue, Marshal.SizeOf(typeof(int)));
        DwmSetWindowAttribute(control.Handle, DwmWindowAttribute.DWMWA_MICA_EFFECT, ref trueValue, Marshal.SizeOf(typeof(int)));
    };
    if (parent == this) Theme(this);
    foreach (Control control in parent.Controls) {
        Theme(control);
        if (control.Controls.Count != 0)
            ThemeAllControls(control);
    } …

我正在使用 laravel livewire table 包 ([laravel livewire table][1]

[1]： https: //github.com/rappasoft/laravel-livewire-tables）在我的 laravel 应用程序（v8）上。

我还在 v3 上使用 tailwind CSS。

默认情况下，此包为表格上的暗模式添加一些顺风类。但我不想使用深色模式。无论浏览器配置如何，我希望我的网站保持轻便。

我读到我必须在 tailwind.config.js 上设置它，所以我尝试了一些类似的操作：

module.exports = {

    plugins: [require('@tailwindcss/forms')],
    darkMode: false,
};

module.exports = {

    plugins: [require('@tailwindcss/forms')],
    darkMode: 'class',
};

module.exports = {

    plugins: [require('@tailwindcss/forms')],
    darkMode: 'media',
};

没有人致力于禁用黑暗模式......

你知道该怎么做吗？

我在这个网站上看到了大量关于程序员如何打开和关闭网页的暗模式的问答。

但是，作为用户，我如何禁用浏览器的暗模式呢？

我习惯将操作系统设置为深色主题，但我希望浏览器页面默认为浅色主题。

我chrome://flags/#enable-force-dark
也试过了chrome.exe --disable-features=DarkMode
，都没有效果。（2023 年 2 月，Chrome 110）

我知道很多网页都是通过阅读来决定是否启用深色模式prefers-color-scheme，但这似乎是一个无法改变的值。

我还知道在 DevTools 中可以通过“模拟 CSS 媒体功能”来启用它prefers-color-scheme: light。但它无法持久化和自动化 - 这意味着我必须启用 DevTools 并为每个打开的新页面启用模拟。

到目前为止，除了关闭操作系统的深色模式之外，还有什么方法可以禁用网页的深色模式呢？

是否可以在Github README中获取用户选择的颜色主题？

由于可以在 Github 上选择深色或浅色主题，因此在 README 文件（和其他 Markdowns）上相应地显示图形将很有用。例如，如果选择深色主题，则显示图形的明亮版本，如果选择浅色主题，则显示图形的深色版本。

我环顾四周，但找不到任何相关的问答。我正在使用 tailwindCSS 在 ReactJS 中构建一个项目，并在网站上实现暗模式。一切正常，但现在我的背景图像遇到了一些问题。我已将两个图像设置为tailwind.config.js

  darkMode: 'class',
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'code': "url('/src/components/About/coding-bg-dark.png')",
        'light-code': "url('/src/components/About/lightcode.png')",
       })
    },
  },

并将类名放在合适的部分

<section id='introduction' className="bg-code dark:bg-light-code bg-cover bg-fixed flex flex-wrap content-center w-full md:h-screen">

但是当我切换深色模式时，图像不会改变，深色图像保持在浅色模式。知道我该怎么走吗？

我有一个带有 .net maui 的弹出主控/详细信息页面。

在深色模式下，汉堡按钮、后退按钮和工具栏项目更多图标（三个点）在windwos上显示为黑色。在 Android 上，只有工具栏项目更多图标（三个点）是黑色的，后退按钮是白色的。

如何在 windows、android、ios 上的 .net maui 中更改我的工具栏项目更多图标颜色、humberger 图标颜色和后退按钮颜色？

提前致谢。

视窗：

安卓：

Windows 浅色模式：这里如何使更多图标变白？

我的风格`

<Color x:Key="Background_Dark">#081B25</Color>
<Color x:Key="DarkGreenBackgroundColor">#187D21</Color>
<Style TargetType="NavigationPage" ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource DarkGreenBackgroundColor}, Dark={StaticResource Background_Dark}}" />
    <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource DarkGreenBackgroundColor}, Dark={StaticResource Background_Dark}}" />
    <Setter Property="BarTextColor" Value="White" />
    <Setter Property="IconColor" Value="White" />
</Style>

<Style TargetType="Page" ApplyToDerivedTypes="True">
    <Setter Property="Padding" Value="0"/>
    <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=White, Dark={StaticResource Background_Dark}}" />
</Style>

`

根据 flutter 应用程序中的地图视图更改地图视图。

如何仅在深色模式下使用 sass 更改 Bootstrap 5.X 中的主题颜色（主要、次要等）？我知道如何在浅色和深色主题模式下更改主色：

自定义.scss

... snip ...
@import "../bootstrap/scss/functions";

$primary: #0e548c;

@import "../bootstrap/scss/variables";
... snip ...

但是如何将 $primary 颜色更改为在黑暗模式下更亮一点呢？例如：#0062cc

在当前文档（variables_dark.scss）中，我只找到了变量：

• 主要文本深色，
• 主要背景微妙黑暗，
• ...

我知道如何更改这些变量值，但不知道如何分配不存在的变量值（没有原色黑暗）。

添加：

@include color-mode(dark) {    
    $primary: #0062cc;
}

之后@import "../bootstrap/scss/root";也不起作用..