☰

YouTube Custom Material Design Style

Apply Material Design Lite styling to YouTube

  1. // ==UserScript==
  2. // @name         YouTube Custom Material Design Style
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Apply Material Design Lite styling to YouTube
  6. // @match        *://www.youtube.com/*
  7. // @grant        none
  8. // ==/UserScript==
  9.  
  10. (function() {
  11.     'use strict';
  12.  
  13.     // Add custom styles to the document
  14.     const style = document.createElement('style');
  15.     style.textContent = `
  16.         /* Import Material Design Lite CSS and Roboto Font */
  17.         @import url('https://code.getmdl.io/1.3.0/material.indigo-pink.min.css');
  18.         @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
  19.  
  20.         /* Root variables */
  21.         :root {
  22.             --showRtcConnectionStatusIcon: block; /* Show video call ping/status icon */
  23.             --jumboEmojiSize: 2rem; /* Old size: 2rem | New size: 3rem */
  24.         }
  25.  
  26.         /* Example Material Design Lite styles */
  27.         body {
  28.             font-family: 'Roboto', sans-serif;
  29.         }
  30.  
  31.         /* Resize jumbo emojis */
  32.         .jumbo-emoji {
  33.             font-size: var(--jumboEmojiSize);
  34.         }
  35.  
  36.         /* Other custom styles can be added here */
  37.     `;
  38.     document.head.appendChild(style);
  39. })();