From 0d91a566adff52f1bbe1fd1ffb59e4e05a17acb2 Mon Sep 17 00:00:00 2001
From: Tao Zhou <taoalpha@google.com>
Date: Wed, 18 Mar 2020 13:08:31 +0100
Subject: [PATCH] Add a theme plugin example

Change-Id: Id046ad6b5eb384dd918b83f042b8bd99f2cd0be4
---
 polygerrit-ui/app/samples/theme-plugin.js | 49 +++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 polygerrit-ui/app/samples/theme-plugin.js

diff --git a/polygerrit-ui/app/samples/theme-plugin.js b/polygerrit-ui/app/samples/theme-plugin.js
new file mode 100644
index 0000000000..f3a8931b26
--- /dev/null
+++ b/polygerrit-ui/app/samples/theme-plugin.js
@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright (C) 2020 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.
+ */
+const customTheme = document.createElement('dom-module');
+customTheme.id = 'theme-plugin';
+customTheme.innerHTML = `
+  <template>
+    <style>
+    html {
+      --primary-text-color: red;
+    }
+    </style>
+  </template>
+`;
+
+const darkCustomTheme = document.createElement('dom-module');
+darkCustomTheme.id = 'dark-theme-plugin';
+darkCustomTheme.innerHTML = `
+  <template>
+    <style>
+    html {
+      --background-color-primary: yellow;
+    }
+    </style>
+  </template>
+`;
+
+/**
+ * This plugin will change the primary text color to red.
+ *
+ * Also change the primary background color to yellow for dark theme.
+ */
+Gerrit.install(plugin => {
+  plugin.registerStyleModule('app-theme', 'theme-plugin');
+  plugin.registerStyleModule('app-theme-dark', 'dark-theme-plugin');
+});
\ No newline at end of file