Sass实现网页背景主题切换

2024-08-21 05:12
文章标签 实现 切换 主题 sass 网页背景

本文主要是介绍Sass实现网页背景主题切换，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Sass 实现网页背景主题切换

  • 前言
  • 准备工作
  • 一、 简单的两种主题黑白切换
    • 1.定义主题
    • 2. 添加主题切换功能
    • 3. 修改 data-theme 属性
  • 二、多种主题切换
    • 1. 定义主题
    • 2. 动态生成 CSS 变量
      • 1.遍历列表
      • 2.遍历映射
      • 3.高级用法
    • 3. 设置默认主题
    • 4. 切换功能HTML
  • 三、多种主题多种样式切换
    • 1. 定义主题
    • 2. 动态生成 CSS 变量
    • 3. 设置默认主题
    • 4. HTML代码
  • ending

前言

网页实现主题切换一般有两种主流的解决办法，一种是css变量，另外一种是使用预编译器(less、sass)，这里考虑到兼容性使用的是sass来实现的
原理：修改网页中html标签内的自定义属性data-theme的样式。

准备工作

  1. 如果是工程项目则需使用下面代码进行安装
 npm install sass --save-devnpm install sass-loader --save-dev
  1. 如果是html，则需要下载这个插件
    在这里插入图片描述
    使用方法也很简单在scss文件中点击这个就自动编译为css文件
    在这里插入图片描述
    这里的demo采用的是第二种

一、 简单的两种主题黑白切换

先看效果
请添加图片描述

1.定义主题

创建一个 index.scss 文件，用于定义不同的主题。
使用 Sass 的 map 和 mixin 功能来管理主题变量。

