Javascript 添加过渡到Chrome地址栏主题颜色更改

所以我一直在尝试在我的网站上添加darkmode，到目前为止进展得非常顺利， 我有一个0.3秒的轻松过渡主题的变化，所以变化不是很突然。 我使用这个JS代码在chrome for mobile中更改地址栏的颜色

//更改地址栏的颜色！
window.document.querySelector(
“meta[name=“主题颜色”]”
).setAttribute(
“内容”，IsDakMode？“#000000”：“#FFFFFF”
);
我想就是它了，用它，只要点击一个按钮就可以打开黑暗模式。我希望这有帮助。它确实有一个平滑的暗模式动画，也可以在移动设备上使用。这就是我认为可以回答你问题的原因。告诉我它是否有用


var sw=document.querySelector（'color\u scheme\u switch'）；
函数changeTheme（）
{
如果（开关检查）{
document.documentElement.setAttribute（'data-color-scheme'，'dark'）；
setItem（'color_scheme'，'dark'）；
}
否则{
document.documentElement.setAttribute（'data-color-scheme'，'light'）；//或为空
localStorage.setItem（'color_scheme'，'light'）；//或为空
} 
警报（document.documentElement.getAttribute（'data-color-scheme'））
}
sw.addEventListener（'change'，function（）{changeTheme（）}）
/*字体导入*/
@导入url（'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0，400；0700；1400；1700&display=swap'）；
/*规范化*/
身体{
填充：0；
保证金：0；
字体系列：“Lato”，Arial，Segoe用户界面，无衬线；
}
/*一些乐趣*/
*{
过渡：颜色缓和0.2s，背景色缓和0.2s；
}
/*主题设置*/
：根{
--背景颜色：#FAFAFA；
--文字颜色：#090909；
--锚定颜色：#005AB3；
--突出显示颜色：#0066CC；
}
html[数据颜色方案=“深色”]{
--背景颜色：#090909；
--文字颜色：#FAFAFA；
--锚定颜色：#FFFFFF；
--突出显示颜色：#0099FF；
}
身体{
背景色：var（--bg色）；
颜色：var（--文本颜色）；
}
h1{
颜色：var（--文本颜色）；
}
：-moz-selection/*FireFox*/
{
颜色：var（--高亮显示颜色）；
背景：var（--突出显示bg）；
}
：：选择
{
颜色：var（--高亮显示颜色）；
背景：var（--突出显示bg）；
}
/*暗模式开关*/
标签{
位置：绝对位置；
右：20px；
最高：50%；
--c：翻译（-50%，-50%）；
变换：var（--c）；
}
.开关{
位置：相对位置；
左：0；上：0；
宽度：40px；
高度：40px；
}
标签>输入{
位置：绝对位置；
左：0；
排名：0；
z指数：5；
不透明度：0；
宽度：100%；
身高：100%；
}
.开关跨度{
显示：块；
位置：绝对位置；
左：50%；
最高：50%；
变换：var（--c）；
边界半径：50%；
宽度：70%；
身高：70%；
背景#FFAC33；
边框：5px纯白；
过渡：均为0.15s；
}
.开关室{
位置：绝对位置；
左：0；上：0；
宽度：100%；
身高：100%；
}
.switch div:：before、.switch div:：after{
内容：“；
显示：块；
位置：绝对位置；
左：50%；
最高：50%；
变换：var（--c）；
背景#FFAC33；
宽度：12%；
身高：130%；
边界半径：10px；
过渡：均为0.15s；
}
.开关分区：第n个子（1）：：之前{
变换：var（--c）旋转（0度）；
}
.开关分区：第n个子项（1）：：之后{
变换：var（--c）旋转（45度）；/*45度每次递增*/
}
.开关分区：第n个子（2）：：之前{
变换：var（--c）旋转（90度）；
}
.开关分区：第n个子（2）：：之后{
变换：var（--c）旋转（135度）；
}
.switch:：之前，.switch:：之后{
内容：“；
位置：绝对位置；
左：50%；
最高：50%；
变换：var（--c）；
边界半径：50%；
背景：白色；
过渡：均为0.15s；
}
.switch：：之前{
宽度：0%；
身高：0%；
z指数：10；
}
.switch：：之后{
宽度：50%；
身高：50%；
}
输入：选中~开关量程{
宽度：100%；/*宽度变化*/
高度：100%；/*高度变化*/
背景：#66757F；/*颜色变化*/
/*我们得到一个满月*/
}
输入：选中~开关div:：before，
输入：选中~。开关div:：after{
高度：50%；/*我们隐藏阳光*/
}
输入：选中~.switch:：在{/*之前，我们在左上角画一个白色圆圈，表示半月形*/
左：30%；
最高：30%；
宽度：90%；
身高：90%；
}
输入：选中~.switch:：在{/*之后我们隐藏太阳轮廓*/
宽度：0%；
身高：0%；
}
输入：未（：选中）~.开关{
变换：旋转（180度）；
过渡：所有缓解2.15秒0.1秒；
}
/*其他风格*/
主要{
线高：1.4em；
}
.container、.post container{
位置：相对位置；
}
.集装箱{
填充：40px；
}
.粘的{
位置：粘性；
顶部：0；左侧：0；
宽度：100%；
高度：80px；
背景色：白色；
盒影：0.20px 0.px rgba（0,0,0,0.4）；
z指数：100；
}
.stickytext{
颜色：黑色；
字体大小：22px；
位置：绝对位置；
左：30px；
最高：50%；
转化：translateY（-50%）；
垫底：5px；
}

点击月亮
Lorem Ipsum Dolor Sit Amet。
Lorem ipsum dolor sit amet，是一位杰出的献身者。整型pharetra以ornare nisl aliquam表示。圣骑士团、奥奇·马莱苏阿达·尤斯莫德·波特提托、奥勒姆·努克·伊佩尔米以及普卢斯的罗纳卡·迪亚姆·乌尔纳。帕塞勒斯的菲塞勒斯。在发酵过程中，不需要发酵。暂时的安慰。塞德鲁特鲁姆康格十字勋章。前庭前发酵液。Integer sodales，位于euismod interdum的nisi，位于rutrum quam的neque quam，位于orci non lacus的quis EFILITUR QUA。毛里斯贵宾酒店。努克拍卖行的拍卖效率。我爱你，我爱你，我爱你。不可在任何情况下为侵权行为提供便利。
前庭不亮。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。在艾库利斯ac的赛德·泰卢斯·安特（Sed tellus ante）、普雷蒂姆（pretium）和奥迪奥（Diet odio）。无生命之水，无生命之水，无生命之水，无生命之水，无生命之水。两位智者都是乌尔纳，一位圣人，一位是利奥。南欧效率有限公司。但是，我在酒后驾车去参加一个特别会议。
这是一个很好的例子。苏万寿