关于CSS自定义属性与前端页面的主题切换问题

下面我来详细讲解关于CSS自定义属性与前端页面的主题切换问题的完整攻略。

什么是CSS自定义属性？

CSS自定义属性（CSS Custom Properties）是CSS3新增的一项功能，它可以让我们在CSS中定义自己的属性，然后在其他地方使用它们。

要使用CSS自定义属性，首先需要使用--作为前缀定义一个属性名称，接着可以为该属性设置一个默认值，例如：

:root {
  --bg-color: #fff;
  --text-color: #000;
}

在上面的示例中，我们定义了两个自定义属性--bg-color和--text-color，并为它们分别设置了默认值。

在CSS中使用自定义属性时，只需要在需要的地方使用var()函数来引用它们，例如：

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

这样我们就可以在整个页面的CSS代码中使用--bg-color和--text-color这两个自定义属性了。

如何实现前端页面的主题切换？

有了CSS自定义属性，我们就可以很方便地实现前端页面的主题切换功能了。

以切换背景色为例，我们可以定义两套不同的主题颜色：

/* 主题1 */
:root {
  --bg-color: #fff;
  --text-color: #000;
}

/* 主题2 */
:root.theme-dark {
  --bg-color: #000;
  --text-color: #fff;
}

在上面的示例中，我们使用:root来定义主题1，而使用:root.theme-dark来定义主题2。同时，我们重定义了之前的--bg-color和--text-color两个属性。

接着，我们可以添加一个主题切换的按钮，点击该按钮可以切换页面的主题。示例代码如下：

<button id="theme-switch">切换主题</button>

const themeSwitch = document.querySelector('#theme-switch');
themeSwitch.addEventListener('click', () => {
  document.documentElement.classList.toggle('theme-dark');
});

在上面的示例中，我们首先使用document.querySelector方法获取到了#theme-switch按钮，接着使用addEventListener方法给按钮添加了一个点击事件：当点击按钮时，我们使用document.documentElement.classList.toggle方法来切换theme-dark类的状态，从而实现主题的切换。

示例演示

下面，我将给你演示两个示例，一个是使用CSS自定义属性和主题切换来实现夜间模式的效果，另一个是使用CSS自定义属性和主题切换来实现字体大小调节的功能。

示例1：夜间模式切换

HTML代码：

<button id="theme-switch">切换夜间模式</button>

<div id="page-content">页面内容</div>

CSS代码：

:root {
  --bg-color: #fdfdfd;
  --text-color: #333;
}

:root.theme-dark {
  --bg-color: #333;
  --text-color: #fdfdfd;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

#page-content {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

JavaScript代码：

const themeSwitch = document.querySelector('#theme-switch');
const pageContent = document.querySelector('#page-content');

themeSwitch.addEventListener('click', () => {
  document.documentElement.classList.toggle('theme-dark');
  if (document.documentElement.classList.contains('theme-dark')) {
    pageContent.innerText = '夜间模式下的页面内容';
  } else {
    pageContent.innerText = '页面内容';
  }
});

在上面的示例中，我们首先定义了两个不同的主题，分别是白色背景黑色文字的主题和黑色背景白色文字的夜间模式主题。接着，我们在页面中添加了一个#page-content的div来显示页面内容。

在JavaScript代码中，我们给#theme-switch按钮添加了一个点击事件。当用户点击按钮时，我们使用document.documentElement.classList.toggle方法来切换theme-dark类的状态，并相应地修改#page-content的内容，以显示不同主题下的页面内容。

点击下面的按钮可以查看示例的效果：

示例2：字体大小调节

HTML代码：

<button id="text-size-decrease">字体减小</button>
<button id="text-size-increase">字体增大</button>

<div id="page-content">页面内容</div>

CSS代码：

:root {
  --base-font-size: 16px;
}

body {
  font-size: var(--base-font-size);
}

#page-content {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

JavaScript代码：

const textSizeDecrease = document.querySelector('#text-size-decrease');
const textSizeIncrease = document.querySelector('#text-size-increase');
const root = document.querySelector(':root');
const baseFontSize = parseFloat(getComputedStyle(root).getPropertyValue('--base-font-size'));

textSizeDecrease.addEventListener('click', () => {
  root.style.setProperty('--base-font-size', `${baseFontSize - 1}px`);
});

textSizeIncrease.addEventListener('click', () => {
  root.style.setProperty('--base-font-size', `${baseFontSize + 1}px`);
});

在上面的示例中，我们定义了一个--base-font-size自定义属性，作为网页的基础字体大小。接着，我们在JavaScript代码中通过getComputedStyle方法获取到了该属性的值，并转化为了数字格式。

我们在页面中添加了两个按钮#text-size-decrease和#text-size-increase，分别用于减小和增大网页字体的大小。

在JavaScript代码中，我们给这两个按钮添加了点击事件。当用户点击按钮时，我们通过style.setProperty方法动态修改了--base-font-size属性的值，以实现网页字体大小的调节。