您现在的位置是：首页 > 技术教程 正文

前端实现主题（深色模式）切换的几种方案

admin 阅读： 2024-03-28
后台-插件-广告管理-内容页头部广告（手机）

方案一：link 动态引入

通过改变link 标签的 href 属性实现动态修改样式（暂不推荐这种方案）

优点：实现了按需加载，提高了性能；

缺点：动态加载样式文件，可能会因为网络问题导致样式加载过慢；

           可维护性较差，后续新增或修改主题较为麻烦。

方案二：提前引入样式，类名切换

在这个方案中，我们只有一个css文件，然后通过js来改变他的类名（也暂不推荐这种方案）

优点：相比方案一，不会因为网络问题导致样式切换延迟；

缺点：样式文件过大时可能会出现首屏加载过慢问题；

           可维护性依旧较差，后续新增或修改主题较为麻烦；

方案三：CSS 滤镜

利用CSS3新增的filter属性（需求简单可以使用）

优点：一行代码实现黑色主题功能，简单易于维护；

缺点：不能满足需求的要求，不能实现对区域的主题颜色自定义；

方案四：CSS变量+类名切换（目前的主流方案）

VUE3官方文档使用的解决方案（比较推荐），这一个方案也是我目前使用的方案

实现思路：首先定义几个我们需要的全局样式变量，之后定义几个集合属性（不同的主题样式），然后将其放在html根元素标签里，再动过js动态的切换这个集合属性就可以实现主题的切换，具体看以下代码；

优点：不会因为网络问题导致样式切换延迟；

           在需要切换主题的地方利用 var0绑定变量即可，不存在优先级问题；

           新增或修改主题方便灵活，仅需新增或修改 CSS 变量即可，在 var（）绑定样式变量的地             方就会自动更换；

缺点：首屏加载时会牺牲一些时间加载样式资源；

预览效果

具体实现

  1. html>
  3. <html lang="en" data-theme="dark">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>王国梁title>
  8. <link rel="shortcut icon" href="./img/w.png" type="image/x-icon">
  10. <link rel="preconnect" href="https://fonts.googleapis.com">
  11. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  12. <link
  13. href="https://fonts.googleapis.com/css2?family=Dhurjati&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap"
  14. rel="stylesheet">
  16. <link rel="stylesheet" href="./index.css">
  17. <style>
  18. .container {}
  19. style>
  20. head>
  22. <body>
  24. <header>
  25. <a href="#" class="logo"><span>Wspan>GLa>
  26. <ul class="nav-bar">
  27. <li><a href="#">首页a>li>
  28. <li><a href="#">教育背景a>li>
  29. <li><a href="#">技术栈a>li>
  30. <li><a href="#">经历a>li>
  31. <li><a href="#">博客a>li>
  32. <li><a href="#">联系我a>li>
  33. ul>
  34. <div>
  35. <span>更多span>
  36. <div>div>
  37. div>
  38. <button onclick="toggle()" class="toggle">切换主题button>
  40. header>
  42. <script src="./index.js">script>
  43. body>
  45. html>
  1. *{
  2. padding: 0;
  3. margin: 0;
  4. box-sizing: border-box;
  5. font-family: "rubik",sans-serif;
  6. list-style: none;
  7. text-decoration: none;
  8. }
  10. @media screen and (max-width: 768px) {
  12. }
  14. /* 全局样式变量 */
  15. :root{
  16. /* 背景色/边框颜色/主色/辅色/其他色 */
  17. --color-border:#deddee;
  18. --color-main:#ffae00;
  19. --color-auxiliary:#00ff11;
  20. --color-other:#00ffdd;
  21. --color-bg:#1f1f21;
  22. --font-color-main:#ffffff;
  23. --font-color-secondary:#ffffffb3;
  24. --font-color-auxiliary:#ffffff3b;
  25. /* 字号和字体颜色 */
  26. --font-root:1rem;
  27. --font-32px:2rem;
  28. --font-20px:1.25rem;
  29. --font-18px:1.125rem;
  30. --font-16px:1rem;
  31. --font-14px:.875rem;
  32. --font-12px:.75rem;
  33. --font-10px:.625rem;
  34. /* 层级 */
  35. --z-index10:10;
  36. --z-index100:100;
  37. --z-index1000:1000;
  38. /* 间距 */
  39. --spacing-2:.125rem;
  40. --spacing-4:.25rem;
  41. --spacing-6:.375rem;
  42. --spacing-8:.5rem;
  43. --spacing-10:.625rem;
  44. --spacing-12:.75rem;
  45. --spacing-14:.875rem;
  46. --spacing-16:1rem;
  47. --spacing-20:1.25rem;
  48. --spacing-24:1.5rem;
  49. --spacing-30:1.875rem;
  50. --spacing-40:2.5rem;
  51. --spacing-50:3.125rem;
  52. --spacing-60:3.75rem;
  53. }
  54. /* 集合属性（主题样式） */
  55. [data-theme="dark"] {
  56. --color-bg:#1f1f21;
  57. --color-btn:#ffffff;
  58. --color-btn-font:#333333;
  59. --color-border:#deddee;
  60. --color-main:#ffae00;
  61. --color-auxiliary:#00ff11;
  62. --color-other:#00ffdd;
  63. --font-color-main:#ffffff;
  64. --font-color-secondary:#ffffffb3;
  65. --font-color-auxiliary:#ffffff3b;
  66. }
  67. [data-theme="light"] {
  68. --color-bg:#ffffff;
  69. --color-btn:#000000;
  70. --color-btn-font:#ffffff;
  71. --color-border:#deddee;
  72. --color-main:#ffae00;
  73. --color-auxiliary:#00ff11;
  74. --color-other:#00ffdd;
  75. --font-color-main:#333333;
  76. --font-color-secondary:#777777;
  77. --font-color-auxiliary:#aaaaaa;
  78. }
  80. /* 切换按钮 */
  81. .toggle{
  82. border: none;
  83. padding: var(--spacing-6);
  84. font-size: var(--font-14px);
  85. background-color: var(--color-btn);
  86. color: var(--color-btn-font);
  87. border-radius: .25rem;
  88. transition: all ease .45s;
  89. }
  91. body{
  92. background: var(--color-bg);
  93. color: var(--font-color-main);
  94. overflow-x: hidden;
  95. transition: all 0.5s ease-in-out;
  96. }
  98. /* 标题部分 */
  99. header{
  100. position: fixed;
  101. top: 0;
  102. right: 0;
  103. width: 100%;
  104. background: transparent;
  105. z-index: var(--z-index10);
  106. font-size: var(--font-14px);
  107. display: flex;
  108. align-items: center;
  109. justify-content: space-between;
  110. padding: var(--spacing-30) 15%;
  111. transition: all ease .45s;
  112. }
  113. .logo{
  114. color: var(--font-color-main);
  115. font-weight: 600;
  116. font-size: var(--font-32px);
  117. }
  118. .logo span{
  119. color: var(--color-main);
  120. }
  121. .nav-bar{
  122. display: flex;
  123. }
  124. .nav-bar a{
  125. font-size: var(--font-14px);
  126. color: var(--font-color-secondary);
  127. margin:0 var(--spacing-24);
  128. transition: all ease.5s;
  129. }
  130. .nav-bar a:hover{
  131. color: var(--color-main);
  132. font-weight: 600;
  133. }
  1. // 切换主题
  2. function toggle() {
  3. let html = document.querySelector('html')
  4. let currentTheme = html.getAttribute('data-theme');
  6. if (currentTheme === "light") {
  7. html.setAttribute('data-theme', 'dark');
  8. } else {
  9. html.setAttribute('data-theme', 'light');
  10. }
  11. }

方案五：v-bind (Vue3)

在vue3中基于响应式对css变量进行动态改变

优点：不用考虑网络问题；

           在需要切换主题的地方利用 v-bind 绑定变量即可，不存在优先级问题；

           新增或修改主题方便灵活，仅需新增或修改JS 变量即可，在v-bind0绑定样式变量的地方就             会自动更换；

缺点：也是首屏加载时会牺牲一些时间加载样式资源；

           这种方式只要是在组件上绑定了动态样式的地方都会有对应的编译成哈希化的 CSS 变量，             而不像 CSS变量一样统一地在:root 上设置；

还有剩下的一些方案就不一一介绍了，感觉有用就点个赞再走吧

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表