<dom-module id="my-plugin">
  <script>
    Gerrit.install(plugin => {
      plugin.registerStyleModule('app-theme', 'myplugin-app-theme');
      plugin.registerStyleModule('app-theme-light', 'myplugin-app-theme-light');
      plugin.registerStyleModule('app-theme-dark', 'myplugin-app-theme-dark');
    });
  </script>
</dom-module>

<dom-module id="myplugin-app-theme">
  <template>
    <style>
      html {
        --primary-text-color: #F00BAA;
      }
    </style>
  </template>
</dom-module>

<dom-module id="myplugin-app-theme-light">
  <template>
    <style>
      html {
        --header-background-color: #F01BAA;
        --header-title-content: "MyGerrit";
        --footer-background-color: #F02BAA;
      }
    </style>
  </template>
</dom-module>

<dom-module id="myplugin-app-theme-dark">
  <template>
    <style>
      html {
        --primary-text-color: red;
        --header-background-color: black;
        --header-title-content: "MyGerrit Dark";
        --footer-background-color: yellow;
      }
    </style>
  </template>
</dom-module>