☰

YouTube with Material Design Lite

Replace YouTube's CSS with Material Design Lite styling

  1. // ==UserScript==
  2. // @name         YouTube with Material Design Lite
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Replace YouTube's CSS with Material Design Lite styling
  6. // @match        *://www.youtube.com/*
  7. // @grant        none
  8. // ==/UserScript==
  9.  
  10. (function() {
  11.     'use strict';
  12.  
  13.     // Remove all existing stylesheets in the <head> element
  14.     const head = document.head || document.getElementsByTagName('head')[0];
  15.     const links = head.querySelectorAll('link[rel="stylesheet"], style');
  16.  
  17.     links.forEach(link => link.remove());
  18.  
  19.     // Import Material Design Lite CSS and Google Fonts
  20.     const mdlLink = document.createElement('link');
  21.     mdlLink.rel = 'stylesheet';
  22.     mdlLink.href = 'https://code.getmdl.io/1.3.0/material.indigo-pink.min.css';
  23.     head.appendChild(mdlLink);
  24.  
  25.     const fontLink = document.createElement('link');
  26.     fontLink.rel = 'stylesheet';
  27.     fontLink.href = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700';
  28.     head.appendChild(fontLink);
  29.  
  30.     // Additional custom styles to align with Material Design
  31.     const style = document.createElement('style');
  32.     style.textContent = `
  33.         /* Root variables for custom elements */
  34.         :root {
  35.             --showRtcConnectionStatusIcon: block;
  36.             --jumboEmojiSize: 2rem;
  37.         }
  38.  
  39.         /* Apply Roboto font */
  40.         body {
  41.             font-family: 'Roboto', sans-serif;
  42.         }
  43.  
  44.         /* Example styling for YouTube elements */
  45.         .youtube-header {
  46.             background-color: #3f51b5; /* Material Indigo */
  47.             color: white;
  48.             padding: 10px;
  49.         }
  50.  
  51.         .youtube-content {
  52.             margin: 20px;
  53.             padding: 10px;
  54.             background-color: #ffffff;
  55.             border-radius: 4px;
  56.             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  57.         }
  58.  
  59.         /* Material Design for buttons */
  60.         .yt-button {
  61.             font-size: 16px;
  62.             color: #fff;
  63.             background-color: #ff4081;
  64.             padding: 10px 20px;
  65.             text-transform: uppercase;
  66.             border: none;
  67.             border-radius: 4px;
  68.             cursor: pointer;
  69.         }
  70.  
  71.         /* Resize jumbo emojis */
  72.         .jumbo-emoji {
  73.             font-size: var(--jumboEmojiSize);
  74.         }
  75.  
  76.         /* Hide or adjust other elements as necessary */
  77.     `;
  78.     head.appendChild(style);
  79.  
  80. })();