带有扩展圆圈动画的暗模式答案

【问题标题】：Dark mode with expanding circle animation带有扩展圆圈动画的暗模式
【发布时间】：2021-05-08 09:45:59
【问题描述】：

我的页面右上角有夜间模式（或者可能是暗模式）切换按钮。

This is a link for perfect example that shows what I want to do

但是，与上面的链接不同，我像下面的代码一样切换夜间模式。

HTML 我使用 data-theme 属性来改变模式。（夜>光或光>夜）

<body data-theme="">
    <div class="toggle" id="switch" onclick="toggleDarkMode()"></div>
</body>

function toggleDarkMode() {
    var dataTheme = $('body').attr('data-theme');
    
    if(dataTheme == 'dark') {   
        $('body').attr('data-theme', 'light');
    } else {
        $('body').attr('data-theme', 'dark');
    }
};

我需要您的建议，如何通过关键帧扩展圆形动画来切换夜间模式。
提前致谢！

【问题讨论】：

标签： javascript html css keyframe

【解决方案1】：

一个非常简单但有效的解决方案是创建一个classdark，您可以在其中放置所有暗模式样式。然后点击eventListener()添加或删除class

document.querySelector('.toggle').addEventListener('click', function(e) {
  var body = document.getElementsByTagName('body')[0];
  body.className = body.className !== 'dark' && 'dark';
})

.dark {
  background: black;
  color: white;
}

<body>
  <p>Hello world</p>
  <button class='toggle'>Dark Mode</button>
</body>

【讨论】：

【解决方案2】：

您可以根据data-theme 属性使用CSS attribute selector 来定位正文并设置适当的样式。

function toggleDarkMode() {
  var dataTheme = $('body').attr('data-theme');

  if (dataTheme == 'dark') {
    $('body').attr('data-theme', 'light');
  } else {
    $('body').attr('data-theme', 'dark');
  }
};

body[data-theme="light"] {
  background-color: white;
  color: black;
}

body[data-theme="dark"] {
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body data-theme="light">
  <p>Hello world</p>
  <button class="toggle" id="switch" onclick="toggleDarkMode()">Toggle Theme</button>
</body>

这将允许您使用任何您喜欢的 CSS 样式，例如您问题中提供的链接。

【讨论】：

【解决方案3】：

试试这个方法

<script>
$(document).ready(function(){
  $("#switch").click(function(){
       var dataTheme = $('body').attr('data-theme');
       if(dataTheme == 'dark') {   
           $('body').attr('data-theme', 'light');
       } else {
           $('body').attr('data-theme', 'dark');
       }
     };
});
</script>

【讨论】：