Change your theme color using js

html meta theme-color only supported by chrome android till now.

the color set the background color of your top part of browser

<meta name="theme-color" content="#4285f4">

but how do we switch it from white to dark and vice-versa for darkmode and lightmode?

let meta = document.getElementsByTagName("META");

meta = [...meta];
meta.map((elem) => {

if (elem.name === "theme-color") meta = elem;

});
if (getCookie("theme") === "dark") {
meta.content = "#222";
}
else {
meta.content = "#fff";
}
//Theme Toggle
var gettheme = document.querySelector(".theme-switch");
getTheme.addEventListener("click", () => {
if (getCookie("theme") === "light") { meta.content = "#222";
}
else {
meta.content = "#fff";
}
});
Change your theme color using js
Change your theme color using js

--

--

--

https://anjitpariyar.vercel.app/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Persisting Redux

Week 4 Learned Node JS

Upload images with Angular 10, Express 4.17.1 & Node  —  2020 tutorial

Straight forward implementation of global state in React, with independently updated target…

Mastering Computed Properties in VueJS

How to get your Rails data into your React component with webpacker

[Action required] Your RSS.app Trial has Expired — Fri Dec 31 2021

The Best Way to Know What Is React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
anjit pariyar

anjit pariyar

https://anjitpariyar.vercel.app/

More from Medium

Coding a Glassy Block

What is the difference between REM and EM on CSS3

Create a Landing Page Design using CSS framework: Sass Part 2.

The Light Came On: Phase 1