Add and build Gerrit dark theme

This change reworks the way themes are built in Gerrit. It:
- Moves themes (so far, just app-theme and dark-theme) to a subdirectory
  of app/styles for organizational purposes.
- Explicitly includes this directory in the PolyGerrit bundling process.
- Enables gr-app to (lazily) load dark-theme.html if it recognizes the
  'dark-theme' key in localStorage.

Upon merge/deployment of this change, users may dogfood the dark theme
by setting the key 'dark-theme' in localStorage.

Change-Id: Id7449e0bdd4f12a9f1e44de6b83003fdb253a0b0

polygerrit-ui/app/elements/gr-app.html

@@ -34,8 +34,8 @@ limitations under the License.
 
 <link rel="import" href="../behaviors/base-url-behavior/base-url-behavior.html">
 <link rel="import" href="../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.html">
-<link rel="import" href="../styles/app-theme.html">
 <link rel="import" href="../styles/shared-styles.html">
+<link rel="import" href="../styles/themes/app-theme.html">
 <link rel="import" href="./admin/gr-admin-view/gr-admin-view.html">
 <link rel="import" href="./change-list/gr-change-list-view/gr-change-list-view.html">
 <link rel="import" href="./change-list/gr-dashboard-view/gr-dashboard-view.html">

polygerrit-ui/app/elements/gr-app.js

@@ -127,6 +127,10 @@
         this._version = version;
       });
 
+      if (window.localStorage.getItem('dark-theme')) {
+        this.importHref('../styles/themes/dark-theme.html');
+      }
+
       // Note: this is evaluated here to ensure that it only happens after the
       // router has been initialized. @see Issue 7837
       this._settingsUrl = Gerrit.Nav.getUrlForSettings();

polygerrit-ui/app/embed/embed.html

@@ -21,4 +21,4 @@ limitations under the License.
 <link rel="import" href="../elements/change-list/gr-change-list-view/gr-change-list-view.html">
 <link rel="import" href="../elements/change-list/gr-change-list/gr-change-list.html">
 <link rel="import" href="../elements/change-list/gr-dashboard-view/gr-dashboard-view.html">
-<link rel="import" href="../styles/app-theme.html">
+<link rel="import" href="../styles/themes/app-theme.html">

polygerrit-ui/app/rules.bzl

@@ -61,6 +61,15 @@ def polygerrit_bundle(name, srcs, outs, app):
     srcs = native.glob(["styles/**/*.css"]),
   )
 
