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
diff --git a/polygerrit-ui/app/elements/gr-app.html b/polygerrit-ui/app/elements/gr-app.html index d7d50d1..de62646 100644 --- a/polygerrit-ui/app/elements/gr-app.html +++ b/polygerrit-ui/app/elements/gr-app.html
@@ -34,8 +34,8 @@ <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">
diff --git a/polygerrit-ui/app/elements/gr-app.js b/polygerrit-ui/app/elements/gr-app.js index b866088..921415f 100644 --- a/polygerrit-ui/app/elements/gr-app.js +++ b/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();
diff --git a/polygerrit-ui/app/embed/embed.html b/polygerrit-ui/app/embed/embed.html index f3c727e..9fb5c23 100644 --- a/polygerrit-ui/app/embed/embed.html +++ b/polygerrit-ui/app/embed/embed.html
@@ -21,4 +21,4 @@ <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">
diff --git a/polygerrit-ui/app/rules.bzl b/polygerrit-ui/app/rules.bzl index b60aa22..199a947 100644 --- a/polygerrit-ui/app/rules.bzl +++ b/polygerrit-ui/app/rules.bzl
@@ -62,6 +62,15 @@ ) 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 = [ "favicon.ico", @@ -73,6 +82,7 @@ srcs = [ name + "_app_sources", name + "_css_sources", + name + "_theme_sources", name + "_top_sources", "//lib/fonts:robotofonts", "//lib/js:highlightjs_files", @@ -82,11 +92,12 @@ ], 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",
diff --git a/polygerrit-ui/app/styles/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html similarity index 100% rename from polygerrit-ui/app/styles/app-theme.html rename to polygerrit-ui/app/styles/themes/app-theme.html
diff --git a/polygerrit-ui/app/styles/themes/dark-theme.html b/polygerrit-ui/app/styles/themes/dark-theme.html new file mode 100644 index 0000000..1f473da --- /dev/null +++ b/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> \ No newline at end of file