前端实现界面切换主题代码示例

本文介绍了两种前端界面主题切换的实现方式。第一种通过link标签的rel和title属性定义可替换样式，适合固定主题间的切换；第二种利用CSS变量（:root定义，var()使用）结合JavaScript修改setProperty值，支持拾色器等动态颜色选择。

主题切换样式

一种常见的主题切换实现手段，依赖于 link 元素的 rel 特性

当 rel 特性的取值为 alternate 时，表示该样式表支持替换

title 特性需统一添加或移除，因为 title 的存在会使系统将其识别为样式文件；若多个样式文件中部分包含此特性而部分不包含，系统将优先加载包含该特性的样式

假设页面包含三个样式文件，分别为：default.css、dark.css、light.css

通过激活可替换样式即可达成主题切换，此方法适用于在既定主题间进行切换

/* default.css */
body {
    background-color: white;
}

/* dark.css */
body {
    background-color: black;
}

/* light.css */
body {
    background-color: lightcyan;
}

<!DOCTYPE html>
<html lang="en" class="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题切换方案一</title>
    <link type="text/css" href="css/default.css" rel="external nofollow"  rel="stylesheet" title="default">
    <link type="text/css" href="css/dark.css" rel="external nofollow"  rel="stylesheet alternate" title="dark">
    <link type="text/css" href="css/light.css" rel="external nofollow"  rel="stylesheet alternate" title="light">
</head>

<body>
    <select name="主题" onchange="changeTheme(this.value)">
        <option value="default">默认</option>
        <option value="dark">夜晚</option>
        <option value="light">白天</option>
    </select>
</body>

<script src="static/js/jquery.min.js"></script>
<script>
    function changeTheme(theme) {
        $('link').attr('disabled', true)
        $(`link[title=${theme}]`).attr('disabled', false)
    }
</script>

</html>

基于变量的主题配置

前述方式适用于主题样式文件的切换，对于需在拾色器中自由选取颜色以定制主题的场景则不适用

在此类场景下，通过变量配置系统主题更为适宜

当前在 :root 内定义全局变量，随后利用 var() 在样式中引用该变量，并通过 setProperty 修改变量值以更换主题外观

<!DOCTYPE html>
<html lang="en" class="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题切换方案二</title>
    <style>
        :root {
            --theme-color: #333333;
        }

        html {
            background-color: var(--theme-color, "#E65A65");
        }
    </style>
</head>

<body>
    <select name="主题" onchange="changeTheme(this.value)">
        <option value="#333333">默认</option>
        <option value="#1a7efc">蓝色</option>
        <option value="#16d46b">绿色</option>
        <option value="#f1ce6b">黄色</option>
    </select>
</body>

<script>
    function changeTheme(theme) {
        document.documentElement.style.setProperty('--theme-color', theme)
    }
</script>

</html>

前端实现界面切换主题代码示例

主题切换样式

基于变量的主题配置

结论

实用工具推荐