网站夜间模式的实现教程

  • 文章介绍
  • 评价建议

  • 网站夜间模式的实现教程

    整体流程

    夜间模式开关按钮:用来手动切换夜间模式的,会存储cookie。
    自动夜间模式:当cookie为空时,浏览器时间大于22点小于6点时会自动进入夜间模式,并存储cookie。
    后端配合:php判断是否有cookie,有的话直接输出夜间css,避免切换页面时网页闪烁。

    具体操作

    引入黑夜 css

    <link href="dark.css" rel="alternate stylesheet" type="text/css" title="dark">

    title熟悉rel属性值同时包含alternate stylesheet<link>作为备选样式CSS文件加载,默认不渲染。

    切换夜间模式的 js 函数

    function switchNightMode(){ var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0'; if(night == '0'){ document.querySelector('link[title="dark"]').disabled = true; document.querySelector('link[title="dark"]').disabled = false; document.cookie = "night=1;path=/" console.log('夜间模式开启'); }else{ document.querySelector('link[title="dark"]').disabled = true; document.cookie = "night=0;path=/" console.log('夜间模式关闭'); }}

    指定时间进入夜间模式

    (function(){ if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){ if(new Date().getHours() > 22 || new Date().getHours() < 6){ document.querySelector('link[title="dark"]').disabled = true; document.querySelector('link[title="dark"]').disabled = false; document.cookie = "night=1;path=/" console.log('夜间模式开启'); }else{ document.cookie = "night=0;path=/" console.log('夜间模式关闭'); } }else{ var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0'; if(night == '0'){ document.querySelector('link[title="dark"]').disabled = true; console.log('夜间模式关闭'); }else if(night == '1'){ document.querySelector('link[title="dark"]').disabled = true; document.querySelector('link[title="dark"]').disabled = false; console.log('夜间模式开启'); } }})();

    php 后端判断 cookie 进行加载 css

    <link href="dark.css" rel="<?php if($_COOKIE['night'] != '1'){echo 'alternate ';} ?>stylesheet" type="text/css" title="dark">

    适配 Mac 的 Dark Mode

    因为没有js的判断方法,所以需要插入段,css然后用js判断css的变化,来监控是否进入夜间模式

    插入 css

    html { content: ""; }/* Light mode */@media (prefers-color-scheme: light) { html { content: "light"; }}/* Dark mode */@media (prefers-color-scheme: dark) { html { content: "dark"; }}

    前端使用 JS 检查

    const mode = getComputedStyle(document.documentElement).getPropertyValue('content');if(mode == '"dark"'){alert('进入夜间模式');}

    最后

    dark.css里重写一些元素的背景色文字色等等。

    发表评论

    免责声明 1. 本站所有资源来源于用户上传和互联网,如有侵权请及时联系站长!
    2. 分享目的仅为供大家学习和交流,请不要用于商业用途!您需在下载24H内删除!
    3. 如果你也有好源码、素材或教程,可以发布提交审核,推广有RMB奖励和额外收入!
    4. 本站提供的源码、模板、插件、素材或教程等资源,都不包含技术服务请大家谅解!
    5. 如有链接、图片无法下载或失效,请及时联系站长处理!
    6. 本站资源的售价只是赞助,收取微弱费用来维持本站的日常运营所需!
    7. 本站不保证所提供下载的资源准确性、安全性和完整性,源码仅供下载学习之用!
    8. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    9. 如遇到加密压缩包,默认解压密码为"SanSummers",如无法解压请联系站长!
    开通SVIP 享更多特权,建议使用 QQ 登录