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

2026-07-10 08:29:17 +00:00 · 2023-01-24 00:20:50 +01:00
parent 0a6d08bfdd c9b2415d1e
commit 347e201f79
27 changed files with 322 additions and 131 deletions
--- a/README.md
+++ b/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.
--- a/bin/90-docker-registry-ui.sh
+++ b/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
--- a/dist/images/docker-logo.svg
+++ b/dist/images/docker-logo.svg
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg2" x="0px" y="0px" viewBox="-5.724 -43.601 730 600" fill="#777"> <path d="m595.942,422.343 c -7.543,0.119 -13.562,6.331 -13.443,13.875 0.119,7.544 6.332,13.562 13.875,13.443 7.495,-0.118 13.494,-6.254 13.445,-13.75 -0.085,-7.578 -6.297,-13.652 -13.875,-13.568 0,0 -10e-4,0 0,0 m 0,24.398 c -5.975,0.272 -11.039,-4.352 -11.311,-10.326 -0.271,-5.976 4.352,-11.04 10.327,-11.312 5.975,-0.271 11.039,4.352 11.311,10.327 0.01,0.19 0.013,0.382 0.011,0.573 0.204,5.723 -4.27,10.527 -9.992,10.731 -0.115,0.005 -0.23,0.007 -0.346,0.007"/> <path d="m599.081,436.342 v -0.185 c 1.512,-0.292 2.65,-1.544 2.8,-3.076 0.057,-1.175 -0.432,-2.311 -1.323,-3.077 -1.445,-0.765 -3.076,-1.106 -4.707,-0.984 -1.743,-0.024 -3.484,0.12 -5.2,0.431 v 13.538 h 3.077 v -5.446 h 1.477 c 1.754,0 2.554,0.646 2.83,2.154 0.184,1.143 0.536,2.252 1.047,3.292 h 3.415 c -0.53,-1.062 -0.873,-2.207 -1.016,-3.385 -0.138,-1.473 -1.088,-2.744 -2.462,-3.292 m -3.723,-0.985 h -1.508 v -3.908 c 0.583,-0.069 1.172,-0.069 1.754,0 1.97,0 2.893,0.831 2.893,2.062 0,1.231 -1.415,2 -3.076,2"/> <path d="M707.494,193.557c-1.938-1.539-20.029-15.199-58.181-15.199c-10.074,0.044-20.127,0.908-30.061,2.584 c-7.384-50.612-49.228-75.288-51.104-76.395l-10.245-5.908l-6.738,9.723c-8.438,13.061-14.598,27.459-18.214,42.582 c-6.831,28.891-2.677,56.027,11.999,79.226c-17.722,9.876-46.151,12.307-51.904,12.522H22.367 c-12.294,0.017-22.27,9.952-22.337,22.245c-0.549,41.234,6.437,82.222,20.614,120.946c16.214,42.521,40.336,73.842,71.719,93.01 c35.167,21.537,92.302,33.844,157.067,33.844c29.258,0.092,58.461-2.556,87.226-7.907c39.986-7.342,78.463-21.318,113.839-41.352 c29.149-16.88,55.383-38.354,77.688-63.596c37.29-42.213,59.505-89.226,76.026-131.007c2.215,0,4.431,0,6.584,0 c40.828,0,65.935-16.338,79.78-30.029c9.201-8.732,16.384-19.369,21.045-31.167l2.923-8.553L707.494,193.557z"/> <path d="M65.995,228.909h63.073c3.042,0,5.507-2.466,5.507-5.507l0,0V167.22c0.017-3.042-2.435-5.521-5.476-5.538 c-0.01,0-0.021,0-0.031,0H65.995c-3.042,0-5.507,2.466-5.507,5.507c0,0.01,0,0.021,0,0.031v56.181 C60.488,226.443,62.953,228.909,65.995,228.909L65.995,228.909"/> <path d="M152.913,228.909h63.073c3.042,0,5.507-2.466,5.507-5.507l0,0V167.22c0.017-3.042-2.435-5.521-5.477-5.538 c-0.01,0-0.021,0-0.031,0h-63.073c-3.059,0-5.538,2.479-5.538,5.538v56.181C147.392,226.448,149.866,228.909,152.913,228.909"/> <path d="M241.153,228.909h63.073c3.042,0,5.507-2.466,5.507-5.507l0,0V167.22c0.017-3.042-2.435-5.521-5.477-5.538 c-0.01,0-0.021,0-0.031,0h-63.073c-3.042,0-5.507,2.466-5.507,5.507c0,0.01,0,0.021,0,0.031v56.181 C235.646,226.443,238.112,228.909,241.153,228.909L241.153,228.909"/> <path d="M328.348,228.909h63.073c3.047,0,5.521-2.46,5.538-5.507V167.22c0-3.059-2.479-5.538-5.538-5.538l0,0h-63.073 c-3.042,0-5.507,2.466-5.507,5.507c0,0.01,0,0.021,0,0.031v56.181C322.841,226.443,325.307,228.909,328.348,228.909L328.348,228.909"/> <path d="M152.913,148.083h63.073c3.046-0.017,5.507-2.492,5.507-5.538V86.364c0-3.042-2.466-5.507-5.507-5.507l0,0h-63.073 c-3.046,0-5.521,2.46-5.538,5.507v56.181C147.392,145.597,149.861,148.066,152.913,148.083"/> <path d="M241.153,148.083h63.073c3.046-0.017,5.507-2.492,5.507-5.538V86.364c0-3.042-2.466-5.507-5.507-5.507l0,0h-63.073 c-3.042,0-5.507,2.466-5.507,5.507l0,0v56.181C235.646,145.591,238.107,148.066,241.153,148.083"/> <path d="M328.348,148.083h63.073c3.052-0.017,5.521-2.486,5.538-5.538V86.364c-0.017-3.047-2.491-5.507-5.538-5.507h-63.073 c-3.042,0-5.507,2.466-5.507,5.507l0,0v56.181C322.841,145.591,325.302,148.066,328.348,148.083"/> <path d="M328.348,67.227h63.073c3.047,0,5.521-2.461,5.538-5.507V5.507C396.942,2.46,394.468,0,391.421,0h-63.073 c-3.042,0-5.507,2.465-5.507,5.507l0,0v56.212C322.841,64.761,325.307,67.227,328.348,67.227"/> <path d="M416.312,228.909h63.073c3.047,0,5.521-2.46,5.538-5.507V167.22c0-3.059-2.479-5.538-5.538-5.538l0,0h-63.073 c-3.041,0-5.507,2.466-5.507,5.507c0,0.01,0,0.021,0,0.031v56.181C410.805,226.443,413.271,228.909,416.312,228.909"/> </svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 730 730" fill="var(--neutral-text)"> <path d="M603.672 530.973c-7.543.12-13.562 6.331-13.443 13.875.119 7.544 6.332 13.562 13.875 13.443 7.495-.118 13.494-6.254 13.445-13.75-.085-7.578-6.297-13.652-13.875-13.568 0 0-.001 0 0 0m0 24.398c-5.975.272-11.04-4.352-11.311-10.326-.271-5.976 4.352-11.04 10.327-11.312 5.975-.27 11.039 4.352 11.31 10.327.01.19.014.382.012.573.204 5.723-4.27 10.527-9.992 10.731-.115.005-.23.007-.346.007"/> <path d="M606.81 544.972v-.185a3.476 3.476 0 002.8-3.076 3.815 3.815 0 00-1.322-3.077 8.675 8.675 0 00-4.707-.984 27.066 27.066 0 00-5.2.431v13.538h3.077v-5.446h1.477c1.754 0 2.554.646 2.83 2.154a11.667 11.667 0 001.047 3.292h3.415a10.381 10.381 0 01-1.016-3.385 3.938 3.938 0 00-2.462-3.292m-3.723-.985h-1.508v-3.908a7.457 7.457 0 011.754 0c1.97 0 2.893.831 2.893 2.062 0 1.231-1.415 2-3.076 2m112.135-241.924c-1.938-1.539-20.03-15.199-58.181-15.199a185.562 185.562 0 00-30.061 2.584c-7.384-50.612-49.228-75.288-51.104-76.395l-10.245-5.908-6.738 9.723a137.318 137.318 0 00-18.214 42.582c-6.831 28.891-2.677 56.027 11.999 79.226-17.722 9.876-46.151 12.307-51.904 12.522H30.096c-12.293.017-22.27 9.952-22.336 22.245a338.69 338.69 0 0020.614 120.946c16.214 42.521 40.336 73.842 71.719 93.01 35.167 21.537 92.302 33.844 157.067 33.844a468.88 468.88 0 0087.226-7.907 364.649 364.649 0 00113.839-41.352 312.969 312.969 0 0077.688-63.596c37.29-42.213 59.505-89.226 76.026-131.007h6.584c40.828 0 65.935-16.338 79.78-30.029a87.08 87.08 0 0021.045-31.167l2.923-8.553z"/> <path d="M73.725 337.54h63.073a5.507 5.507 0 005.507-5.508V275.85a5.507 5.507 0 00-5.476-5.538H73.725a5.507 5.507 0 00-5.507 5.507v56.212a5.507 5.507 0 005.507 5.508m86.918.001h63.073a5.507 5.507 0 005.507-5.508V275.85a5.507 5.507 0 00-5.477-5.538h-63.104a5.537 5.537 0 00-5.538 5.538v56.181a5.54 5.54 0 005.539 5.508m88.24.001h63.073a5.507 5.507 0 005.507-5.508V275.85a5.507 5.507 0 00-5.477-5.538h-63.104a5.507 5.507 0 00-5.507 5.507v56.212a5.51 5.51 0 005.508 5.508m87.195.001h63.073a5.537 5.537 0 005.538-5.508V275.85a5.537 5.537 0 00-5.538-5.538h-63.073a5.507 5.507 0 00-5.507 5.507v56.212a5.508 5.508 0 005.507 5.508m-175.435-80.826h63.073a5.539 5.539 0 005.507-5.538v-56.18a5.507 5.507 0 00-5.507-5.508h-63.073a5.538 5.538 0 00-5.538 5.507v56.181a5.568 5.568 0 005.538 5.538m88.24 0h63.073a5.539 5.539 0 005.507-5.538v-56.18a5.507 5.507 0 00-5.507-5.508h-63.073a5.507 5.507 0 00-5.507 5.507v56.181a5.539 5.539 0 005.507 5.538m87.195 0h63.073a5.568 5.568 0 005.538-5.538v-56.18a5.537 5.537 0 00-5.538-5.508h-63.073a5.507 5.507 0 00-5.507 5.507v56.181a5.539 5.539 0 005.507 5.538m0-80.856h63.073a5.538 5.538 0 005.538-5.507v-56.213a5.537 5.537 0 00-5.538-5.507h-63.073a5.506 5.506 0 00-5.507 5.507v56.212a5.508 5.508 0 005.507 5.508m87.964 161.683h63.073a5.537 5.537 0 005.538-5.508V275.85a5.537 5.537 0 00-5.538-5.538h-63.073a5.508 5.508 0 00-5.507 5.507v56.212a5.508 5.508 0 005.507 5.508"/> </svg>
--- a/dist/index.html
+++ b/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>
--- a/package.json
+++ b/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"
  }
 }
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -13,6 +13,7 @@ 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';
@@ -20,6 +21,7 @@ const output = useServe ? '.serve' : 'dist';
 const plugins = [
  riot(),
  json(),
+  importSVG(),
  nodeResolve(),
  commonjs(),
  scss({ fileName: `docker-registry-ui.css`, outputStyle: 'compressed' }),
--- a/rollup/import-svg.js
+++ b/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: '' },
+      };
+    },
+  };
+}
--- a/src/components/dialogs/add-registry-url.riot
+++ b/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>
--- a/src/components/dialogs/change-registry-url.riot
+++ b/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>
--- a/src/components/dialogs/confirm-delete-image.riot
+++ b/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>
--- a/src/components/dialogs/dialogs-menu.riot
+++ b/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;
--- a/src/components/dialogs/remove-registry-url.riot
+++ b/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>
--- a/src/components/docker-registry-ui.riot
+++ b/src/components/docker-registry-ui.riot
@@ -41,7 +41,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
          filter-results="{ state.filter }"
          on-authentication="{ onAuthentication }"
          show-catalog-nb-tags="{ truthy(props.showCatalogNbTags) }"
