简单实用：web前端实现网页主题切换功能

题切换是一种常见的需求，它可以让用户根据自己的喜好和环境选择适合的界面风格。

了解主题切换背景知识

1、主题切换的意义及应用场景

在现代化的网站中，不同的主题样式，能够给用户带来不同的视觉感受和交互体验。例如，在夜间模式下，减少亮度可以保护用户的眼睛，提高使用效果。因此，实现一个主题切换功能对于改善用户体验至关重要。

2、常见的主题切换实现方式

实现主题切换功能有多种方法，主要包括通过CSS样式切换、JavaScript脚本切换和数据库读取配置文件切换等。

准备工作

1、创建基本的HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Theme Switcher</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面内容 -->
    <h1>网页主题切换功能演示</h1>
    <p>请选择喜欢的主题：</p>
    <button id="lightTheme">白天模式</button>
    <button id="darkTheme">夜间模式</button>
    <script src="script.js"></script>
</body>
</html>

2、引入必要的CSS和JavaScript文件

为了实现主题切换功能，我们需要在HTML文件中，引入相关的CSS和JavaScript文件。创建一个style.css文件和script.js文件，并将其链接到index.html中。

通过CSS实现主题切换

1、使用CSS变量定义主题色彩

在style.css文件中，定义一些全局的CSS变量来表示不同的主题色彩。例如，可以定义--primary-color作为主题的主色调。

<style type="text/css">
:root {
  --primary-color: #007bff;
}

.light-mode {
  --primary-color: #007bff;
  --background-color: #ffffff;
  --text-color: #000000;
}

.dark-mode {
  --primary-color: #dd403a;
  --background-color: #333333;
  --text-color: #ffffff;
}

button {
  background-color: var(--primary-color);
  color: var(--text-color);
}
</style>

2、利用媒体查询和@media规则设置不同的主题样式

<style type="text/css">
@media (prefers-color-scheme: dark) {
  /* 当系统设置为暗色模式时显示夜间模式 */
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
}

@media (prefers-color-scheme: light) {
  /* 当系统设置为亮色模式时显示白天模式 */
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
}
</style>

3、通过JavaScript来改变CSS变量的值

在script.js文件中，使用JavaScript来控制主题的切换。通过访问DOM元素的style属性，修改CSS变量的值，从而改变主题。

const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');

lightModeButton.addEventListener('click', ()=> {
  document.documentElement.classList.add('light-mode');
  document.documentElement.classList.remove('dark-mode');
});

darkModeButton.addEventListener('click', ()=> {
  document.documentElement.classList.add('dark-mode');
  document.documentElement.classList.remove('light-mode');
});

通过JavaScript实现主题切换

1、方式1：使用JavaScript修改DOM元素的类名

const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');

lightModeButton.addEventListener('click', ()=> {
  document.body.className='light-mode';
});

darkModeButton.addEventListener('click', ()=> {
  document.body.className='dark-mode';
});

2、方式2：利用JavaScript动态生成style标签并插入到HTML中

const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');

lightModeButton.addEventListener('click', ()=> {
  const style=document.createElement('style');
  style.innerHTML=`
    body {
      --primary-color: #007bff;
      --background-color: #ffffff;
      --text-color: #000000;
    }
  `;
  document.head.appendChild(style);
});

darkModeButton.addEventListener('click', ()=> {
  const style=document.createElement('style');
  style.innerHTML=`
    body {
      --primary-color: #dd403a;
      --background-color: #333333;
      --text-color: #ffffff;
    }
  `;
  document.head.appendChild(style);
});

3、方式3：通过AJAX请求加载不同的CSS文件

const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');

lightModeButton.addEventListener('click', ()=> {
  loadCSS('light-theme.css');
});

darkModeButton.addEventListener('click', ()=> {
  loadCSS('dark-theme.css');
});

function loadCSS(filename) {
  const link=document.createElement('link');
  link.href=filename;
  link.rel='stylesheet';
  document.head.appendChild(link);
}

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，我们一起加油吧。

家好，今天给大家介绍一款，JavaScript+css实现的下拉菜单，明暗模式切换html页面前端源码（图1）。送给大家哦，获取方式在本文末尾。

图1

隐藏式下拉菜单，明暗模式随意切换（图2）

图2

代码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：10214，需要的朋友，访问下面链接后，搜索10214，即可获取。

「链接」

高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~

哎呀呀~实在是抱歉备注标签我记错了QAQ

这个才是备注标签不是//

首先我们先来学习上节课留下的剧透，分别是:

1.标题标签h1~h6

有人就说了标题标签上次剧透不就只有h1标签吗?

嘿嘿，其实他还有兄弟姐妹啦~

看图，代码是从上往下从左往右执行的请记住这个顺序哦~

还有,左边是代码右边是网页上面的效果哦~

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>1</h1>

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6>

</body>

</html>

如图所示，h1标签是最大的，h6标签是最小的

是不是很简单呀,现在已经学会了一个知识点了哦~

2.段落标签 p标签

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>第一条p标签</p>

<p>第二条p标签</p>

<p>第三条p标签</p>

</body>

</html>

3.链接标签 a标签

链接标签是什么?顾名思义就是一个链接看代码：

href是什么东西啊？是a标签的属性啦~里面用来输入你需要跳转到的网页的链接

属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦

当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com

当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页

是不是很有趣~

看视频:

视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片，是不是有点小意思~

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="new_file3.html">跳转到山的网页</a>

</body>

</html>

4.图像标签 img标签

图像标签标签如其意，就是用来上传图像的一个标签~~

我们这里介绍一下img的两个属性:

src就是用来放图片的地址的，他会根据地址去找图片然后把图片放到网页上面。

alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字

看视频:

我们把图片的地址破坏后，就会显示一个图片错误的图标和alt里面的内容

怎么拖图片到img文件下，老师~~~我不知道

看视频

嘿嘿就直接把文件拖进来就ok了是不是很简单~

okk，好快啊怎么一下就学完了今天的知识点~~~

嘻嘻今天可是有作业的~

请根据下面的网页仿写一下:

完成后作业发再评论区哦，有什么不懂的可以留言包回答的。

加油呀，每天学一点争取做出属于自己的一个网页~

上一期

在线咨询

上一篇：13个JavaScript 一行程序，让你看起来像个
下一篇：好程序员web前端培训分享HTMLCSS之HTML表

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

简单实用：web前端实现网页主题切换功能

了解主题切换背景知识

准备工作

通过CSS实现主题切换

通过JavaScript实现主题切换

家好，今天给大家介绍一款，JavaScript+css实现的下拉菜单，明暗模式切换html页面前端源码（图1）。送给大家哦，获取方式在本文末尾。

隐藏式下拉菜单，明暗模式随意切换（图2）

代码完整，需要的朋友可以下载学习（图3）

本源码编码：10214，需要的朋友，访问下面链接后，搜索10214，即可获取。

「链接」

1.标题标签h1~h6

2.段落标签 p标签

3.链接标签 a标签

4.图像标签 img标签

您的项目需求