src/main/resources/static/chromium-style.js

Gerrit.install(function (plugin) {
  const chromiumLogoUrl = plugin.url('/static/chromium_logo.png');
  const chromeLogoUrl = plugin.url('/static/chrome_logo.png');
  const chromiumDarkTheme = document.createElement("dom-module");
  chromiumDarkTheme.innerHTML = `
 <template>
    <style>
      html {
        /* Same color as light theme but with a 90 alpha */
        --header-background-color: #DCE5F890;
        --header-text-color: #000;
        --header-title-content: "Chromium Gerrit";
        --header-icon: url("${chromiumLogoUrl}");
        --header-icon-size: 1em;
      }
    </style>
  </template>
`;
  chromiumDarkTheme.register("chromium-style-chromium-darktheme");

  const chromiumLightTheme = document.createElement("dom-module");
  chromiumLightTheme.innerHTML = `
  <template>
    <style>
      html {
        --header-background-color: #DCE5F8;
        --header-text-color: #000;
        --header-title-content: "Chromium Gerrit";
        --header-icon: url("${chromiumLogoUrl}");
        --header-icon-size: 1em;
      }
    </style>
  </template>`;

  chromiumLightTheme.register("chromium-style-chromium");

  const chromeDarkTheme = document.createElement("dom-module");
  chromeDarkTheme.innerHTML = `
  <template>
    <style>
      html {
        /* Same color as light theme but with a 90 alpha */
        --header-background-color: #F5CFCC90;
        --header-text-color: #000;
        --header-title-content: "Chrome Internal Gerrit";
        --header-icon: url("${chromeLogoUrl}");
        --header-icon-size: 1em;
      }
    </style>
  </template>`;
  chromeDarkTheme.register("chromium-style-chrome-darktheme");

  const chromeLightTheme = document.createElement("dom-module");
  chromeLightTheme.innerHTML = `
  <template>
    <style>
      html {
        --header-background-color: #F5CFCC;
        --header-text-color: #000;
        --header-title-content: "Chrome Internal Gerrit";
        --header-icon: url("${chromeLogoUrl}");
        --header-icon-size: 1em;
      }
    </style>
  </template>`;
  chromeLightTheme.register("chromium-style-chrome");

  if (window.location.host.includes("chromium-review")) {
    plugin.registerStyleModule(
      "app-theme-dark",
      "chromium-style-chromium-darktheme"
    );
    plugin.registerStyleModule("app-theme-light", "chromium-style-chromium");
  } else if (window.location.host.includes("chrome-internal-review")) {
    plugin.registerStyleModule(
      "app-theme-dark",
      "chromium-style-chrome-darktheme"
    );
    plugin.registerStyleModule("app-theme-light", "chromium-style-chrome");
  }
});