diff --git a/docker/gerrit/bazel/Dockerfile b/docker/gerrit/bazel/Dockerfile
index 5c1db52c55..4031001093 100644
--- a/docker/gerrit/bazel/Dockerfile
+++ b/docker/gerrit/bazel/Dockerfile
@@ -22,7 +22,7 @@ RUN mkdir /var/gerrit/plugins && \
   unzip -jo /var/gerrit/bin/gerrit.war WEB-INF/plugins/* -d /var/gerrit/plugins
 
 # NOTE(ianw) : copied into build context by playbooks/zuul/gerrit/run.yaml
-COPY plugins/opendevtheme.html /var/gerrit/plugins/opendevtheme.html
+COPY plugins/opendev-theme-plugin.js /var/gerrit/plugins/opendev-theme-plugin.js
 # Copy copies only the contents of a directory not the directory itself.
 COPY static/ /var/gerrit/static/
 
diff --git a/playbooks/zuul/gerrit/files/plugins/opendev-theme-plugin.js b/playbooks/zuul/gerrit/files/plugins/opendev-theme-plugin.js
new file mode 100644
index 0000000000..38742f075a
--- /dev/null
+++ b/playbooks/zuul/gerrit/files/plugins/opendev-theme-plugin.js
@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright (C) 2021 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+const openDevThemeStyle = document.createElement('dom-module');
+openDevThemeStyle.innerHTML = `
+      <template>
+        <style>
+          html {
+            --header-title-content: "OpenDev";
+            --header-icon: url("/static/opendev-sm.png");
+            --header-background-color: var(--background-color-primary);
+            --header-icon-size: 1.2em;
+            --header-border-bottom: 1px solid;
+            --header-border-image: linear-gradient(to right, #ee265e,  #f9b8cb, #ee265e) 1;
+          }
+        </style>
+      </template>
+`;
+openDevThemeStyle.register('opendev-site-theme');
+
+Gerrit.install(plugin => {
+    plugin.registerStyleModule('app-theme', 'opendev-site-theme');
+});
diff --git a/playbooks/zuul/gerrit/files/plugins/opendevtheme.html b/playbooks/zuul/gerrit/files/plugins/opendevtheme.html
deleted file mode 100644
index 2ffa829412..0000000000
--- a/playbooks/zuul/gerrit/files/plugins/opendevtheme.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!--
-Copyright (C) 2019 The Android Open Source Project
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<dom-module id="opendev-styles">
-  <script>
-    if (window.Polymer) {
-      Gerrit.install((plugin) => {
-        if (window.localStorage.getItem('dark-theme')) {
-          plugin.registerStyleModule('app-theme', 'opendev-dark-style');
-        } else {
-          plugin.registerStyleModule('app-theme', 'opendev-light-style');
-        }
-        plugin.registerStyleModule('app-theme', 'opendev-common-style');
-      });
-    }
-  </script>
-</dom-module>
-
-<dom-module id="opendev-light-style">
-  <template>
-    <style>
-      html {
-        --header-background: white;
-        --header-text-color: #001133;
-      }
-    </style>
-  </template>
-</dom-module>
-
-<dom-module id="opendev-dark-style">
-  <template>
-    <style>
-      html {
-        --header-background: #3b3d3f;
-        --header-text-color: #e8eaed;
-      }
-    </style>
-  </template>
-</dom-module>
-
-<dom-module id="opendev-common-style">
-  <template>
-    <style>
-      html {
-        --header-title-content: "opendev";
-        --header-icon: url("/static/opendev-sm.png");
-        --header-icon-size: 1.2em;
-
-        --border-width: 0 0 3px 0;
-        --border-style: solid;
-        --box-shadow: 0 3px 3px 2px rgba(0,0,0,0.075), 0 0 2px rgba(0,0,0,0.2);
-        --header-border-bottom: 4px solid;
-        --header-border-image: linear-gradient(to right, #ed1944 15%, #ed1944 15%, #ed1944 85%, #ed1944 85%) 1;
-      }
-    </style>
-  </template>
-</dom-module>
diff --git a/playbooks/zuul/gerrit/run.yaml b/playbooks/zuul/gerrit/run.yaml
index c6fe55f3d3..0dd1e081fb 100644
--- a/playbooks/zuul/gerrit/run.yaml
+++ b/playbooks/zuul/gerrit/run.yaml
@@ -53,7 +53,7 @@
             - static/robots.txt
             - static/system-cla.html
             - static/usg-cla.html
-            - plugins/opendevtheme.html
+            - plugins/opendev-theme-plugin.js
 
     - name: Build docker image
       include_role: