[英]Dark Mode using mix-blend-mode: difference not working
Okay, so i've been trying to implement a dark mode feature on my website.好的,所以我一直在尝试在我的网站上实现暗模式功能。 I have made a widget that appears at the bottom right of the page.
我制作了一个出现在页面右下角的小部件。 I have the whole website enclosed within a div called- test.
我将整个网站包含在一个名为 test 的 div 中。 Upon clicking the widget, it toggles and adds the class
dark-mode-screen
to the test
div.单击小部件后,它会切换并将 class
dark-mode-screen
添加到test
div。
However, only the color of the text and the widget changes while the background remains the same.但是,只有文本和小部件的颜色会发生变化,而背景保持不变。
CSS CSS
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #333;
padding: 10px 20px;
font-family: sans-serif;
mix-blend-mode: normal;
transition: mix-blend-mode 0.7s ease-in;
}
.dark-button {
position: absolute;
right: 20px;
bottom: 20px;
border-radius: 50px;
height: 60px;
width: 60px;
border: 1px solid steelblue;
background: steelblue;
outline: none;
}
.dark-mode-screen {
width: 100vw;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: white;
overflow-y: scroll;
}
.test {
background: #fff;
transition: all 0.7s ease-in;
}
HTML: HTML:
<div class="test">
<div class="container" style="background: #fff; mix-blend-mode: difference;">
<div class="box">
<h3>My Paragraph</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<button class="dark-button"></button>
</div>
</div>
JavaScript: JavaScript:
const darkModeToggle = document.querySelector('.dark-button');
darkModeToggle.onclick = function() {
document.querySelector('.test').classList.toggle('dark-mode-screen');
}
You could set background-color
CSS property to white mix-blend-mode
isn't provided with anything to subtract with:您可以将
background-color
CSS 属性设置为白色mix-blend-mode
没有提供任何要减去的内容:
.box {
...
background-color: white;
}
const darkModeToggle = document.querySelector('.dark-button'); darkModeToggle.onclick = function() { document.querySelector('.test').classList.toggle('dark-mode-screen'); }
.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #333; padding: 10px 20px; font-family: sans-serif; mix-blend-mode: normal; transition: mix-blend-mode 0.7s ease-in; background-color: white; }.dark-button { position: absolute; right: 20px; bottom: 20px; border-radius: 50px; height: 60px; width: 60px; border: 1px solid steelblue; background: steelblue; outline: none; }.dark-mode-screen { width: 100vw; height: 100%; position: fixed; top: 0; left: 0; background: white; overflow-y: scroll; }.test { background: #fff; transition: all 0.7s ease-in; }
<div class="test"> <div class="container" style="background: #fff; mix-blend-mode: difference;"> <div class="box"> <h3>My Paragraph</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <button class="dark-button"></button> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.