// index.scss
$themes: (light: (background-color: #ffffff,color: #000000),dark: (background-color: #000000,color: #ffffff)
);@mixin theme($name) {$theme: map-get($themes, $name);:root {background-color: map-get($theme, background-color);color: map-get($theme, color);}
}// 默认主题
@include theme(light);

map-get 方法语法：

map.get(map,key): $map: 要操作的map变量， $key: 要获取值的键。如果map中不存在该键，则该方法会返回null。

2. 添加主题切换功能

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>sass实现主题切换</title><link rel="stylesheet" href="index.css"> 
</head><body><button id="theme-toggle">切换主题</button><script>const button = document.getElementById('theme-toggle');let currentTheme = 'light';button.addEventListener('click', () => {currentTheme = currentTheme === 'light' ? 'dark' : 'light';document.documentElement.setAttribute('data-theme', currentTheme);});</script>
</body></html>

3. 修改 data-theme 属性

// index.scss
:root[data-theme='light'] {background-color: #ffffff;color: #000000;
}:root[data-theme='dark'] {background-color: #000000;color: #ffffff;
}

二、多种主题切换

假如主题不止一套…
先看效果
请添加图片描述
具体实现跟方法一差不多，只是多用了@each这个方法

1. 定义主题

每个主题都有相应的背景色和文字色。

// index.scss
$themes: (light: (background-color: #ffffff,color: #000000,),dark: (background-color: #000000,color: #ffffff,),ocean: (background-color: #00aaff,color: #ffffff,),forest: (background-color: #228b22,color: #ffffff,),
);

2. 动态生成 CSS 变量

使用 @each 循环遍历 Sass map，为每个主题生成 CSS 变量。这里使用 的是映射

// index.scss
@mixin theme($name) {$theme: map-get($themes, $name);:root[data-theme='#{$name}'] {background-color: map-get($theme, background-color);color: map-get($theme, color);}
} @each $name, $properties in $themes {@include theme($name);
}

关于@each 的使用方法

1.遍历列表

需要遍历一个列表（数组）时，可以使用 @each。每次迭代都会将当前项分配给一个指定的变量。

$colors: red, blue, green;@each $color in $colors {.text-#{$color} {color: $color;}
}

2.遍历映射

需要遍历一个映射（键值对）时，@each 可以用来遍历每个键值对。每次迭代都会将键和值分别分配给指定的变量。

$themes: (light: #ffffff,dark: #000000,ocean: #00aaff,forest: #228b22
);@each $name, $color in $themes {.theme-#{$name} {background-color: $color;}
}

3.高级用法

也可以使用 @each 来处理复杂的嵌套数据结构

$themes: (light: (background-color: #ffffff,text-color: #000000),dark: (background-color: #000000,text-color: #ffffff)
);@each $name, $properties in $themes {:root[data-theme="#{$name}"] {@each $property, $value in $properties {--#{$property}: #{$value};}}
}

3. 设置默认主题

// index.scss
@include theme(light);

4. 切换功能HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>sass实现主题切换</title><link rel="stylesheet" href="index.css">
</head><body><button onclick="changeThemes('light')">切换白色</button><button onclick="changeThemes('dark')">切换黑色</button><button onclick="changeThemes('ocean')">切换蓝色</button><button onclick="changeThemes('forest')">切换绿色</button><script>function changeThemes(theme) {document.documentElement.setAttribute('data-theme', theme);}//页面初始化的时候加载,当然也可以使用其他方法changeThemes('light')</script>
</body>
</html>

三、多种主题多种样式切换

现在主题里面的变量不仅仅只有background-color,color 这两种，还可能会有其他变量，但是不可能又在root里面去加新增的代码，这样造成了冗余，维护起来也麻烦，于是有了新的思路代码…
先看效果
请添加图片描述

1. 定义主题

在这里每个主题里面自定义的css样式都是不一样的，这里只是举例

// index.scss
$themes: (light: (background-color: #ffffff,color: #000000,font-size:18px,font-weight: bold,),dark: (background-color: #000000,color: #ffffff,font-size:22px,border: 1px solid #9d11b9,),ocean: (background-color: #00aaff,color: red,font-size:26px,font-weight: bold,border: 1px solid #318b97,),forest: (background-color: #228b22,color: yellow,font-size:30px,border: 1px solid #c2557b,),
);

2. 动态生成 CSS 变量

这里使用的是@each的高级用法来处理复杂的嵌套数据结构

@each $name, $properties in $themes {:root[data-theme="#{$name}"] {@each $property, $value in $properties {#{$property}: #{$value};}}
}

3. 设置默认主题

@mixin theme($name) {:root[data-theme="#{$name}"] {@each $property, $value in map-get($themes, $name) {#{$property}: #{$value};}}
}// // 例如，应用默认主题白色
@include theme(light);

4. HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>sass实现主题切换</title><link rel="stylesheet" href="index.css">
</head><body><button onclick="changeThemes('light')">切换白色</button><button onclick="changeThemes('dark')"> 切换黑色 </button><button onclick="changeThemes('ocean')">切换蓝色</button><button onclick="changeThemes('forest')">切换绿色</button><div>我是主题切换字体</div><script>function changeThemes (theme) {document.documentElement.setAttribute('data-theme', theme);}//页面初始化的时候加载,当然也可以使用其他方法changeThemes('light')</script>
</body></html>

ending

Sass中文网地址Sass中文网
Less中文网地址Less中文网

这篇关于Sass实现网页背景主题切换的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/1092218。

相关文章

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中，我们经
阅读更多...
基于Python实现简易视频剪辑工具

基于Python实现简易视频剪辑工具

《基于Python实现简易视频剪辑工具》这篇文章主要为大家详细介绍了如何用Python打造一个功能完备的简易视频剪辑工具,包括视频文件导入与格式转换,基础剪辑操作,音频处理等功能,感兴趣的小伙伴可以了... 目录一、技术选型与环境搭建二、核心功能模块实现1. 视频基础操作2. 音频处理3. 特效与转场三、高
阅读更多...
Python实现中文文本处理与分析程序的示例详解

Python实现中文文本处理与分析程序的示例详解

《Python实现中文文本处理与分析程序的示例详解》在当今信息爆炸的时代,文本数据的处理与分析成为了数据科学领域的重要课题,本文将使用Python开发一款基于Python的中文文本处理与分析程序,希望... 目录一、程序概述二、主要功能解析2.1 文件操作2.2 基础分析2.3 高级分析2.4 可视化2.5
阅读更多...
Java实现预览与打印功能详解

Java实现预览与打印功能详解

《Java实现预览与打印功能详解》在Java中,打印功能主要依赖java.awt.print包,该包提供了与打印相关的一些关键类,比如PrinterJob和PageFormat,它们构成... 目录Java 打印系统概述打印预览与设置使用 PageFormat 和 PrinterJob 类设置页面格式与纸张
阅读更多...
使用Go实现文件复制的完整流程

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具：将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os
阅读更多...
Python实现终端清屏的几种方式详解

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一：使用 `os` 模块调用系统命令方法二：使用 `subprocess` 模块执行命令方法三：打印多个换行符模拟
阅读更多...
SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置（商业库方案）二、Excel 导出 PDF
阅读更多...
Python实现MQTT通信的示例代码

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器（Broker）‌‌3. pytho
阅读更多...
使用zip4j实现Java中的ZIP文件加密压缩的操作方法

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4
阅读更多...
python生成随机唯一id的几种实现方法

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1：使用 UUID 模块（推荐）方法 2：使用 Secrets 模块（安全敏感场景）方法
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2