+  native.filegroup(
+    name = name + "_theme_sources",
+    srcs = native.glob(
+      ["styles/themes/*.html"],
+      # app-theme.html already included via an import in gr-app.html.
+      exclude = ["styles/themes/app-theme.html"],
+    ),
+  )
+
   native.filegroup(
     name = name + "_top_sources",
     srcs = [
@@ -73,6 +82,7 @@ def polygerrit_bundle(name, srcs, outs, app):
     srcs = [
       name + "_app_sources",
       name + "_css_sources",
+      name + "_theme_sources",
       name + "_top_sources",
       "//lib/fonts:robotofonts",
       "//lib/js:highlightjs_files",
@@ -82,11 +92,12 @@ def polygerrit_bundle(name, srcs, outs, app):
     ],
     outs = outs,
     cmd = " && ".join([
-      "mkdir -p $$TMP/polygerrit_ui/{styles,fonts,bower_components/{highlightjs,webcomponentsjs},elements}",
+      "mkdir -p $$TMP/polygerrit_ui/{styles/themes,fonts,bower_components/{highlightjs,webcomponentsjs},elements}",
       "for f in $(locations " + name + "_app_sources); do ext=$${f##*.}; cp -p $$f $$TMP/polygerrit_ui/elements/"  + appName + ".$$ext; done",
       "cp $(locations //lib/fonts:robotofonts) $$TMP/polygerrit_ui/fonts/",
       "for f in $(locations " + name + "_top_sources); do cp $$f $$TMP/polygerrit_ui/; done",
       "for f in $(locations "+ name + "_css_sources); do cp $$f $$TMP/polygerrit_ui/styles; done",
+      "for f in $(locations "+ name + "_theme_sources); do cp $$f $$TMP/polygerrit_ui/styles/themes; done",
       "for f in $(locations //lib/js:highlightjs_files); do cp $$f $$TMP/polygerrit_ui/bower_components/highlightjs/ ; done",
       "unzip -qd $$TMP/polygerrit_ui/bower_components $(location @webcomponentsjs//:zipfile) webcomponentsjs/webcomponents-lite.js",
       "cd $$TMP",

polygerrit-ui/app/styles/themes/dark-theme.html

@@ -0,0 +1,83 @@
+<dom-module id="dark-theme">
+  <style is="custom-style">
+    html {
+      --primary-text-color: #e2e2e2;
+      --view-background-color: #212121;
+      --border-color: #555555;
+      --table-header-background-color: #353637;
+      --table-subheader-background-color: rgb(23, 27, 31);
+      --header-background-color: #5487E5;
+      --header-text-color: var(--primary-text-color);
+      --deemphasized-text-color: #9a9a9a;
+      --footer-background-color: var(--table-header-background-color);
+      --expanded-background-color: #26282b;
+      --link-color: #5487E5;
+      --primary-button-background-color: var(--link-color);
+      --primary-button-text-color: var(--primary-text-color);
+      --secondary-button-background-color: var(--primary-text-color);
+      --secondary-button-text-color: var(--deemphasized-text-color);
+      --default-button-text-color: var(--link-color);
+      --default-button-background-color: var(--table-subheader-background-color);
+      --dropdown-background-color: var(--table-header-background-color);
+      --dialog-background-color: var(--view-background-color);
+      --chip-background-color: var(--table-header-background-color);
+
+      --select-background-color: var(--table-subheader-background-color);
+
+      --assignee-highlight-color: rgb(58, 54, 28);
+
+      --diff-selection-background-color: #3A71D8;
+      --light-remove-highlight-color: rgb(53, 27, 27);
+      --light-add-highlight-color: rgb(24, 45, 24);
+      --light-rebased-remove-highlight-color: rgb(60, 37, 8);
+      --light-rebased-add-highlight-color: rgb(72, 113, 101);
+      --dark-remove-highlight-color: rgba(255, 0, 0, 0.15);
+      --dark-add-highlight-color: rgba(0, 255, 0, 0.15);
+      --dark-rebased-remove-highlight-color: rgba(255, 139, 6, 0.15);
+      --dark-rebased-add-highlight-color: rgba(11, 255, 155, 0.15);
+      --diff-context-control-color: var(--table-header-background-color);
+      --diff-context-control-border-color: var(--border-color);
+      --diff-highlight-range-color: rgba(0, 100, 200, 0.5);
+      --diff-highlight-range-hover-color: rgba(0, 150, 255, 0.5);
+      --comment-text-color: var(--primary-text-color);
+      --comment-background-color: #0B162B;
+      --unresolved-comment-background-color: rgb(56, 90, 154);
+
+      --vote-color-approved: rgb(127, 182, 107);
+      --vote-color-recommended: rgb(63, 103, 50);
+      --vote-color-rejected: #ac2d3e;
+      --vote-color-disliked: #bf6874;
+      --vote-color-neutral: #597280;
+
+      --edit-mode-background-color: rgb(92, 10, 54);
+      --emphasis-color: #383f4a;
+
+      --tooltip-background-color: #111;
+
+      --syntax-default-color: var(--primary-text-color);
+      --syntax-meta-color: #6D7EEE;
+      --syntax-keyword-color: #CD4CF0;
+      --syntax-number-color: #00998A;
+      --syntax-selector-class-color: #FFCB68;
+      --syntax-variable-color: #F77669;
+      --syntax-template-variable-color: #F77669;
+      --syntax-comment-color: var(--deemphasized-text-color);
+      --syntax-string-color: #C3E88D;
+      --syntax-selector-id-color: #F77669;
+      --syntax-built_in-color: rgb(247, 195, 105);
+      --syntax-tag-color: #F77669;
+      --syntax-link-color: #C792EA;
+      --syntax-meta-keyword-color: #EEFFF7;
+      --syntax-type-color: #DD5F5F;
+      --syntax-title-color: #75A5FF;
+      --syntax-attr-color: #80CBBF;
+      --syntax-literal-color: #EEFFF7;
+      --syntax-selector-pseudo-color: #C792EA;
+      --syntax-regexp-color: #F77669;
+      --syntax-selector-attr-color: #80CBBF;
+      --syntax-template-tag-color: #C792EA;
+
+      background-color: var(--view-background-color);
+    }
+  </style>
+</dom-module>