Question

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

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

是否可以为此随机内容设置暗模式？如何查询每个DOM元素并更改其背景颜色，文本颜色？我见过，您可以根据here

计算颜色是亮还是暗

更新正在解决的解决方案：

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/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/

Answer 1

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

您应该查看<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/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>，它基于此概念，并为您提供了一个用于打开和关闭暗模式的小部件。

Darkmode.js

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

{{1}}

Answer 2

如果该div应该是您页面的一部分，并且您可以控制该页面中的内容，那么这很容易，只要开始预测所有内容并添加数百行CSS：

.dark .item {
    background: black;
}
.light .item {
    background: white;
}

或者您可以通过SASS或LESS或其他方式减轻痛苦。

但是，如果您的div可以是任何东西，包括任何具有自己样式的框和不可预测的内容，并且您不能完全控制该ajax的样式和脚本，那么这里有一些想法：

一种方法是执行以下操作：

function lightOrDark(color) {

    // Variables for red, green, blue values
    var r, g, b, hsp;

    // Check the format of the color, HEX or RGB?
    if (color.match(/^rgb/)) {

        // If HEX --> store the red, green, blue values in separate variables
        color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);

        r = color[1];
        g = color[2];
        b = color[3];
    } 
    else {

        // If RGB --> Convert it to HEX: http://gist.github.com/983661
        color = +("0x" + color.slice(1).replace( 
        color.length < 5 && /./g, '$&$&'));

        r = color >> 16;
        g = color >> 8 & 255;
        b = color & 255;
    }

    // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
    hsp = Math.sqrt(
    0.299 * (r * r) +
    0.587 * (g * g) +
    0.114 * (b * b)
    );

    // Using the HSP value, determine whether the color is light or dark
    if (hsp>127.5) {

        return 'light';
    } 
    else {

        return 'dark';
    }
}


function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}






function switch_color(el) {
  const switchable_attrs = "color backgroundColor".split(' '); // add more properties here
  for (let i in switchable_attrs) {
    let attr = switchable_attrs[i];
    let color = getStyle(el, attr);
    console.info(attr, color, el);
    if (color == "")
        continue;
    try {
        el.style[attr] = colorsys.stringify(colorsys.darken(colorsys.parseCss(color), lightOrDark(color) == "dark" ? -0.5 : 0.5));
        console.info("Color changed from " + color + " to " + el.style[attr]);
    } catch(e) {
        console.warn("Cannot switch color: " + color, e, el);
    }
  }

  for (let i = 0; i < el.children.length; i++) {
    switch_color(el.children[i]);
  }
}

let div = document.getElementById('the-div');
switch_color(div);

getStyle函数的来源：https://stackoverflow.com/a/2664055/4987470

colorsys github：https://github.com/netbeast/colorsys

上面的代码将切换找到的每种颜色。更改变暗功能的百分比以增加对比度。

它可能仍需要针对您的环境进行一些调整。

对于图像和背景图像，仍有一些方法可以反转可在javascript中加载的图像（跨域问题）。但是我再等一段时间，我相信人们已经解决了这个问题。

Answer 3

以上所有答案都不正确，我将在此处编写一些代码，供博客作者在自己的博客上应用夜间模式...在我的博客Hindi Tutor上查看此代码是否正常运行。.100％正常运行，并且刷新页面时，暗模式不会关闭。

<!-- Theme Functions JS -->
<script type='text/javascript'>
//<![CDATA[
function retheme() {
  var cc = document.body.className;
  if (cc.indexOf("darktheme") > -1) {
    document.body.className = cc.replace("darktheme", "");
    if (opener) {opener.document.body.className = cc.replace("darktheme", "");}
    localStorage.setItem("preferredmode", "light");
  } else {
    document.body.className += " darktheme";
    if (opener) {opener.document.body.className += " darktheme";}
    localStorage.setItem("preferredmode", "dark");
  }
}
(
function setThemeMode() {
  var x = localStorage.getItem("preferredmode");
  if (x == "dark") {
    document.body.className += " darktheme";
  }
})();
//]]>
</script>

<!-- theme switch is a button icon adjust this as your icon stylesheet -->
#theme-switch{font-size:20px;position:absolute;top:0;right:35px;z-index:19}
<!-- Here is your stylesheet for dark mode editd these colors and style name except body darktheme -->
body.darktheme{color:#fff;background-color:#000}
body.darktheme .your-element-name{color:#fff;background-color:#000}
body.darktheme .lin-element-name a{color:#fff;background-color:#000}
body.darktheme #your-element-name{color:#fff;background-color:#000}
body.darktheme your-element-name ul li a{color:#fff;background-color:#000}

<div id='theme-switch'>
<a class='fa fa-adjust' href='javascript:void(0);' onclick='retheme()' title='Change Theme'/>
    </div>

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

3 个答案:

Darkmode.js