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

Question

So I have been experimenting with adding darkmode to my website and it has been going very well so far, I have a 0.3s ease transition for the theme change, so the change isn't very abrupt. I used this JS code to change the color of the address bar in chrome for mobile

 //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" />

Everything works fine but when I change the theme, the body color changes gradually but the address color bar changes abruptly How do i add the 0.3s ease color change to that to make everything gradual and consistent?

Any help would be appreciated!

Answer 1

I think this is it, with this it turns on dark mode with a click of a button. I hope this helps. It does have a smooth dark mode animation and does work on mobile too. This is what I think will answer your question. Tell me if it helps or not.

 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>