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

GitHub logo replace.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      2.0.1
// @match        *://github.com/*
// @exclude      *://training.github.com/*
// @exclude      *://docs.github.com/*
// @author       Bert Chen
// ==/UserScript==

(function () {
  var oldLogo = document.getElementsByClassName('octicon-mark-github')[1];

  var a = document.getElementsByClassName('AppHeader-logo')[1];
  a.setAttribute("style", "width: 89px; border-radius: 3px");


  //"P hub" style logo
  //the svg was originally created from: https://logohub.appspot.com/Git-Hub-120.svg?scheme=white&transparent=true&padding=0
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("style", "width: 89px; height: 32px;");

  const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
  style.textContent = `
		text { font-family:Arial,Helvetica; font-weight:bold; font-size:24px; }
		.prefix{ fill:#ffffff; }
		.suffix{ fill:#000000; }
        @media (prefers-color-scheme: light) {
            .prefix.adaptive { fill:#000000 }
        }
  `;

  const rect1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect1.setAttribute("x", "0");
  rect1.setAttribute("y", "0");
  rect1.setAttribute("width", "89");
  rect1.setAttribute("height", "32");
  rect1.setAttribute("fill", "#000000");
  rect1.setAttribute("fill-opacity", "0");

  const rect2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect2.setAttribute("x", "38");
  rect2.setAttribute("y", "0");
  rect2.setAttribute("width", "51");
  rect2.setAttribute("height", "32");
  rect2.setAttribute("fill", "#FF9000");
  rect2.setAttribute("rx", "3");

  const text1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
  text1.setAttribute("x", "2");
  text1.setAttribute("y", "24");
  text1.setAttribute("class", "prefix");
  text1.textContent = "Git";

  const text1a = document.createElementNS("http://www.w3.org/2000/svg", "text");
  text1.setAttribute("x", "2");
  text1.setAttribute("y", "24");
  text1.setAttribute("class", "prefix");
  text1.setAttribute("class", "adaptive");
  text1.textContent = "Git";

  const text2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
  text2.setAttribute("x", "40");
  text2.setAttribute("y", "24");
  text2.setAttribute("class", "suffix");
  text2.textContent = "Hub";

  svg.appendChild(style);
  svg.appendChild(rect1);
  svg.appendChild(rect2);
  svg.appendChild(text1);
  svg.appendChild(text1a);
  svg.appendChild(text2);

  /*
  // GitLab style
  newElement.src = 'https://raw.githubusercontent.com/mkrl/misbrands/456ea8aa2c7873123dce3d746528bb9a3b6dd139/github.svg';
  newElement.height = 36;
  */

  svg.classList = 'octicon octicon-mark-github v-align-middle';

  oldLogo.replaceWith(svg);

})();