☰

YouTube with Material Design Lite

Replace YouTube's CSS with Material Design Lite styling

// ==UserScript==
// @name         YouTube with Material Design Lite
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Replace YouTube's CSS with Material Design Lite styling
// @match        *://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Remove all existing stylesheets in the <head> element
    const head = document.head || document.getElementsByTagName('head')[0];
    const links = head.querySelectorAll('link[rel="stylesheet"], style');

    links.forEach(link => link.remove());

    // Import Material Design Lite CSS and Google Fonts
    const mdlLink = document.createElement('link');
    mdlLink.rel = 'stylesheet';
    mdlLink.href = 'https://code.getmdl.io/1.3.0/material.indigo-pink.min.css';
    head.appendChild(mdlLink);

    const fontLink = document.createElement('link');
    fontLink.rel = 'stylesheet';
    fontLink.href = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700';
    head.appendChild(fontLink);

    // Additional custom styles to align with Material Design
    const style = document.createElement('style');
    style.textContent = `
        /* Root variables for custom elements */
        :root {
            --showRtcConnectionStatusIcon: block;
            --jumboEmojiSize: 2rem;
        }

        /* Apply Roboto font */
        body {
            font-family: 'Roboto', sans-serif;
        }

        /* Example styling for YouTube elements */
        .youtube-header {
            background-color: #3f51b5; /* Material Indigo */
            color: white;
            padding: 10px;
        }

        .youtube-content {
            margin: 20px;
            padding: 10px;
            background-color: #ffffff;
            border-radius: 4px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* Material Design for buttons */
        .yt-button {
            font-size: 16px;
            color: #fff;
            background-color: #ff4081;
            padding: 10px 20px;
            text-transform: uppercase;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* Resize jumbo emojis */
        .jumbo-emoji {
            font-size: var(--jumboEmojiSize);
        }

        /* Hide or adjust other elements as necessary */
    `;
    head.appendChild(style);

})();