修复 elementplus深色模式不能实时变化的问题

2024-10-13 14:18:36 +08:00
parent 6a7782544b
commit 90183f1a2a
1 changed files with 15 additions and 0 deletions
--- a/tonecn/index.html
+++ b/tonecn/index.html
@@ -10,5 +10,20 @@
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
+    <script>
+      // 检查用户的主题偏好
+      const checkTheme = () => {
+        const htmlElement = document.documentElement;
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          htmlElement.classList.add('dark');
+        } else {
+          htmlElement.classList.remove('dark');
+        }
+      };
+      // 监听主题变化
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', checkTheme);
+      // 初始检查
+      checkTheme();
+    </script>
  </body>
 </html>