Replace the logo on the GitHub logo with a "P-hub" style one

GitHub logo replace v3.js

// ==UserScript==
// @name         GitHub logo replace
// @description  Replace the logo on the GitHub logo with a "P-hub" style one.
// @run-at       document-body
// @version      3.3.0
// @match        *://github.com/*
// @match        *://gist.github.com/*
// @exclude      *://training.github.com/*
// @exclude      *://docs.github.com/*
// @author       Bert Chen
// ==/UserScript==

(function () {
  const src_dark = "https://gist.githubusercontent.com/bert9946/27e00f4fac175630c4da0fe1f5bbd19a/raw/23d43dd3c661582a1bb8e067b61e2b14cd725eb0/Logo_dark.svg";
  const src_light = "https://gist.githubusercontent.com/bert9946/27e00f4fac175630c4da0fe1f5bbd19a/raw/23d43dd3c661582a1bb8e067b61e2b14cd725eb0/Logo_light.svg";

  // Function to replace the logo
  function replaceLogo() {
    let oldLogo;
    if (window.location.hostname === "github.com") {
      oldLogo = document.getElementsByClassName('octicon-mark-github')[0];
      if (!oldLogo) return; // Exit if logo not found

      const a = document.getElementsByClassName('prc-Button-ButtonBase-9n-Xk')[1];

      if (a) {
        a.setAttribute("style", "width: 86.6px; border-radius: 3px");
      }
    }
    else if (window.location.hostname === "gist.github.com") {
      oldLogo = document.getElementsByClassName('octicon-logo-github')[0];
      if (!oldLogo) return; // Exit if logo not found
    }

    // Check if logo is already replaced
    if (oldLogo.tagName === 'IMG' && oldLogo.src.includes('Logo_')) {
      return; // Logo already replaced
    }

    // "P hub" style logo
    let img = document.createElement("img");

    if (window.location.hostname === "github.com") {
      const updateLogo = (isDarkMode) => {
        img.src = isDarkMode ? src_dark : src_light;
      };

      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
      updateLogo(isDarkMode);

      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
        updateLogo(event.matches);
      });
    }
    else {
      img.src = src_dark;
    }

    img.setAttribute("style", "width: 86.6px; height: 32px;");
    img.classList = 'octicon octicon-logo-github octicon-mark-github v-align-middle';

    oldLogo.replaceWith(img);
  }

  // Run initially
  replaceLogo();

  // Set up MutationObserver to watch for DOM changes
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'childList' || mutation.type === 'subtree') {
        replaceLogo();
      }
    }
  });

  // Start observing the document with the configured parameters
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();

Logo_dark.svg

Logo_light.svg