CSS主题色随心换，前端魔法任你玩

2022-12-23 13:42:51

主题色：点亮前端设计的魔法

简介

色彩在前端开发中扮演着至关重要的角色，而主题色更是页面设计中的灵魂基调，影响着整体视觉效果和用户体验。本文将深入探究如何使用CSS、Sass/Less以及外部样式表的魔法，轻松实现主题色的灵活切换，让你的页面化身灵动变色龙。

一、CSS变量：主题色的变色魔杖

CSS变量，又称CSS自定义属性，就像一个变量容器，可以让你在CSS中存储和共享主题色值，为修改主题色提供了极大的便利。

1. 定义CSS变量

:root {
  --theme-color: #ff69b4;
}

2. 使用CSS变量

body {
  background-color: var(--theme-color);
}

二、Sass/Less：主题色的预处理利器

Sass和Less是CSS的预处理语言，提供了更强大的变量功能和语法糖，非常适合管理主题色方案。

1. 定义变量（以Sass为例）

$theme-color: #ff69b4;

2. 使用变量

body {
  background-color: $theme-color;
}

三、外部样式表：主题色的灵活切换

将主题色样式放在单独的外部样式表中，可以实现更灵活的切换。

1. 创建外部样式表

<link rel="stylesheet" href="theme.css">

2. 定义主题色样式

body {
  background-color: #ff69b4;
}

3. 切换主题色

只需修改外部样式表中的主题色即可轻松切换。

四、主题色切换的示例代码

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="theme.css">
</head>
<body>
  <button onclick="changeTheme()">切换主题色</button>

  <script>
    function changeTheme() {
      var theme = document.querySelector('link[href="theme.css"]');
      if (theme.href.indexOf('dark') === -1) {
        theme.href = 'theme-dark.css';
      } else {
        theme.href = 'theme.css';
      }
    }
  </script>
</body>
</html>