Sass实现网页背景主题切换

2024-08-21 05:12

本文主要是介绍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

相关文章

MySQL中On duplicate key update的实现示例

《MySQL中Onduplicatekeyupdate的实现示例》ONDUPLICATEKEYUPDATE是一种MySQL的语法,它在插入新数据时,如果遇到唯一键冲突,则会执行更新操作,而不是抛... 目录1/ ON DUPLICATE KEY UPDATE的简介2/ ON DUPLICATE KEY UP

Python中Json和其他类型相互转换的实现示例

《Python中Json和其他类型相互转换的实现示例》本文介绍了在Python中使用json模块实现json数据与dict、object之间的高效转换,包括loads(),load(),dumps()... 项目中经常会用到json格式转为object对象、dict字典格式等。在此做个记录,方便后续用到该方

JWT + 拦截器实现无状态登录系统

《JWT+拦截器实现无状态登录系统》JWT(JSONWebToken)提供了一种无状态的解决方案:用户登录后,服务器返回一个Token,后续请求携带该Token即可完成身份验证,无需服务器存储会话... 目录✅ 引言 一、JWT 是什么? 二、技术选型 三、项目结构 四、核心代码实现4.1 添加依赖(pom

SpringBoot路径映射配置的实现步骤

《SpringBoot路径映射配置的实现步骤》本文介绍了如何在SpringBoot项目中配置路径映射,使得除static目录外的资源可被访问,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一... 目录SpringBoot路径映射补:springboot 配置虚拟路径映射 @RequestMapp

Python与MySQL实现数据库实时同步的详细步骤

《Python与MySQL实现数据库实时同步的详细步骤》在日常开发中,数据同步是一项常见的需求,本篇文章将使用Python和MySQL来实现数据库实时同步,我们将围绕数据变更捕获、数据处理和数据写入这... 目录前言摘要概述:数据同步方案1. 基本思路2. mysql Binlog 简介实现步骤与代码示例1

Redis实现高效内存管理的示例代码

《Redis实现高效内存管理的示例代码》Redis内存管理是其核心功能之一,为了高效地利用内存,Redis采用了多种技术和策略,如优化的数据结构、内存分配策略、内存回收、数据压缩等,下面就来详细的介绍... 目录1. 内存分配策略jemalloc 的使用2. 数据压缩和编码ziplist示例代码3. 优化的

基于C#实现PDF转图片的详细教程

《基于C#实现PDF转图片的详细教程》在数字化办公场景中,PDF文件的可视化处理需求日益增长,本文将围绕Spire.PDFfor.NET这一工具,详解如何通过C#将PDF转换为JPG、PNG等主流图片... 目录引言一、组件部署二、快速入门:PDF 转图片的核心 C# 代码三、分辨率设置 - 清晰度的决定因

Java Kafka消费者实现过程

《JavaKafka消费者实现过程》Kafka消费者通过KafkaConsumer类实现,核心机制包括偏移量管理、消费者组协调、批量拉取消息及多线程处理,手动提交offset确保数据可靠性,自动提交... 目录基础KafkaConsumer类分析关键代码与核心算法2.1 订阅与分区分配2.2 拉取消息2.3

SpringBoot集成XXL-JOB实现任务管理全流程

《SpringBoot集成XXL-JOB实现任务管理全流程》XXL-JOB是一款轻量级分布式任务调度平台,功能丰富、界面简洁、易于扩展,本文介绍如何通过SpringBoot项目,使用RestTempl... 目录一、前言二、项目结构简述三、Maven 依赖四、Controller 代码详解五、Service

Python 基于http.server模块实现简单http服务的代码举例

《Python基于http.server模块实现简单http服务的代码举例》Pythonhttp.server模块通过继承BaseHTTPRequestHandler处理HTTP请求,使用Threa... 目录测试环境代码实现相关介绍模块简介类及相关函数简介参考链接测试环境win11专业版python