YouTube with Material Design

Apply Material Design 1 styles to YouTube using Materialize

  1. // ==UserScript==
  2. // @name YouTube with Material Design
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @description Apply Material Design 1 styles to YouTube using Materialize
  6. // @author You
  7. // @match *://www.youtube.com/*
  8. // @grant GM_addStyle
  9. // @require https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
  10. // @require https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. // Wait for the page to load completely
  17. window.addEventListener('load', function() {
  18. // Add Materialize initialization code if needed
  19. M.AutoInit();
  20.  
  21. // Custom CSS to style YouTube elements
  22. GM_addStyle(`
  23. /* Example of Material Design styles */
  24. .ytp-chrome-bottom {
  25. background-color: #ffffff !important; /* Material Design background color */
  26. }
  27.  
  28. .ytp-play-button {
  29. border-radius: 50% !important; /* Material Design rounded button */
  30. }
  31.  
  32. /* Add more styles as needed */
  33. `);
  34.  
  35. // Example of how to use Materialize classes in YouTube (may need adjustments)
  36. let subscribeButton = document.querySelector('#subscribe-button');
  37. if (subscribeButton) {
  38. subscribeButton.classList.add('btn', 'waves-effect', 'waves-light');
  39. }
  40. });
  41. })();