Sass实现网页背景主题切换

Jet_closer

已于 2024-08-21 02:40:28 修改

阅读量1k

点赞数 19

分类专栏： Sass学习文章标签： sass 前端 css html css3 less

于 2024-08-21 02:36:02 首次发布

本文链接：https://blog.csdn.net/Jet_Lover/article/details/141337874

版权

Sass学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

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

准备工作

如果是工程项目则需使用下面代码进行安装

 npm install sass --save-dev
 npm install sass-loader --save-dev

如果是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>