Youtube music light themes
Tags: youtube, javascript, coding, google
Published: 2024-04-25 16:54:26

## Introduction
Hello fellow members!

In this article, I would like to discuss a solution for the light theme issue on Youtube Music. **This article is not technical but rather a practical solution for those who prefer light themes.**

I recently started using Youtube Music and noticed that the dark theme was not suitable for my eyes as an avid light theme user. I looked for a solution in the settings, Google Docs, or other resources, but there was none.

- https://support.google.com/youtubemusic/thread/102408986/can-i-change-the-theme-to-white?hl=en
- https://www.reddit.com/r/YoutubeMusic/comments/g2gu22/light_theme/

Therefore, I decided to build a script that would provide a light theme for myself and others who would like to have this option. My main aim was to create a solution that is easy to use and provides various options to the user, rather than just one. It may not be perfect, but it's a good start and will continue to improve.

### Disclaimer
I have only tested this solution on desktop browsers.

```js
(function () {
    "use strict";

    const uLight = {
        count: 0,
        limit: 10,
        currentTheme: 1,
        initStatus: false,
        textBlack: [],
        themes: [
            "#fff",
            "#f1f1f1",
            "#d8b4fe",
            "#a78bfa",
            "#0e7490",
            "#86198f",
            "#94a3b8",
            "#44403c",
            "#f43f5e",
            "#7c3aed",
            "#164e63",
            "#713f12",
            "#c2410c",
            "rgb(111 82 110 / 81%)",
            "rgb(108 165 163 / 82%)",
            "rgb(114 111 64 / 82%)",
            "rgb(151 132 132 / 82%)",
            "rgb(0 0 0)", // Dark | Always Keep it in the last to support default theme
        ],
        init: () => {
            uLight.currentTheme = uLight.localStorage();

            uLight.textBlack = uLight.themes.slice(0, 8);

            uLight.addCss();
            uLight.createThemes();
            if (uLight.currentTheme != uLight.themes.length - 1) {
                uLight.pluginInit();
            }
        },
        pluginInit: () => {
            if (uLight.initStatus) return;

            uLight.initStatus = true;
            setTimeout(() => {
                document
                    .querySelector("yt-page-navigation-progress")
                    .addEventListener("DOMSubtreeModified", () => {
                        uLight.checkProgress();
                    });
            }, 1000);
            uLight.fixBackground();
            uLight.setTheme(uLight.currentTheme);
        },
        localStorage: (theme = null) => {
            if (typeof Storage !== "undefined") {
                if (theme != null) {
                    uLight.currentTheme = theme;
                    localStorage.setItem("uLight-theme", theme);
                } else
                    return (
                        localStorage.getItem("uLight-theme") ||
                        uLight.currentTheme
                    );
            }
            return uLight.currentTheme;
        },
        fixBackground: () => {
            uLight.setProperty(
                document.querySelector(
                    "ytmusic-browse-response[has-background]:not([disable-gradient]) .background-gradient.ytmusic-browse-response"
                ),
                "background",
                "var(--ytmusic-background)"
            );
        },
        checkProgress: () => {
            if (
                uLight.count == uLight.limit ||
                document
                    .querySelector("yt-page-navigation-progress")
                    .attributes.getNamedItem("aria-valuenow").value == "100"
            ) {
                uLight.fixBackground();
                uLight.count = 0;
            } else {
                uLight.count++;
                uLight.checkProgress();
            }
        },
        removeStyle: (id) => {
            const styleSheet = document.getElementById(id);
            if (styleSheet) {
                styleSheet.remove();
            }
        },
        createStyle: (style, id = null) => {
            const styleSheet = document.createElement("style");
            styleSheet.id = id || new Date().getTime();
            styleSheet.innerText = style;
            document.head.appendChild(styleSheet);
        },
        addCss: () => {
            let pStyles = "";
            uLight.themes.map(
                (t, i) =>
                    (pStyles += `
                .uLight-theme-container p:nth-child(${i + 1}) {
                    background: ${uLight.themes[i]};
                }
            `)
            );
            const style = `
                .icon.ytmusic-menu-navigation-item-renderer {
                    fill: #000;
                }
                picture.ytmusic-fullbleed-thumbnail-renderer img {
                    opacity: .4;
                }
                .uLight-theme-container {
                    position: absolute;
                    right: 20px;
                    top: 20px;
                    display: flex;
                    flex-direction: column;
                }
                .uLight-theme-container p {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    cursor: pointer;
                    margin-top: 6px;
                    border: 1px solid;
                }
                ${pStyles}
            `;
            uLight.createStyle(style);
        },
        trustedTypes: () => {
            if (window.trustedTypes && trustedTypes.createPolicy) {
                return trustedTypes.createPolicy("uLightPolicy", {
                    createHTML: (string) => string,
                });
            }
            return null;
        },
        createThemes: () => {
            const themeElement = document.createElement("div");
            themeElement.className = "uLight-theme-container";
            let themeOptions = "";
            uLight.themes.map(() => (themeOptions += `<p></p>`));
            themeElement.innerHTML = uLight
                .trustedTypes()
                ?.createHTML(themeOptions);
            document.querySelector("ytmusic-nav-bar").appendChild(themeElement);
            setTimeout(() => {
                uLight.addEvents();
            }, 500);
        },
        addEvents: () => {
            document
                .querySelectorAll(".uLight-theme-container p")
                .forEach((p, index) => {
                    p.addEventListener("click", (e) => {
                        uLight.setTheme(index);
                    });
                });
        },
        setTheme: (theme) => {
            let color;
            color = uLight.themes[theme];

            const cleanColor = color.endsWith(")")
                ? color.split("/")[0].replace(")", "") + ")"
                : color;

            uLight.setProperty(
                document.querySelector("html"),
                "--ytmusic-color-black4",
                cleanColor
            );
            uLight.setProperty(
                document.querySelector("html"),
                "--ytmusic-color-black1",
                "var(--ytmusic-color-black4)"
            );
            uLight.setProperty(
                document.querySelector("body"),
                "background",
                color
            );
            uLight.setProperty(
                document.querySelector(
                    "ytmusic-search-box[is-bauhaus-sidenav-enabled]"
                ),
                "--ytmusic-search-background",
                cleanColor || "#fff"
            );
            uLight.setProperty(
                document.querySelector(".cast-button.ytmusic-cast-button"),
                "--iron-icon-fill-color",
                "#000"
            );
            if (uLight.textBlack.includes(color)) {
                uLight.createStyle(
                    `
                * {
                    color: #000 !important;
                }`,
                    "uLight-text-black"
                );
            } else {
                uLight.removeStyle("uLight-text-black");
            }

            uLight.localStorage(theme);

            uLight.pluginInit();
        },
        setProperty: (selector, key, value, type = "style") => {
            if (selector) selector[type].setProperty(key, value);
        },
    };
    uLight.init();
})();

```

{% embed https://github.com/ysmnikhil/youtube-music-light-themes %}

---

### How to use it?

Here's a step-by-step guide on how to use the script to get a light theme on Youtube Music:
- Copy the script provided.
- Paste it into the Youtube Music console in your browser.

![Youtube Music Light Theme Setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0b0r0e6p5ygjewl04qd1.png)

You will see some options like next screenshot in your desktop and once you will click on these coloured dots, you will see the colours will change.

![Youtube Music Light Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hpt0hiyltrr92yvsyag.png)

![Youtube Music Light Theme with other options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghg5okzp7h3nyzamqe51.png)

However, this step requires you to do it every time you visit or refresh the page. To fix this, there are various options available, such as using the [Tampermonkey Chrome extension](
https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo). You can choose whatever you prefer.

Then, copy the entire script with **headers** (which are very important) from the GitHub repo and use it with your browser plugin.

![temper monkey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcm3c8axxzmhzgzdh9c0.png)

![temper monkey script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2fqpgzeq1md3fs5b2wr.png)

Now, the light theme will work like a charm and be available all the time in the same browser.