美高梅4858-美高梅4858mgm-[官方网站]

2 行代码搞定给你的网页加 黑暗模式(夜间模式)开关

Darkmode.Js

?黑暗模式/夜间模式,只需要几秒钟就可以给你的网站添加这个功能

美高梅4858已经添加,你可以看到网站左下方有个小按钮,你点击 Ta 预览以下效果吧!

该库使用 CSS mix-blend-mode 来将暗模式带入您的任何网站。只需复制粘贴该片段,您将获得一个小部件以打开和关闭暗模式。您也可以不使用窗口小部件而以编程方式使用它。该插件是轻量级的,内置于?? VanillaJS 中。默认情况下,它也使用 localstorage,因此您的上一次设置将被记住!

特点

  • 窗口小部件自动显示
  • 保存用户选择
  • 如果操作系统偏好的主题为深色,则自动显示Darkmode(如果浏览器支撑prefers-color-scheme)
  • 可以以编程方式使用而无需小部件

WordPress 插件

如果您使用的是 Wordpress,则可能需要看看基于 Darkmode.js 的这些插件:
  • https://wordpress.org/plugins/blackout-darkmode-widget/
  • https://wordpress.org/plugins/darkmode/

简单方法(使用JSDelivr CDN)

只需将此代码添加到您的 html 页面:

<script src="none"></script>
<script>new Darkmode().showWidget();</script>

高级调用参数:

<script src="none"></script>

<script>
    var options = {
      bottom: '64px', // 默认: '32px'
      right: 'unset', // 默认: '32px'
      left: '32px', // 默认: 'unset'
      time: '0.5s', // 默认: '0.3s'
      mixColor: '#fff', // 默认: '#fff'
      backgroundColor: '#fff',  // 默认: '#fff'
      buttonColorDark: '#100f2c',  // 默认: '#100f2c'
      buttonColorLight: '#fff', // 默认: '#fff'
      saveInCookies: false, // 默认: true,
      label: '?', // 切换 Darkmode(黑暗模式/夜间模式)按钮显示的文字,默认: ''
      autoMatchOsTheme: true // 默认: true
    }

    const darkmode = new Darkmode(options);
    darkmode.showWidget();
</script>

更多高级使用方法,请访问 https://darkmodejs.learn.uno/ 查看


如无特别声明,该文章均为 美高梅4858官方网站NowTime.cc)原创,转载请遵循 署名-非商业性使用 4.0 国际(CC BY-NC 4.0) 协议,即转载请注明文章来源。


标签: HTML5, 美高梅4858mgm

赞 (1)

添加新评论

XML 地图 | Sitemap 地图