feat(theme): add support for Dark Mode and Custom Theme (#283)

README.md

@@ -114,9 +114,28 @@ Some env options are available for use this interface for **only one server**.
 - `SHOW_CATALOG_NB_TAGS`: Show number of tags per images on catalog page. This will produce + nb images requests, not recommended on large registries. (default: `false`).
 - `HISTORY_CUSTOM_LABELS`: Expose custom labels in history page, custom labels will be processed like maintainer label.
 - `USE_CONTROL_CACHE_HEADER`: Use `Control-Cache` header and set to `no-store, no-cache`. This will avoid some issues on multi-arch images (see [#260](https://github.com/Joxit/docker-registry-ui/issues/260)). This option requires registry configuration: `Access-Control-Allow-Headers` with `Cache-Control`. (default: `false`).
+- `THEME`: Chose your default theme, could be `dark`, `light` or `auto`. (default: `auto`). Since 2.4.0
+- `THEME_*`: See table in [Theme options](#theme-options) section. Since 2.4.0
 
 There are some examples with [docker-compose](https://docs.docker.com/compose/) and docker-registry-ui as proxy [here](https://github.com/Joxit/docker-registry-ui/tree/main/examples/ui-as-proxy/) or docker-registry-ui as standalone [here](https://github.com/Joxit/docker-registry-ui/tree/main/examples/ui-as-standalone/).
 
+### Theme options
+
+This featureswas added to version 2.4.0. See more about this in [#283](https://github.com/Joxit/docker-registry-ui/pull/283).
+
+| Environment variable | light theme value | dark theme value |
+| --- | --- | --- |
+| `THEME_PRIMARY_TEXT` | `#25313b` | `#8A9EBA` |
+| `THEME_NEUTRAL_TEXT` | `#777777` | `#36527A` |
+| `THEME_BACKGROUND` | `#ffffff` | `#22272e` |
+| `THEME_HOVER_BACKGROUND` | `#eeeeee` | `#30404D` |
+| `THEME_ACCENT_TEXT` | `#6680a1` | `#5684FF` |
+| `THEME_HEADER_TEXT` | `#ffffff` | `#ffffff` |
+| `THEME_HEADER_BACKGROUND` | `#25313b` | `#333A45` |
+| `THEME_FOOTER_TEXT` | `#ffffff` | `#ffffff` |
+| `THEME_FOOTER_NEUTRAL_TEXT` | `#999999` | `#999999` |
+| `THEME_FOOTER_BACKGROUND` | `#555555` | `#555555` |
+
 ## Using CORS
 
 Your server should be configured to accept CORS.

bin/90-docker-registry-ui.sh

@@ -12,6 +12,10 @@ sed -i "s~\${SHOW_CATALOG_NB_TAGS}~${SHOW_CATALOG_NB_TAGS}~" index.html
 sed -i "s~\${HISTORY_CUSTOM_LABELS}~${HISTORY_CUSTOM_LABELS}~" index.html
 sed -i "s~\${USE_CONTROL_CACHE_HEADER}~${USE_CONTROL_CACHE_HEADER}~" index.html
 
+grep -o 'THEME[A-Z_]*' index.html | while read e; do
+  sed -i "s~\${$e}~$(printenv $e)~" index.html
+done
+
 if [ -z "${DELETE_IMAGES}" ] || [ "${DELETE_IMAGES}" = false ] ; then
   sed -i "s/\${DELETE_IMAGES}/false/" index.html
 else

dist/index.html

@@ -26,4 +26,15 @@
       show-catalog-nb-tags="${SHOW_CATALOG_NB_TAGS}"
       history-custom-labels="${HISTORY_CUSTOM_LABELS}"
       use-control-cache-header="${USE_CONTROL_CACHE_HEADER}"
+      theme="${THEME}"
+      theme-primary-text="${THEME_PRIMARY_TEXT}"
+      theme-neutral-text="${THEME_NEUTRAL_TEXT}"
+      theme-background="${THEME_BACKGROUND}"
+      theme-hover-background="${THEME_HOVER_BACKGROUND}"
+      theme-accent-text="${THEME_ACCENT_TEXT}"
+      theme-header-text="${THEME_HEADER_TEXT}"
+      theme-header-background="${THEME_HEADER_BACKGROUND}"
+      theme-footer-text="${THEME_FOOTER_TEXT}"
+      theme-footer-neutra-text="${THEME_FOOTER_NEUTRAL_TEXT}"
+      theme-footer-background="${THEME_FOOTER_BACKGROUND}"
     ></docker-registry-ui><script src="docker-registry-ui.js"></script></body></html>

package.json

@@ -29,6 +29,7 @@
     "@rollup/plugin-html": "^1.0.1",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.2.1",
     "core-js": "^3.27.1",
     "node-sass": "^8.0.0",
     "prettier": "^2.8.1",
@@ -39,7 +40,6 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-riot": "^6.0.0",
     "rollup-plugin-scss": "^4.0.0",
-    "rollup-plugin-serve": "^2.0.2",
-    "@rollup/plugin-terser": "^0.2.1"
+    "rollup-plugin-serve": "^2.0.2"
   }
 }

rollup.config.js

@@ -13,13 +13,15 @@ import copy from 'rollup-plugin-copy';
 import copyTransform from './rollup/copy-transform.js';
 import license from './rollup/license.js';
 import checkOutput from './rollup/check-output.js';
+import importSVG from './rollup/import-svg.js';
 
 const useServe = process.env.ROLLUP_SERVE === 'true';
 const output = useServe ? '.serve' : 'dist';
 
 const plugins = [
   riot(),
   json(),
+  importSVG(),
   nodeResolve(),
   commonjs(),
   scss({ fileName: `docker-registry-ui.css`, outputStyle: 'compressed' }),

rollup/import-svg.js

@@ -0,0 +1,28 @@
+import { extname } from 'path';
+
+const injectNode = (svg) => `
+export default function() {
+  return (new DOMParser().parseFromString(${svg}, 'image/svg+xml'));
+};
+`;
+
+/**
+ * @param options
+ * @param options.include
+ * @param options.exclude
+ * @param options.stringify - if true returns String, otherwise returns DOM Node
+ */
+export default function () {
+  return {
+    name: 'import-svg',
+    transform: (code, id) => {
+      if (extname(id) !== '.svg') return null;
+      const content = JSON.stringify(code);
+
+      return {
+        code: injectNode(content),
+        map: { mappings: '' },
+      };
+    },
+  };
+}

src/components/dialogs/add-registry-url.riot

@@ -18,14 +18,33 @@
   <material-popup opened="{ props.opened }" onClick="{ props.onClose }">
     <div class="material-popup-title">Add your Server ?</div>
     <div class="material-popup-content">
-      <material-input onkeyup="{ onKeyUp }" label="Server URL" label-color="#666" valid="{ registryUrlValidator }"></material-input>
+      <material-input
+        onkeyup="{ onKeyUp }"
+        label="Server URL"
+        text-color="var(--primary-text)"
+        label-color="var(--neutral-text)"
+        color="var(--accent-text)"
+        valid="{ registryUrlValidator }"
+      ></material-input>
       <span>Write your URL without /v2</span>
     </div>
     <div class="material-popup-action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ add }" color="#000" inverted>
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ add }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Add
       </material-button>
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ props.onClose }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Cancel
       </material-button>
     </div>
@@ -56,8 +75,8 @@
         setTimeout(() => router.updateUrlQueryParam(url), 100);
       },
       registryUrlValidator(input) {
-        return /^https?:\/\//.test(input) && !/\/v2\/?$/.test(input)
-      }
+        return /^https?:\/\//.test(input) && !/\/v2\/?$/.test(input);
+      },
     };
   </script>
 </add-registry-url>

