当前位置：文江博客话题详情

jQuery DarkMode

如何停止页面加载为“黑暗模式”设置为白色

发布于 2025-02-12 22:50:39 字数 368 浏览 0 评论 0原文

我有一个脚本，该脚本读取cookie和Load主题（夜间或光线）模式

 $(document).ready(function () {
     var themeCookiesName = getCookie('Theme');
     if (themeCookiesName == 'dark') {
         document.body.classList.toggle("dark-theme")
     }
     else {
         document.body.classList.toggle("light-theme")
     }
 })

时，将其设置为黑暗，页面在加载深色模式之前会闪烁白色。有什么想法吗？

I have a script that reads the cookie and load theme according(night or light) mode

 $(document).ready(function () {
     var themeCookiesName = getCookie('Theme');
     if (themeCookiesName == 'dark') {
         document.body.classList.toggle("dark-theme")
     }
     else {
         document.body.classList.toggle("light-theme")
     }
 })

When it set to dark them, the page flashes white before it load the dark mode them.
Any thoughts?

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

も让我眼熟你 2025-02-19 22:50:39

默认为HTML中的光主题以最大程度地减少脚本。
用CSS隐藏您的网站。
阅读cookie。
有条件地将课程应用于身体元素。
显示网站。

$(function() { // shorthand for document.ready

  // const darkThemeEnabled = getCookie('Theme') === 'dark';
  const darkThemeEnabled = true; // for demo only - use the line above

  if (darkThemeEnabled) {
    document.body.classList.remove('light-theme');
    document.body.classList.add('dark-theme');
  }

  document.body.classList.remove('hidden');
});

body.hidden {
  display: none;
}

.dark-theme {
  background: #333;
  color: #eee;
}

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body class="light-theme hidden">
  Content
</body>

Default to the light theme in your HTML to minimize scripting.
Hide your site with CSS.
Read the cookie.
Conditionally apply the class to the body element.
Show the site.

$(function() { // shorthand for document.ready

  // const darkThemeEnabled = getCookie('Theme') === 'dark';
  const darkThemeEnabled = true; // for demo only - use the line above

  if (darkThemeEnabled) {
    document.body.classList.remove('light-theme');
    document.body.classList.add('dark-theme');
  }

  document.body.classList.remove('hidden');
});

body.hidden {
  display: none;
}

.dark-theme {
  background: #333;
  color: #eee;
}

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body class="light-theme hidden">
  Content
</body>

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

文章

评论

26 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文