两种最简单的方式教会你如何实现前端一键换肤！(￣_,￣ )

用户6297767

发布于 2024-03-27 08:08:43

1110

发布于 2024-03-27 08:08:43

通常，前端一键换肤功能需要通过使用 CSS 样式表来定义不同的主题样式，然后通过 JavaScript 来控制切换不同的样式表，以达到换肤的效果。用户在点击换肤按钮或者选择不同的主题选项后，页面会立即应用新的样式，从而改变界面的外观。这种功能在很多网站、应用中都有广泛的应用，特别是一些内容丰富、用户群体广泛的平台，以满足不同用户对于外观风格的偏好。

今天我就教大家用两种方式实现前端一键换肤的功能，都是给予原生 css 和 js 的方法属性，不用安装任何的第三方库

第一种方法：window.document.documentElement.style.setProperty()

先介绍一下 window.document.documentElement.style.setProperty()这个方法 document.documentElement代表的是文档对象模型（DOM）中的根元素，即HTML文档中的元素。style.setProperty()是用于在JavaScript中设置元素样式的方法。具体来说，document.documentElement.style.setProperty() 方法可以用于动态地设置根元素的 CSS 样式属性。它接受两个参数：

属性名：第一个参数是要设置的 CSS 属性名称，例如 "color", "font-size", "background-color" 等等。
属性值：第二个参数是要为属性设置的值，可以是字符串或者变量，表示对应样式属性的值。

例如，以下代码将修改根元素的背景颜色为红色：

 document.documentElement.style.setProperty('background-color', 'red');

这种方法可以用于动态改变页面的整体样式，在实现一键换肤功能时非常有用。通过 JavaScript 动态地调用 setProperty() 方法，可以实现在用户操作后改变整个页面的外观，从而实现换肤的效果。

话不多说，show time 时间到！看我操作，我只演示一遍！

打开前端项目，在 src 项目下创建一个 theme 文件夹用来保存主题样式相关的 css 和 js 文件。我这里默认有两种主题，分别是黑夜和白昼。你可以根据自己的项目情况来设置有多少种主题。在 theme 文件夹种创建 dark.ts,light.ts 和 theme.css 等三个文件。首先在 theme.css 文件中的 root 根选择器里面定义默认的 css 变量

:root {
    --bgColor: #000000;
}

然后在项目的根样式 index.css 文件中去导入，这样就可以全局使用 css 的自定义的变量了

@import "src/theme/theme.css";

html, body {
    padding: 0;
    margin: 0;
    background: var(--bgColor);
}

在 dark.ts 和 light.ts 文件中写入对应主题下的样式，只不过是用 js 的方式去写

const dark: any = {
    bgColor: '#000',

}

const light: any = {
    bgColor: '#3ce035',
}

然后在两个文件中使用 document.documentElement.style.setProperty('css 变量', '属性值')的方法来修改 root 选择器中定义的 css 变量的值

const dark: any = {
    bgColor: '#000',

}

function setTheme(theme: any) {
    const root = document.documentElement;
    for (const key in theme) {
        root.style.setProperty(`--${key}`, theme[key]);
    }
}

export default () => setTheme(dark)

const light: any = {
    bgColor: '#3ce035',
}

function setTheme(theme: any) {
    const root = document.documentElement;
    for (const key in theme) {
        root.style.setProperty(`--${key}`, theme[key]);
    }
}

export default () => setTheme(light)

然后把两个方法都导出，在切换主题的地方调用即可

我使用的演示项目是基于 react 的，vue 项目也是差不多的，都是相通的在 App.tsx 组件中导入两个修改主题的方法

import './App.css'
import {Select} from "antd";
import {useState} from "react";
import dark from "./theme/dark.ts";
import light from "./theme/light.ts";


function App() {
    const [value, setValue] = useState<string>('dark')


    return (
        <>
            <div>
                <Select value={value} onChange={value => {
                    console.log(value)
                    setValue(value)
                    if (value === 'dark') {
                        dark()
                    } else if (value === 'light') {
                        light()
                    }
                }}>
                    <Select.Option value={'dark'}>黑色</Select.Option>
                    <Select.Option value={'light'}>白色</Select.Option>
                </Select>

            </div>
        </>
    )
}

export default App

黑色主题

白色主题

以上就大功告成了，不过要注意的是 css 的自定义变量名称要保持一致哦，这就是第一种方法。是不是很简单？别慌下面还有更加简单的。

第二种方法：html 自定义属性配合 css 的属性选择器

当谈到HTML自定义属性和CSS的属性选择器时，它们分别是HTML和CSS中非常有用的功能。让我详细介绍一下它们：

HTML自定义属性：

在HTML中，可以使用自定义属性来存储额外的信息或数据，这些属性并不会影响文档的结构或样式，但可以通过JavaScript或CSS来访问和操作。自定义属性通常以data-开头，例如data-color="red"。示例：

htmlCopy Code<div data-color="red">This is a red box</div>

在JavaScript中，你可以使用getAttribute()方法来获取自定义属性的值：

javascriptCopy Codevar color = document.querySelector('div').getAttribute('data-color');
console.log(color); // 输出 "red"

CSS的属性选择器：

CSS属性选择器允许你根据元素的属性值来选择元素。常见的属性选择器包括：

[attribute]: 选择具有指定属性的元素。
[attribute=value]: 选择属性值等于特定值的元素。
[attribute~=value]: 选择属性值包含特定词的元素。
[attribute|=value]: 选择属性值以特定值开头（包括该值和后面的连字符）的元素。
[attribute^=value]: 选择属性值以特定值开头的元素。
[attribute$=value]: 选择属性值以特定值结尾的元素。
[attribute*=value]: 选择属性值包含特定值的元素。

示例：

cssCopy Code/* 选择所有包含data-color属性的元素 */
[data-color] {
  color: blue;
}

/* 选择data-color值为"red"的元素 */
[data-color="red"] {
  color: red;
}

使用CSS属性选择器可以根据元素的自定义属性值来样式化元素，为页面的样式定制提供了更多灵活性和控制力。

第二种方法就是使用的以上的两个方法的结合起来，来实现一键爱换肤的功能的话不多说，看我操作还是在 theme 文件夹下面创建两个 css 文件。一个 dark.css,一个 light.css,然后在文件中分别写入对应主题下的样式

[data-theme="dark"] {
    --bgColor: #052341;
}

[data-theme="light"] {
    --bgColor: #3ce035;
}

然后把这两个样式文件分别引入到 index.css 根样式文件中

/*@import "src/theme/theme.css";*/
@import "src/theme/dark.css";
@import "src/theme/light.css";

html, body {
    padding: 0;
    margin: 0;
    background: var(--bgColor);
}

然后在 App.tsx 也就是修改主题的地方去设置对应的 html 自定义属性即可达到换肤的效果了

import './App.css'
import {Select} from "antd";
import {useState} from "react";


function App() {
    const [value, setValue] = useState<string>('dark')
    document.documentElement.setAttribute('data-theme', value)


    return (
        <>
            <div>
                <Select value={value} onChange={value => {
                    console.log(value)
                    setValue(value)
                    if (value === 'dark') {
                        document.documentElement.setAttribute('data-theme', 'dark')
                    } else if (value === 'light') {
                        document.documentElement.setAttribute('data-theme', 'light')
                    }
                }}>
                    <Select.Option value={'dark'}>黑色</Select.Option>
                    <Select.Option value={'light'}>白色</Select.Option>
                </Select>
            </div>
        </>
    )
}

export default App

我这里是设置的 dark 主题为默认主题。