-        />
+        ></catalog>
      </route>
      <route path="{baseRoute}taglist/(.*)">
        <tag-list
@@ -84,7 +84,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
  </main>
  <footer>
    <material-footer mini="true">
-      <a class="material-footer-logo" href="https://joxit.github.io/docker-registry-ui/">Docker Registry UI { version }</a>
+      <a class="material-footer-logo" href="https://joxit.github.io/docker-registry-ui/">
+        Docker Registry UI { version }
+      </a>
      <ul>
        <li>
          <a href="https://github.com/Joxit/docker-registry-ui">Contribute on GitHub</a>
@@ -105,6 +107,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
    import SearchBar from './search-bar.riot';
    import { stripHttps, getRegistryServers, setRegistryServers, truthy, stringToArray } from '../scripts/utils';
    import router from '../scripts/router';
+    import { loadTheme } from '../scripts/theme';

    export default {
      components: {
@@ -138,6 +141,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
        this.state.catalogElementsLimit = props.catalogElementsLimit || 100000;
        this.state.pullUrl = this.pullUrl(this.state.registryUrl, props.pullUrl);
        this.state.useControlCacheHeader = props.useControlCacheHeader;
+        loadTheme(props, this.root.parentNode.style);
      },
      onServerChange(registryUrl) {
        this.update({
@@ -202,10 +206,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
  <style>
    material-navbar {
      height: 64px;
+      color: var(--header-text);
+      background-color: var(--header-background);
    }
-    
+
    material-navbar .menu {
      display: flex;
    }
+
+    material-navbar .nav-wrapper .menu {
+      flex-shrink: 1;
+    }
+
+    material-footer {
+      color: var(--footer-neutral-text);
+      background-color: var(--footer-background);
+    }
+    material-footer .material-footer-logo {
+      color: var(--footer-text);
+    }
  </style>
 </docker-registry-ui>
--- a/src/components/search-bar.riot
+++ b/src/components/search-bar.riot
@@ -1,5 +1,10 @@
 <search-bar>
-  <material-input label="Search in page" text-color="#fff" label-color="#aaa"></material-input>
+  <material-input
+    label="Search in page"
+    text-color="var(--header-text)"
+    label-color="var(--neutral-text)"
+    color="var(--accent-text)"
+  ></material-input>
  <script>
    import { router } from '@riotjs/route';

@@ -40,8 +45,7 @@
  <style>
    :host material-input {
      line-height: initial;
-      max-width: 20%;
-      min-width: 13em;
+      min-width: 5em;
    }

    @media screen and (max-width: 400px) {
@@ -49,9 +53,5 @@
        display: none;
      }
    }
-
-    :host material-input input {
-      color: #fff;
-    }
  </style>
 </search-bar>
--- a/src/components/tag-history/tag-history-element.riot
+++ b/src/components/tag-history/tag-history-element.riot
@@ -16,8 +16,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <tag-history-element class="{ state.key }">
  <div class="headline">
-    <i class="material-icons">{ state.icon }</i>
-    <p>{ state.name }</p>
+    <i if="{ state.key !== 'docker_version' }" class="material-icons">{ state.icon }</i>
+    <span if="{ state.key === 'docker_version' }" id="docker_verion"></span>
+    <span>{ state.name }</span>
  </div>
  <div class="content">
    <div class="value" if="{ state.value }">{ state.value }</div>
@@ -25,6 +26,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
  </div>
  <script>
    import { getHistoryIcon } from '../../scripts/utils';
+    import dockerVersionIcon from '../../images/docker-logo.svg';
    export default {
      onBeforeStart(props, state) {
        state.key = props.entry.key;
@@ -42,6 +44,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      onBeforeUpdate(props, state) {
        this.onBeforeStart(props, state);
      },
+      onMounted(props, state) {
+        const dockerVersion = this.$('#docker_verion');
+        if (dockerVersion) {
+          dockerVersion.innerHTML = dockerVersionIcon().firstElementChild.outerHTML;
+        }
+      },
      cleanName(name) {
        if (name === 'id') {
          return name;
@@ -70,10 +78,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      padding: 0px;
    }

-    :host.docker_version .headline .material-icons {
-      background-size: 24px auto;
-      background-image: url('images/docker-logo.svg');
-      background-repeat: no-repeat;
+    :host.docker_version .headline .material-icons,
+    :host.docker_version .headline #docker_verion {
+      height: 24px;
    }

    :host {
@@ -93,12 +100,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      overflow-x: initial;
    }

-    :host .headline p {
+    :host .headline {
+      height: 24px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
      font-weight: bold;
-      line-height: 20px;
-      position: relative;
-      display: inline;
-      top: -4px;
+    }
+    :host .headline * {
+      margin-right: 6px;
    }

    :host.id div.value {
--- a/src/components/tag-history/tag-history.riot
+++ b/src/components/tag-history/tag-history.riot
@@ -18,12 +18,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
  <material-card>
    <div class="material-card-title-action">
      <material-button
-        color="#777"
+        text-color="var(--neutral-text)"
+        color="inherit"
+        waves-color="var(--hover-background)"
        waves-center="true"
        rounded="true"
-        waves-color="#ddd"
        href="{ toTaglist() }"
-        inverted
        icon
      >
        <i class="material-icons">arrow_back</i>
@@ -37,12 +37,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.

  <material-tabs
    if="{ state.archs && state.loadend }"
-    color="#25313b"
-    text-color="#fff"
+    color="var(--background)"
+    text-color="var(--primary-text)"
+    text-selected-color="var(--accent-text)"
+    line-color="var(--background)"
+    line-selected-color="var(--accent-text)"
    useLine="{ true }"
    tabs="{ state.archs }"
    onTabChanged="{ onTabChanged }"
-    inverted
  ></material-tabs>

  <material-card each="{ element in state.elements }">
--- a/src/components/tag-list/copy-to-clipboard.riot
+++ b/src/components/tag-list/copy-to-clipboard.riot
@@ -18,9 +18,9 @@
  <div class="copy-to-clipboard">
    <input style="display: none; width: 1px; height: 1px" value="{ getDockerCmd(props) }" />
    <material-button
-      color="rgba(0,0,0,0)"
-      text-color="#777"
-      waves-color="#ddd"
+      text-color="var(--neutral-text)"
+      color="inherit"
+      waves-color="var(--hover-background)"
      waves-center="true"
      onClick="{ copy }"
      title="Copy pull command."
--- a/src/components/tag-list/pagination.riot
+++ b/src/components/tag-list/pagination.riot
@@ -19,8 +19,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
    <div class="pagination-centered">
      <material-button
        aria-label="page-{ p.page }"
-        color="rgba(0, 0, 0, { p.current ? 0.12 : 0 } )"
-        text-color="#000"
+        color="{ p.current ? 'var(--accent-text)' : 'rgba(0, 0, 0, 0 )' }"
+        text-color="{ p.current ? 'var(--accent-text)' : 'var(--primary-text)' }"
        waves-color="rgba(158,158,158,.4)"
        each="{ (p, idx) in props.pages}"
        class="{ p.current ? 'current' : ''} { p['space-left'] ? 'space-left' : '' } { p['space-right'] ? 'space-right' : ''}"
@@ -45,6 +45,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
    :host material-button > :first-child {
      padding: 0;
      min-width: 40px;
+      min-height: 44px;
    }

    :host material-button > :first-child .content {
--- a/src/components/tag-list/remove-image.riot
+++ b/src/components/tag-list/remove-image.riot
@@ -16,9 +16,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <remove-image>
  <material-button
-    color="rgba(0,0,0,0)"
-    text-color="#777"
-    waves-color="#ddd"
+    text-color="var(--neutral-text)"
+    color="inherit"
+    waves-color="var(--hover-background)"
    waves-center="true"
    title="This will delete the image."
    if="{ !props.multiDelete }"
--- a/src/components/tag-list/tag-history-button.riot
+++ b/src/components/tag-list/tag-history-button.riot
@@ -17,9 +17,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <tag-history-button>
  <material-button
    title="{ buttonTittle() }"
-    color="rgba(0,0,0,0)"
-    text-color="#777"
-    waves-color="#ddd"
+    text-color="var(--neutral-text)"
+    color="inherit"
+    waves-color="var(--hover-background)"
    waves-center="true"
    href="{ routeToHistory() }"
    disabled="{ props.image.ociImage }"
--- a/src/components/tag-list/tag-list.riot
+++ b/src/components/tag-list/tag-list.riot
@@ -18,12 +18,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
  <material-card class="header">
    <div class="material-card-title-action">
      <material-button
-        color="#777"
-        waves-color="#ddd"
+        text-color="var(--neutral-text)"
+        color="inherit"
+        waves-color="var(--hover-background)"
        waves-center="true"
        href="{ router.home() }"
        icon
-        inverted
      >
        <i class="material-icons">arrow_back</i>
      </material-button>
--- a/src/components/tag-list/tag-table.riot
+++ b/src/components/tag-list/tag-table.riot
@@ -65,9 +65,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
            <material-button
              if="{ state.toDelete.size > 0 && !state.singleDeleteAction }"
              waves-center="true"
-              color="#fff"
-              text-color="#777"
-              waves-color="#ddd"
+              color="inherit"
+              text-color="var(--neutral-background)"
+              waves-color="var(--hover-background)"
              title="This will delete selected images."
              onClick="{ deleteImages }"
              icon
--- a/src/images/docker-logo.svg
+++ b/src/images/docker-logo.svg
@@ -1,37 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   id="svg2"
-   x="0px"
-   y="0px"
-   viewBox="-5.724 -43.601 730 600" fill="#777">
-  <path
-     d="m595.942,422.343 c -7.543,0.119 -13.562,6.331 -13.443,13.875 0.119,7.544 6.332,13.562 13.875,13.443 7.495,-0.118 13.494,-6.254 13.445,-13.75 -0.085,-7.578 -6.297,-13.652 -13.875,-13.568 0,0 -10e-4,0 0,0 m 0,24.398 c -5.975,0.272 -11.039,-4.352 -11.311,-10.326 -0.271,-5.976 4.352,-11.04 10.327,-11.312 5.975,-0.271 11.039,4.352 11.311,10.327 0.01,0.19 0.013,0.382 0.011,0.573 0.204,5.723 -4.27,10.527 -9.992,10.731 -0.115,0.005 -0.23,0.007 -0.346,0.007"/>
-  <path
-     d="m599.081,436.342 v -0.185 c 1.512,-0.292 2.65,-1.544 2.8,-3.076 0.057,-1.175 -0.432,-2.311 -1.323,-3.077 -1.445,-0.765 -3.076,-1.106 -4.707,-0.984 -1.743,-0.024 -3.484,0.12 -5.2,0.431 v 13.538 h 3.077 v -5.446 h 1.477 c 1.754,0 2.554,0.646 2.83,2.154 0.184,1.143 0.536,2.252 1.047,3.292 h 3.415 c -0.53,-1.062 -0.873,-2.207 -1.016,-3.385 -0.138,-1.473 -1.088,-2.744 -2.462,-3.292 m -3.723,-0.985 h -1.508 v -3.908 c 0.583,-0.069 1.172,-0.069 1.754,0 1.97,0 2.893,0.831 2.893,2.062 0,1.231 -1.415,2 -3.076,2"/>
-  <path
-     d="M707.494,193.557c-1.938-1.539-20.029-15.199-58.181-15.199c-10.074,0.044-20.127,0.908-30.061,2.584       c-7.384-50.612-49.228-75.288-51.104-76.395l-10.245-5.908l-6.738,9.723c-8.438,13.061-14.598,27.459-18.214,42.582       c-6.831,28.891-2.677,56.027,11.999,79.226c-17.722,9.876-46.151,12.307-51.904,12.522H22.367       c-12.294,0.017-22.27,9.952-22.337,22.245c-0.549,41.234,6.437,82.222,20.614,120.946c16.214,42.521,40.336,73.842,71.719,93.01       c35.167,21.537,92.302,33.844,157.067,33.844c29.258,0.092,58.461-2.556,87.226-7.907c39.986-7.342,78.463-21.318,113.839-41.352       c29.149-16.88,55.383-38.354,77.688-63.596c37.29-42.213,59.505-89.226,76.026-131.007c2.215,0,4.431,0,6.584,0       c40.828,0,65.935-16.338,79.78-30.029c9.201-8.732,16.384-19.369,21.045-31.167l2.923-8.553L707.494,193.557z"/>
-  <path
-     d="M65.995,228.909h63.073c3.042,0,5.507-2.466,5.507-5.507l0,0V167.22c0.017-3.042-2.435-5.521-5.476-5.538       c-0.01,0-0.021,0-0.031,0H65.995c-3.042,0-5.507,2.466-5.507,5.507c0,0.01,0,0.021,0,0.031v56.181       C60.488,226.443,62.953,228.909,65.995,228.909L65.995,228.909"/>
-  <path
-     d="M152.913,228.909h63.073c3.042,0,5.507-2.466,5.507-5.507l0,0V167.22c0.017-3.042-2.435-5.521-5.477-5.538       c-0.01,0-0.021,0-0.031,0h-63.073c-3.059,0-5.538,2.479-5.538,5.538v56.181C147.392,226.448,149.866,228.909,152.913,228.909"/>
-  <path
-     d="M241.153,228.909h63.073c3.042,0,5.507-2.466,5.507-5.507l0,0V167.22c0.017-3.042-2.435-5.521-5.477-5.538       c-0.01,0-0.021,0-0.031,0h-63.073c-3.042,0-5.507,2.466-5.507,5.507c0,0.01,0,0.021,0,0.031v56.181       C235.646,226.443,238.112,228.909,241.153,228.909L241.153,228.909"/>
-  <path
-     d="M328.348,228.909h63.073c3.047,0,5.521-2.46,5.538-5.507V167.22c0-3.059-2.479-5.538-5.538-5.538l0,0h-63.073       c-3.042,0-5.507,2.466-5.507,5.507c0,0.01,0,0.021,0,0.031v56.181C322.841,226.443,325.307,228.909,328.348,228.909L328.348,228.909"/>
-  <path
-     d="M152.913,148.083h63.073c3.046-0.017,5.507-2.492,5.507-5.538V86.364c0-3.042-2.466-5.507-5.507-5.507l0,0h-63.073       c-3.046,0-5.521,2.46-5.538,5.507v56.181C147.392,145.597,149.861,148.066,152.913,148.083"/>
-  <path
-     d="M241.153,148.083h63.073c3.046-0.017,5.507-2.492,5.507-5.538V86.364c0-3.042-2.466-5.507-5.507-5.507l0,0h-63.073       c-3.042,0-5.507,2.466-5.507,5.507l0,0v56.181C235.646,145.591,238.107,148.066,241.153,148.083"/>
-  <path
-     d="M328.348,148.083h63.073c3.052-0.017,5.521-2.486,5.538-5.538V86.364c-0.017-3.047-2.491-5.507-5.538-5.507h-63.073       c-3.042,0-5.507,2.466-5.507,5.507l0,0v56.181C322.841,145.591,325.302,148.066,328.348,148.083"/>
-  <path
-     d="M328.348,67.227h63.073c3.047,0,5.521-2.461,5.538-5.507V5.507C396.942,2.46,394.468,0,391.421,0h-63.073       c-3.042,0-5.507,2.465-5.507,5.507l0,0v56.212C322.841,64.761,325.307,67.227,328.348,67.227"/>
-  <path
-     d="M416.312,228.909h63.073c3.047,0,5.521-2.46,5.538-5.507V167.22c0-3.059-2.479-5.538-5.538-5.538l0,0h-63.073       c-3.041,0-5.507,2.466-5.507,5.507c0,0.01,0,0.021,0,0.031v56.181C410.805,226.443,413.271,228.909,416.312,228.909"/>
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 730 730" fill="var(--neutral-text)">
+  <path d="M603.672 530.973c-7.543.12-13.562 6.331-13.443 13.875.119 7.544 6.332 13.562 13.875 13.443 7.495-.118 13.494-6.254 13.445-13.75-.085-7.578-6.297-13.652-13.875-13.568 0 0-.001 0 0 0m0 24.398c-5.975.272-11.04-4.352-11.311-10.326-.271-5.976 4.352-11.04 10.327-11.312 5.975-.27 11.039 4.352 11.31 10.327.01.19.014.382.012.573.204 5.723-4.27 10.527-9.992 10.731-.115.005-.23.007-.346.007"/>
+  <path d="M606.81 544.972v-.185a3.476 3.476 0 002.8-3.076 3.815 3.815 0 00-1.322-3.077 8.675 8.675 0 00-4.707-.984 27.066 27.066 0 00-5.2.431v13.538h3.077v-5.446h1.477c1.754 0 2.554.646 2.83 2.154a11.667 11.667 0 001.047 3.292h3.415a10.381 10.381 0 01-1.016-3.385 3.938 3.938 0 00-2.462-3.292m-3.723-.985h-1.508v-3.908a7.457 7.457 0 011.754 0c1.97 0 2.893.831 2.893 2.062 0 1.231-1.415 2-3.076 2m112.135-241.924c-1.938-1.539-20.03-15.199-58.181-15.199a185.562 185.562 0 00-30.061 2.584c-7.384-50.612-49.228-75.288-51.104-76.395l-10.245-5.908-6.738 9.723a137.318 137.318 0 00-18.214 42.582c-6.831 28.891-2.677 56.027 11.999 79.226-17.722 9.876-46.151 12.307-51.904 12.522H30.096c-12.293.017-22.27 9.952-22.336 22.245a338.69 338.69 0 0020.614 120.946c16.214 42.521 40.336 73.842 71.719 93.01 35.167 21.537 92.302 33.844 157.067 33.844a468.88 468.88 0 0087.226-7.907 364.649 364.649 0 00113.839-41.352 312.969 312.969 0 0077.688-63.596c37.29-42.213 59.505-89.226 76.026-131.007h6.584c40.828 0 65.935-16.338 79.78-30.029a87.08 87.08 0 0021.045-31.167l2.923-8.553z"/>
+  <path d="M73.725 337.54h63.073a5.507 5.507 0 005.507-5.508V275.85a5.507 5.507 0 00-5.476-5.538H73.725a5.507 5.507 0 00-5.507 5.507v56.212a5.507 5.507 0 005.507 5.508m86.918.001h63.073a5.507 5.507 0 005.507-5.508V275.85a5.507 5.507 0 00-5.477-5.538h-63.104a5.537 5.537 0 00-5.538 5.538v56.181a5.54 5.54 0 005.539 5.508m88.24.001h63.073a5.507 5.507 0 005.507-5.508V275.85a5.507 5.507 0 00-5.477-5.538h-63.104a5.507 5.507 0 00-5.507 5.507v56.212a5.51 5.51 0 005.508 5.508m87.195.001h63.073a5.537 5.537 0 005.538-5.508V275.85a5.537 5.537 0 00-5.538-5.538h-63.073a5.507 5.507 0 00-5.507 5.507v56.212a5.508 5.508 0 005.507 5.508m-175.435-80.826h63.073a5.539 5.539 0 005.507-5.538v-56.18a5.507 5.507 0 00-5.507-5.508h-63.073a5.538 5.538 0 00-5.538 5.507v56.181a5.568 5.568 0 005.538 5.538m88.24 0h63.073a5.539 5.539 0 005.507-5.538v-56.18a5.507 5.507 0 00-5.507-5.508h-63.073a5.507 5.507 0 00-5.507 5.507v56.181a5.539 5.539 0 005.507 5.538m87.195 0h63.073a5.568 5.568 0 005.538-5.538v-56.18a5.537 5.537 0 00-5.538-5.508h-63.073a5.507 5.507 0 00-5.507 5.507v56.181a5.539 5.539 0 005.507 5.538m0-80.856h63.073a5.538 5.538 0 005.538-5.507v-56.213a5.537 5.537 0 00-5.538-5.507h-63.073a5.506 5.506 0 00-5.507 5.507v56.212a5.508 5.508 0 005.507 5.508m87.964 161.683h63.073a5.537 5.537 0 005.538-5.508V275.85a5.537 5.537 0 00-5.538-5.538h-63.073a5.508 5.508 0 00-5.507 5.507v56.212a5.508 5.508 0 005.507 5.508"/>
 </svg>
--- a/src/index.html
+++ b/src/index.html
@@ -47,6 +47,17 @@
      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>
    <!-- endbuild -->
@@ -62,6 +73,17 @@
      show-catalog-nb-tags="true"
      history-custom-labels="first_custom_labels,second_custom_labels"
      use-control-cache-header="false"
+      theme="auto"
+      theme-primary-text=""
+      theme-neutral-text=""
+      theme-background=""
+      theme-hover-background=""
+      theme-accent-text=""
+      theme-header-text=""
+      theme-header-background=""
+      theme-footer-text=""
+      theme-footer-neutra-text=""
+      theme-footer-background=""
    >
    </docker-registry-ui>
    <!-- endbuild -->
--- a/src/scripts/theme.js
+++ b/src/scripts/theme.js
@@ -0,0 +1,51 @@
+const LIGHT_THEME = {
+  'primary-text': '#25313b',
+  'neutral-text': '#777',
+  'background': '#fff',
+  'hover-background': '#eee',
+  'accent-text': '#6680a1',
+  'header-text': '#fff',
+  'header-background': '#25313b',
+  'footer-text': '#fff',
+  'footer-neutral-text': '#999',
+  'footer-background': '#555',
+};
+const DARK_THEME = {
+  'primary-text': '#8A9EBA',
+  'neutral-text': '#36527A',
+  'background': '#22272e',
+  'hover-background': '#30404D',
+  'accent-text': '#5684FF',
+  'header-text': '#fff',
+  'header-background': '#333A45',
+  'footer-text': '#fff',
+  'footer-neutral-text': '#999',
+  'footer-background': '#555',
+};
+
+let THEME;
+
+const normalizeKey = (k) =>
+  k
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .replace(/^theme-/, '');
+
+const preferDarkMode = ({ theme }) => {
+  if (theme === 'auto') {
+    if (typeof window.matchMedia === 'function') {
+      const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+      return prefersDarkScheme && prefersDarkScheme.matches;
+    }
+  }
+  return theme === 'dark';
+};
+
+export const loadTheme = (props, style) => {
+  THEME = preferDarkMode(props) ? DARK_THEME : LIGHT_THEME;
+  Object.entries(props)
+    .filter(([k, v]) => v && /^theme[A-Z]/.test(k))
+    .map(([k, v]) => [normalizeKey(k), v])
+    .forEach(([k, v]) => (THEME[k] = v));
+  Object.entries(THEME).forEach(([k, v]) => style.setProperty(`--${k}`, v));
+};
--- a/src/scripts/utils.js
+++ b/src/scripts/utils.js
@@ -80,6 +80,8 @@ export function getHistoryIcon(attribute) {
      return 'get_app';
    case 'ExposedPorts':
      return 'router';
+    case 'comment':
+      return 'chat';
    default:
      if (attribute.startsWith('custom-label-')) {
        return 'label';
--- a/src/style.scss
+++ b/src/style.scss
@@ -33,6 +33,8 @@
 html > body {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
  font-size: 16px;
+  background-color: var(--background);
+  color: var(--primary-text);
 }

 html,
@@ -60,7 +62,9 @@ body {
  text-decoration: none;
  font-weight: inherit;
 }
-
+material-card {
+  background-color: var(--background);
+}
 material-card,
 material-tabs,
 pagination .container {
@@ -93,13 +97,6 @@ material-tabs material-button .content .text {
  text-transform: none;
 }

-material-tabs .line-wrapper .line {
-  background-color: #25313b;
-}
-material-tabs material-button.selected .content .text {
-  color: #25313b;
-}
-
 material-spinner {
  align-self: center;
 }
@@ -119,6 +116,12 @@ material-spinner {
  font-weight: 400;
 }

+@media screen and (max-width: 600px) {
+  .logo {
+    padding-left: 0;
+  }
+}
+
 h2 {
  padding: 16px;
  margin: auto;
@@ -141,7 +144,7 @@ h2 {
 }

 .list.highlight:hover {
-  background-color: #eee;
+  background-color: rgba(0, 0, 0, 0.12);
  cursor: pointer;
 }

@@ -165,7 +168,7 @@ docker-registry-ui material-button > :first-child .content i.material-icons.mate
  height: 24px;
  width: 24px;
  box-sizing: border-box;
-  color: #757575;
+  color: var(--accent-text);
 }

 .list > span .right i.material-icons.animated {
@@ -230,7 +233,6 @@ material-card table {
  border-collapse: collapse;
  white-space: nowrap;
  font-size: 13px;
-  background-color: #fff;
  border: none;
 }

@@ -239,7 +241,7 @@ material-card table th {
  vertical-align: bottom;
  line-height: 24px;
  height: 48px;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--accent-text);
  box-sizing: border-box;
  padding: 0 18px 12px 18px;
  text-align: right;
@@ -249,10 +251,9 @@ material-card table th {
  text-align: left;
 }

-material-button:hover > :first-child[inverted='true'],
 material-card .material-card-title-action material-button:hover button,
 material-card table tbody tr:hover {
-  background-color: #eee !important;
+  background-color: rgba(0, 0, 0, 0.12) !important;
 }

 material-button > :first-child[inverted='true'],
@@ -287,7 +288,7 @@ material-card table th.material-card-th-sorted-descending:hover {

 material-card table th.material-card-th-sorted-ascending:hover:before,
 material-card table th.material-card-th-sorted-descending:hover:before {
-  color: rgba(0, 0, 0, 0.26);
+  color: var(--primary-text);
 }

 material-card table th.material-card-th-sorted-ascending:before,
@@ -308,7 +309,7 @@ material-card table th.material-card-th-sorted-descending:before {

 material-button .content i.material-icons,
 .material-icons {
-  color: #777;
+  color: var(--neutral-text);
 }

 material-button[disabled] .content i.material-icons,
@@ -320,13 +321,11 @@ material-snackbar .toast {
  height: auto;
 }

-material-popup material-button:hover material-waves {
-  background-color: hsla(0, 0%, 75%, 0.2);
-}
-
 material-popup .popup > .content {
  padding: 1em;
  max-width: 450px;
+  background-color: var(--background);
+  color: var(--primary-text);
 }

 footer {
@@ -391,10 +390,6 @@ taglist .image-size {
  width: 7em;
 }

-material-button:hover material-waves {
-  background: none;
-}
-
 material-card material-button {
  background-color: inherit;
 }
@@ -452,9 +447,9 @@ material-checkbox.indeterminate .checkbox.checked .checkmark {
 }

 material-checkbox .checkbox {
-  border-color: #777;
+  border-color: var(--neutral-text);
 }

 material-checkbox .checkbox.checked {
-  background-color: #777;
+  background-color: var(--neutral-text);
 }