所以我一直在尝试在我的网站上添加darkmode，到目前为止进展非常顺利，我有一个0.3秒的轻松过渡主题的变化，所以变化不是很突然。我用这个JS代码更改了移动的chrome地址栏的颜色
//Changes the AddressBar Color!
window.document.querySelector(
'meta[name="theme-color"]'
).setAttribute(
'content', isDarkMode ? '#000000' : '#FFFFFF'
);<!--In the Head Tag-->
<meta name="theme-color" content="#FFFFFF" />一切都很好，但当我改变主题时，正文颜色会逐渐变化，但地址颜色栏会突然变化如何将0.3秒的轻松颜色变化添加到其中，使一切都变得渐进和一致？
任何帮助都将不胜感激！
我想就是这样了，点击按钮即可打开暗模式。我希望这能有所帮助。它确实有一个平滑的暗模式动画，也适用于移动设备。我认为这将回答你的问题。告诉我它是否有用。
var sw = document.querySelector('#color_scheme_switch');
function changeTheme()
{
if(sw.checked){
document.documentElement.setAttribute('data-color-scheme', 'dark');
localStorage.setItem('color_scheme', 'dark');
}
else{
document.documentElement.setAttribute('data-color-scheme', 'light'); // or just empty " "
localStorage.setItem('color_scheme', 'light'); // or just empty " "
}
alert(document.documentElement.getAttribute('data-color-scheme'))
}
sw.addEventListener('change', function(){ changeTheme() });/*font import*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*normalization*/
body{
padding:0;
margin:0;
font-family:"Lato", Arial, Segoe UI, sans serif;
}
/*some fun*/
*{
transition:color ease 0.2s, background-color ease 0.2s;
}
/*theme setup*/
:root{
--bg-color: #FAFAFA;
--text-color: #090909;
--anchor-color: #005AB3;
--highlight-color: #0066CC;
}
html[data-color-scheme = "dark"]{
--bg-color: #090909;
--text-color: #FAFAFA;
--anchor-color: #FFFFFF;
--highlight-color: #0099FF;
}
body{
background-color: var(--bg-color);
color: var(--text-color);
}
h1{
color: var(--text-color);
}
::-moz-selection /* FireFox */
{
color: var(--highlight-color);
background: var(--highlight-bg);
}
::selection
{
color: var(--highlight-color);
background: var(--highlight-bg);
}
/*the Dark Mode Switch*/
label{
position:absolute;
right:20px;
top:50%;
--c:translate(-50%,-50%);
transform:var(--c);
}
.switch{
position:relative;
left:0;top:0;
width:40px;
height:40px;
}
label > input{
position:absolute;
left:0;
top:0;
z-index:5;
opacity:0;
width:100%;
height:100%;
}
.switch span{
display:block;
position:absolute;
left:50%;
top:50%;
transform:var(--c);
border-radius:50%;
width:70%;
height:70%;
background:#FFAC33;
border:5px solid white;
transition:all ease 0.15s;
}
.switch div{
position:absolute;
left:0;top:0;
width:100%;
height:100%;
}
.switch div::before, .switch div::after{
content:" ";
display:block;
position:absolute;
left:50%;
top:50%;
transform:var(--c);
background:#FFAC33;
width:12%;
height:130%;
border-radius:10px;
transition:all ease 0.15s;
}
.switch div:nth-child(1)::before{
transform:var(--c) rotate(0deg);
}
.switch div:nth-child(1)::after{
transform:var(--c) rotate(45deg); /*45deg increment each time*/
}
.switch div:nth-child(2)::before{
transform:var(--c) rotate(90deg);
}
.switch div:nth-child(2)::after{
transform:var(--c) rotate(135deg);
}
.switch::before, .switch::after{
content:" ";
position:absolute;
left:50%;
top:50%;
transform:var(--c);
border-radius:50%;
background:white;
transition:all ease 0.15s;
}
.switch::before{
width:0%;
height:0%;
z-index:10;
}
.switch::after{
width:50%;
height:50%;
}
input:checked ~ .switch span{
width:100%; /*width change*/
height:100%; /*height change*/
background:#66757F; /*color change*/
/*we get a full moon*/
}
input:checked ~ .switch div::before,
input:checked ~ .switch div::after{
height:50%; /*we hide the sun-rays*/
}
input:checked ~ .switch::before{ /*we draw a white circle a left-top corner to show a half moon*/
left:30%;
top:30%;
width:90%;
height:90%;
}
input:checked ~ .switch::after{ /*we hide the sun outline*/
width:0%;
height:0%;
}
input:not(:checked) ~ .switch{
transform:rotate(180deg);
transition:all ease 2.15s 0.1s;
}
/*other styles*/
main{
line-height:1.4em;
}
.container, .post-container{
position:relative;
}
.container{
padding:40px;
}
.sticky{
position:sticky;
top:0;left:0;
width:100%;
height:80px;
background-color:white;
box-shadow:0 0 20px 0px rgba(0,0,0,0.4);
z-index:100;
}
.stickytext{
color:black;
font-size:22px;
position:absolute;
left:30px;
top:50%;
transform:translateY(-50%);
padding-bottom:5px;
}<div class="sticky">
<div class="stickytext">Click the moon</div>
<label>
<input id="color_scheme_switch" type="checkbox" aria-label="Turn off the lights!" title="Switch to Dark Mode"/>
<div class="switch">
<div></div>
<div></div>
<span></span>
</div>
</label>
</div>
<div class="container">
<h1>Lorem Ipsum Dolor Sit Amet.</h1>
<main class="post-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra est sed sem egestas, in ornare nisl aliquam. Quisque consectetur, orci malesuada euismod porttitor, lorem nunc imperdiet mi, et rhoncus diam urna at purus. Phasellus at imperdiet lacus. Phasellus feugiat arcu ut quam finibus, nec laoreet erat fermentum. Donec et risus vel mi tempor convallis. Sed rutrum congue scelerisque. Donec pretium vestibulum mauris id fermentum. Integer sodales, nisi at euismod interdum, neque quam rutrum quam, quis efficitur quam orci non lacus. Fusce ac dignissim mauris. Nunc auctor efficitur lobortis. Praesent id eros sit amet dolor fermentum elementum vitae id ipsum. Donec convallis consequat enim, et facilisis tortor pretium in.
Nullam aliquet vestibulum urna sed tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tellus ante, pretium at iaculis ac, imperdiet imperdiet odio. Nulla faucibus viverra arcu, eu aliquam ligula euismod eu. Duis sapien urna, lacinia id consectetur in, consequat vel leo. Nam eu efficitur nibh. Ut aliquam dui sit amet ultrices consequat.
Fusce eros lectus, convallis sit amet nulla ut, dapibus posuere nisl. Vivamus sollicitudin lobortis nisi, quis convallis justo vehicula eget. Aliquam sit amet interdum nunc. Morbi nec ipsum sapien. Praesent sed ante aliquam sapien vestibulum vulputate. Fusce cursus eu tortor ut venenatis. Nulla risus mauris, vestibulum vel pharetra sodales, auctor vitae massa. Vivamus ac metus eget sem cursus viverra eget eu enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ac odio sed justo dictum commodo. Curabitur lacinia, ex in consectetur pulvinar, nisl justo vestibulum ex, id molestie velit nunc vitae velit. Donec ut arcu venenatis, vehicula lectus eu, venenatis erat. Etiam gravida eu ligula in commodo.
Nunc ornare porttitor orci, sed ultricies dolor. Donec ac ultrices nibh, fermentum dignissim nibh. Nullam sodales ipsum et nulla tincidunt ultricies. Aliquam erat volutpat. Nulla in mollis enim, et ultrices sapien. Quisque sed enim et nibh sollicitudin lacinia. Maecenas sodales magna vitae est posuere, non fringilla ligula facilisis. In id neque non justo tincidunt eleifend. Maecenas placerat scelerisque nulla, non condimentum orci aliquet eget. Nam porttitor malesuada varius. Etiam euismod, augue quis tincidunt euismod, augue ex bibendum arcu, ac pretium nunc justo id purus. Nulla sagittis arcu vitae elit facilisis sagittis. Nam a risus at libero congue consequat et nec purus.
Duis blandit sem pretium mi euismod hendrerit et a nulla. Praesent porta odio est, ac tempor purus lacinia ac. Duis vitae diam dictum, mollis eros nec, sollicitudin nibh. Nunc et lacus elementum, laoreet turpis ac, convallis diam. Proin dictum ex eget metus porta elementum. Duis viverra ex et pharetra consequat. Sed ipsum dolor, gravida vel velit ac, rhoncus dapibus tellus. Curabitur sed auctor tortor. Proin mattis urna nec augue auctor, facilisis placerat elit tristique. Vestibulum id aliquet lectus. Maecenas aliquam imperdiet nibh eget vulputate. Quisque vitae tristique arcu, vel aliquet erat. Vivamus quis magna a justo pretium dapibus et sed nunc. Suspendisse viverra massa eget turpis accumsan, sed semper felis lobortis. Nunc ac massa vitae nisl lacinia luctus eget non tellus. Duis iaculis eu ipsum vel suscipit.
</main>
</div>