Uni-app动态修改主题色的方法详解

背景介绍

在Uni-app中，我们通常会使用CSS来定制页面的样式。但是，有时候我们需要动态地修改主题色，比如根据用户的喜好，或者根据不同的场景需要进行切换主题色。那么，本文将介绍如何在Uni-app中实现主题色的动态修改。

解决方法

1. 使用CSS变量

CSS变量是CSS新增的一个特性，可以把一个值保存到变量中，然后在其他地方调用该变量。因此，我们可以通过在CSS中定义变量，再通过JS动态修改该变量的值来实现主题色的动态修改。具体操作如下：

1.1 CSS中定义变量

我们在样式文件中定义一些变量，来表示不同部分的主题色：

:root {
  --primary-color: #2980b9;
  --secondary-color: #27ae60;
  --background-color: #ecf0f1;
  --text-color: #2c3e50;
}

在上面的代码中，我们可以看到四个变量，分别表示主色、辅助色、背景色和文字色。

1.2 在HTML中使用变量

下面我们通过样式选择器来使用变量：

h1 {
  color: var(--text-color);
  background-color: var(--primary-color);
}

上面的代码中，我们使用了var()函数，来调用CSS变量值。这样，在JS中修改变量值后，该变量在CSS中引用的地方也会被同时修改。

1.3 在JS中修改变量值

在JS中，我们可以通过以下代码来修改变量的值：

document.documentElement.style.setProperty('--primary-color', 'red');

上面的代码中，我们使用了setProperty()函数来修改--primary-color的值为red。这样，在调用var(--primary-color)的地方，就会变成红色。

2. 使用CSS覆盖样式

除了使用CSS变量，我们还可以通过覆盖CSS样式的方式来实现主题色的动态修改。具体操作如下：

2.1 CSS中定义样式

我们在样式文件中定义一些样式，来表示不同部分的主题色：

.primary-color {
  color: #2980b9;
  background-color: #2980b9;
}

.secondary-color {
  color: #27ae60;
  background-color: #27ae60;
}

.background-color {
  background-color: #ecf0f1;
}

.text-color {
  color: #2c3e50;
}

在上面的代码中，我们可以看到四个样式，分别表示主色、辅助色、背景色和文字色。

2.2 在HTML中使用样式

下面我们通过添加样式类来使用样式：

<h1 class="text-color primary-color">hello uni-app</h1>

上面的代码中，我们通过添加text-color和primary-color两个类来使用不同的样式。这样，在JS中修改这些样式的属性值后，该样式在页面中引用的地方也会被同时修改。

2.3 在JS中修改样式的属性值

在JS中，我们可以使用以下代码来修改样式的属性值：

let el = document.querySelector('.primary-color');
el.style.color = 'red';
el.style.backgroundColor = 'red';

上面的代码中，我们首先通过querySelector()函数来获取具有primary-color类的元素，然后通过修改该元素的color和backgroundColor属性值来修改样式的属性值。这样，在<h1>标签中，原来的文字色和背景色都变成了红色。

示例说明

示例一

假设我们有一个按钮，需要根据用户的选择，来动态修改背景色和文字色。实现方式如下：

1. 在CSS中定义样式

.btn {
  color: white;
  background-color: #2980b9;
}

.btn:hover {
  color: #2980b9;
  background-color: white;
}

以上样式体现了我们button的背景色和文字色的默认状态以及鼠标置于按钮上时的颜色状态。你想要设置什么颜色就改约定的颜色值即可。

2. 在HTML中添加按钮

<button class="btn" id="colorBtn">change color</button>

3. 在JS中修改样式的属性值

let btn = document.getElementById('colorBtn');
btn.addEventListener('click', function () {
  let bg = prompt('请输入背景色', '#ecf0f1');
  let color = prompt('请输入文字颜色', '#2c3e50');
  let root = document.documentElement;
  root.style.setProperty('--background-color', bg);
  root.style.setProperty('--text-color', color);
});

在以上代码中，我们添加了一个点击事件，每次点击按钮时，弹出两个输入框，分别输入背景色和文字颜色，然后通过setProperty()函数来修改CSS变量的值，从而达到动态修改主题色的目的。

示例二

假设我们有一个日/夜模式的切换，需要动态地修改主题色。实现方式如下：

1. 在CSS中定义变量

:root {
  --primary-color: #2980b9;
  --secondary-color: #27ae60;
  --background-color: #ecf0f1;
  --text-color: #2c3e50;
  --dark-primary-color: #0277BD;
  --dark-secondary-color: #558B2F;
  --dark-background-color: #3F3F3F;
  --dark-text-color: #00BCD4;
}

.btn {
  display: block;
  margin: 20px 0;
  padding: 10px;
}

.btn-primary {
  color: var(--text-color);
  background-color: var(--primary-color);
}

.btn-secondary {
  color: var(--text-color);
  background-color: var(--secondary-color);
}

.btn-primary.dark {
  color: var(--dark-text-color);
  background-color: var(--dark-primary-color);
}

.btn-secondary.dark {
  color: var(--dark-text-color);
  background-color: var(--dark-secondary-color);
}

.page {
  padding: 20px;
  color: var(--text-color);
  background-color: var(--background-color);
}

.page.dark {
  color: var(--dark-text-color);
  background-color: var(--dark-background-color);
}

以上样式中，我们定义的主题色都以变量的形式存在。

2. 在HTML中添加切换按钮以及页面元素

<button class="btn btn-primary" id="themeBtn">切换主题</button>

<div class="page">
  <h1>Hello, uni-app</h1>
</div>

3. 在JS中实现切换逻辑

let themeBtn = document.getElementById('themeBtn');
let isDark = false;

themeBtn.addEventListener('click', function () {
  isDark = !isDark;
  let el = document.querySelector('.page');
  if (isDark) {
    el.classList.add('dark');
  } else {
    el.classList.remove('dark');
  }
});

以上代码我们用了一个isDark的变量来判断当前处于日/夜模式，并且给按钮添加了一个点击事件，点击按钮时，如果当前是日模式，就添加dark类，否则就移除dark类，达到切换主题色的目的。

结语

本文介绍了两种方法来实现Uni-app中的主题色动态修改。第一种是使用CSS变量，第二种是使用CSS覆盖样式。这两种方法都是有效的，选择哪一种方法取决于你的实际需求。如果你需要动态修改一些属性值，比如背景色、文字颜色等，可以选择使用CSS变量。如果你需要动态切换大量的样式，比如夜/日模式切换，可以选择使用CSS覆盖样式。