src/components/dialogs/change-registry-url.riot

@@ -23,10 +23,22 @@
       </select>
     </div>
     <div class="material-popup-action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ change }" color="#000" inverted>
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ change }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Change
       </material-button>
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ props.onClose }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Cancel
       </material-button>
     </div>
@@ -65,11 +77,15 @@
       font-size: 1em;
       line-height: 24px;
       height: 24px;
-      border-bottom: 1px solid #2f6975;
+      border-bottom: 1px solid var(--accent-text);
       appearance: none;
       -moz-appearance: none;
       -webkit-appearance: none;
       margin: 1.5em 0;
+      color: var(--primary-text);
+    }
+    :host select option {
+      background-color: var(--background);
     }
   </style>
 </change-registry-url>

src/components/dialogs/confirm-delete-image.riot

@@ -23,10 +23,22 @@
       </ul>
     </div>
     <div class="material-popup-action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ deleteImages }" color="#000" inverted>
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ deleteImages }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Delete
       </material-button>
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClick }" color="#000" inverted>
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ props.onClick }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Cancel
       </material-button>
     </div>

src/components/dialogs/dialogs-menu.riot

@@ -41,8 +41,8 @@
       waves-center="true"
       waves-opacity="0.6"
       waves-duration="600"
-      color="rgba(0,0,0,0)"
-      text-color="#fff"
+      color="var(--header-background)"
+      text-color="var(--header-text)"
       icon
     >
       <i class="material-icons">more_vert</i>
@@ -105,10 +105,19 @@
   </script>
   <style>
     :host > .material-dropdown-wrapper {
-      color: #000;
+      color: var(--primary-text);
       list-style-type: disc;
       margin-block-start: 0.7em;
     }
+    material-dropdown .material-dropdown-container,
+    material-dropdown .material-dropdown-container .material-dropdown-item {
+      background-color: var(--background);
+      color: var(--primary-text);
+    }
+
+    material-dropdown .material-dropdown-container .material-dropdown-item:hover {
+      background-color: rgba(0, 0, 0, 0.12);
+    }
 
     :host .material-dropdown-wrapper material-dropdown .material-dropdown-container {
       right: 0;

src/components/dialogs/remove-registry-url.riot

@@ -24,9 +24,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <material-button
               onClick="{ remove(url) }"
               url="{ url }"
-              waves-color="rgba(158,158,158,.4)"
+              text-color="var(--neutral-text)"
+              color="inherit"
+              waves-color="var(--hover-background)"
               waves-center="true"
-              inverted
               icon
             >
               <i class="material-icons">delete</i>
@@ -37,7 +38,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </ul>
     </div>
     <div class="material-popup-action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
+      <material-button
+        class="dialog-button"
+        waves-color="rgba(158,158,158,.4)"
+        onClick="{ props.onClose }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Close
       </material-button>
     </div>
@@ -47,10 +54,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     export default {
       remove(url) {
         return (event) => {
-          console.log(url, event)
           removeRegistryServers(url);
           setTimeout(() => this.update(), 100);
-        }
+        };
       },
       getRegistryServers,
     };
@@ -59,9 +65,5 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     :host material-popup .popup material-button {
       margin-right: 1em;
     }
-
-    :host material-popup .popup material-button .content i.material-icons {
-      color: #777;
-    }
   </style>
 </remove-registry-url>