前端笔记

分享前端开发思考与感悟

将主题切换器集成到您的网站

嘿,人们在那里,所以您一定在大多数网站上都已经看到了暗模式选项,如果您没有看到任何暗模式选项,那么您可以看一下我的投资组合网站。现在,如果您已经这样做了,那么您就有资格考虑在您的网站中实现它而无需太多操作,那就让我们开始编写一些代码吧。等一下,我有一种方法要做的就是在您喜欢的任何文本编辑器中打开代码,然后按照我的步骤进行操作。

首先,我们将编写一些HTML脚本以添加主题切换器按钮,以便用户可以查看在何处单击以更改网站的主题,然后打开您的HTML文件并在其中添加以下代码。

<div class="theme-switch-wrapper">
       <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="fas fa-moon moonboi fa-2x"></div>
  </label>
  </div>

在这里,我们使用fontawesome库添加了一个月亮图标,它是免费的,您可以免费使用它作为主题切换器,它可以根据您的选择来代替月亮。

现在它看起来很丑陋,因为它只是骨架,为了使其美观,只需打开您的CSS文件并添加以下代码(可选)即可(不,不是)

:root {
    --font-color: #424242;
    --bg-color: #fff;
}

[data-theme="dark"] {
    --font-color: #fff;
    --bg-color: #161625;
}

/*slider switch css */

  .theme-switch {
    display: inline-block;
    height: 34px;
    top:2rem;
    position: relative;
    width: 60px;
  }

  .theme-switch input {
    display:none;
  }

  .moonboi{font-size: 1rem;transition: .4s;}
  .moonboi::before{transition: .4s;}

在上面的CSS片段中,我们创建了两类颜色变量,一类是用于亮模式,一类是用于暗模式,在添加了此之后,您要做的就是在需要的地方添加变量名称而不是颜色代码。就像说如果您必须在文本中添加颜色,则可以像使用颜色一样使用:var(-font-color);

因此,这是根据用户的选择来实现主题切换的主要部分,因此,为了实现它,只需将以下几行添加到您的javascript代码中即可。


const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

将上面编写的糟糕代码合并到您的代码中后,您可以测试您的网站,只需单击它,您就会看到一个月亮图标以对其进行测试,您会发现整个网站的主题将随着美好的转变而发生变化。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注