在Arc浏览器上加个彩蛋

本文主要针对Arc浏览器编写，使用Arc浏览器调节主题颜色，可以更好的查看代码示例

Arc浏览器会向网页里注入一些关于主题颜色的CSS变量，eg: --arc-palette-title，在刚使用的时候，我就已经尝试了使用这些变量来进行网页的主题构建use-arc-theme。

当时就想在博客里直接使用，但因为比较懒，就一直没有弄，今天给融入一下博客。

分析Arc的CSS变量

Arc主题编辑器里面有三种模式：单色、双色、三色，对应的变量如下：

css

:root {
    /** 单色 */
    --arc-background-simple-color: #F38B85FF;

    /** 双色 */
    --arc-background-gradient-color0: #F38B85FF;
    --arc-background-gradient-color1: #85EDF3FF;

    /* 三色 */
    --arc-background-gradient-color0: #F38B85FF;
    --arc-background-gradient-color1: #85F3C1FF;
    --arc-background-gradient-overlay-color0: #00000000; /** 三色时这里固定是一个透明色 */
    --arc-background-gradient-overlay-color1: #85B6F3FF;
}

对应Arc自身背景色的实现

单色没啥可说的，就是个纯色背景

css

.bg {
    background: var(--arc-background-simple-color);
}

单色

双色就是一层渐变

css

.bg {
    background: linear-gradient(
        to right,
        var(--arc-background-gradient-color0),
        var(--arc-background-gradient-color1)
    )；
}

双色

三色，看Arc插入的变量名，可以想到是两层渐变叠加在一起

css

.bg {
    background:
        linear-gradient(
            to bottom,
            var(--arc-background-gradient-overlay-color0),
            var(--arc-background-gradient-overlay-color1)
        ),
        linear-gradient(
            to right,
            var(--arc-background-gradient-color0),
            var(--arc-background-gradient-color1)
        );
}

三色

但看上面的情况，第三种颜色覆盖了大部分前两种颜色，这时为了将前两种颜色更多的显示出来，就需要调整一下overlay层的透明度或者覆盖范围了。

css

.bg {
    background:
        linear-gradient(
            to bottom,
            var(--arc-background-gradient-overlay-color0),
            var(--arc-background-gradient-overlay-color1)
        ),
        linear-gradient(
            to right,
            var(--arc-background-gradient-color0) 20%,
            var(--arc-background-gradient-color1)
        );
}

↑ 这样看起来就跟Arc浏览器一模一样了（虽然还是有丝丝差别，但影响不大）

使用

上面只介绍了Arc的三种主题色，实际上Arc注入的变量还有根据主题色计算得出的title、focus之类的衍生变量，但由于具体逻辑不太清楚，就没太敢使用。

分析完后，接下来就是给它添加到我的博客里面了（见下方的哆啦A梦），为了在其他浏览器中，能有很好的回退，可以使用var函数的默认值，定义一下没取到值时的主题色

css

.arc-background {
    --accent: var(--arc-background-simple-color, #03e9f4);
    /* 渐变层默认值取相同的单色主题即可 */
    --arc-color0: var(--arc-background-gradient-color0, var(--accent));
    --arc-color1: var(--arc-background-gradient-color1, var(--accent));
    /* overlay层无值默认透明 */
    --arc-overlay-color0: var(--arc-background-gradient-overlay-color0, transparent);
    --arc-overlay-color1: var(--arc-background-gradient-overlay-color1, transparent);

    background:
        linear-gradient(to right, var(--arc-color0), var(--arc-color1)),
        linear-gradient(to bottom, var(--arc-overlay-color0) 20%, var(--arc-overlay-color1));
}

至此，arc-background这段代码，在Arc浏览器上就会跟随用户定义的主题变化，在其他浏览器上就会变成默认的纯色背景了（唯一美中不足的一点就是，你不知道用户定义的主题色偏白还是偏黑，不好去大范围使用）