javascript - 如何为随机HTML设置暗模式？

该站点包含一个亮/暗模式开关。我知道如何使用JavaScript和CSS为我的网站设置不同的主题。

我进行了AJAX调用，作为响应，它是一个HTML字符串。该字符串作为子代附加在DIV中。问题是我无法控制此DIV中的内容。内容是通过CMS生成的，可以是任何内容。

是否可以为该随机内容设置暗模式？
如何查询每个DOM元素并更改其背景颜色，文本颜色？
我已经看到您可以根据here计算颜色是亮还是暗

UPDATE提出了可行的解决方案：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
 <p
    style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; margin-top: 1.5em; margin-bottom: 1.5em; font-size: 1.1875em; font-family: &quot;Mercury SSm A&quot;, &quot;Mercury SSm B&quot;, Georgia, Times, &quot;Times New Roman&quot;, &quot;Microsoft YaHei New&quot;, &quot;Microsoft Yahei&quot;, 微软雅黑, 宋体, SimSun, STXihei, 华文细黑, serif; line-height: 1.5; animation: 1000ms linear 0s 1 normal none running fadeInLorem; background-color: rgb(85, 98, 113);">
    <font color="#f7f5f5">Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Metus
        aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Ultrices tincidunt arcu non sodales
        neque. Ipsum nunc aliquet bibendum enim facilisis gravida. Consequat ac felis donec et odio. Orci sagittis
        eu volutpat odio facilisis mauris. Sagittis nisl rhoncus mattis rhoncus. Vel elit scelerisque mauris
        pellentesque pulvinar pellentesque habitant morbi. Phasellus egestas tellus rutrum tellus pellentesque eu
        tincidunt. Non blandit massa enim nec dui nunc mattis enim. Amet nisl suscipit adipiscing bibendum est
        ultricies. Porttitor massa id neque aliquam vestibulum morbi blandit cursus risus. Donec et odio
        pellentesque diam volutpat commodo sed egestas egestas.</font>
</p>
<script>
    var options = {
        bottom: '64px', // default: '32px'
        right: 'unset', // default: '32px'
        left: '32px', // default: 'unset'
        time: '0.5s', // default: '0.3s'
        mixColor: '#fff', // default: '#fff'
        backgroundColor: '#fff',  // default: '#fff'
        buttonColorDark: '#100f2c',  // default: '#100f2c'
        buttonColorLight: '#fff', // default: '#fff'
        saveInCookies: false, // default: true,
        label: '🌓' // default: ''
    }

    const darkmode = new Darkmode(options);
    darkmode.showWidget();
</script>

https://jsfiddle.net/3Lhwyogc/

最佳答案

是的，也可以为任何随机内容设置暗模式。
您可以阅读这篇写得不错的博客，以了解-> https://dev.to/wgao19/night-mode-with-mix-blend-mode-difference-23lm

您应该检查Darkmode.js基于此概念，并通过一个小部件来打开和关闭暗模式。

Darkmode.js

您只需在您的网页中添加这些行，您就会获得一个切换按钮。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>

  var options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '🌓' // default: ''
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

</script>

关于javascript - 如何为随机HTML设置暗模式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56915096/