☰

PWA Dark Titlebar

Changes the titlebars of your PWA to be dark!

  1. // ==UserScript==
  2. // @name         PWA Dark Titlebar
  3. // @namespace    https://github.com/jairjy
  4. // @version      1.1
  5. // @description  Changes the titlebars of your PWA to be dark!
  6. // @author       Gredicer
  7. // @match        *://*/*
  8. // @grant        none
  9. // @run-at       document-start
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     checkNightMode()
  17.  
  18.     function checkNightMode(){
  19.         var meta = document.createElement("meta");
  20.         if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  21.             meta.name = "theme-color";
  22.             meta.content = "#1a1a1a";
  23.         }else {
  24.             meta.name = "theme-color";
  25.             meta.content = "#ffffff";
  26.         }
  27.         document.getElementsByTagName("head")[0].prepend(meta);
  28.     }
  29.  
  30.     let lightMedia = window.matchMedia('(prefers-color-scheme: light)');
  31.  
  32.     let darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
  33.  
  34.     let callback = (e) => {
  35.         let prefersDarkMode = e.matches;
  36.         if (prefersDarkMode) {
  37.             checkNightMode();
  38.         }
  39.     };
  40.  
  41.     if (typeof darkMedia.addEventListener === 'function'||typeof lightMedia.addEventListener === 'function') {
  42.         lightMedia.addEventListener('change', callback);
  43.         darkMedia.addEventListener('change', callback);
  44.     }
  45.  
  46. })();