自定义错误页面且支持页面修改配色
雷池自定义配色原理
雷池的默认页面存在这样子的占位符
{{placeholder: color}}
当返回错误页面时，雷池会把这段占位符替换为一段用户自定义颜色的 CSS，然后在页面中使用配色
<style>
:root {
--primary-color: #0067B8; /* 背景色 */
--light-primary-color: #0067B8cc; /* 淡一点的背景色 */
--font-color: #fff; /* 字体颜色 */
--light-font-color: #ffffff80; /* 淡一些的字体颜色 */
--success-color: #00b87c; /* 成功颜色 */
--warning-color: #ff6666; /* 错误页面背景 */
--warning-font-color: #fff; /* 错误页面字体颜色 */
--warning-light-font-color: #ffffff80; /* 错误页面淡一点的字体颜色 */
}
</style>
具体颜色如下图所示（以人机为例）
自定义支持修改配色的页面
只要在自定义页面中嵌入占位符，且在页面元素中使用替换的 CSS 中的变量即可，比如
<html>
<head>
{{placeholder: color}}
</head>
<style>
.test {
color: var(--primary-color)
}
</style>
<body>
<p class="test">
test
</p>
</body>
</html>
人机的页面效果如下：字体颜色变成了蓝色，且可以根据自定义配色进行变化
