feat(theme): add support for custom themes

Author: Joxit

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.style);
       },
       onServerChange(registryUrl) {
         this.update({
@@ -200,10 +204,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     };
   </script>
   <style>
+    :host {
+      display: block;
+      background-color: var(--background);
+      color: var(--primary-text);
+    }
     material-navbar {
       height: 64px;
     }
-    
+
     material-navbar .menu {
       display: flex;
     }

src/components/tag-history/tag-history.riot

@@ -18,12 +18,13 @@ 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>

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="var(--background)"
+      waves-color="var(--hover-background)"
       waves-center="true"
       onClick="{ copy }"
       title="Copy pull command."

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="var(--background)"
+    waves-color="var(--hover-background)"
     waves-center="true"
     title="This will delete the image."
     if="{ !props.multiDelete }"

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="var(--background)"
+    waves-color="var(--hover-background)"
     waves-center="true"
     href="{ routeToHistory() }"
     disabled="{ props.image.ociImage }"

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="var(--background)"
+        waves-color="var(--hover-background)"
         waves-center="true"
         href="{ router.home() }"
         icon
-        inverted
       >
         <i class="material-icons">arrow_back</i>
       </material-button>

src/scripts/theme.js

@@ -0,0 +1,29 @@
+const LIGHT_THEME = {
+  'primary-text': '#25313b',
+  'neutral-text': '#777',
+  'background': '#fff',
+  'hover-background': '#eee',
+};
+const DARK_THEME = {
+  'primary-text': '#8A9EBA',
+  'neutral-text': '#36527A',
+  'background': '#22272e',
+  'hover-background': '#30404D',
+};
+
+let THEME;
+
+const normalizeKey = (k) =>
+  k
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .replace(/^theme-/, '');
+
+export const loadTheme = (props, style) => {
+  THEME = props.theme == 'dark' ? 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));
+};

src/style.scss

@@ -60,7 +60,9 @@ body {
   text-decoration: none;
   font-weight: inherit;
 }
-
+material-card {
+  background-color: var(--background);
+}
 material-card,
 material-tabs,
 pagination .container {
@@ -141,7 +143,7 @@ h2 {
 }
 
 .list.highlight:hover {
-  background-color: #eee;
+  background-color: var(--hover-background);
   cursor: pointer;
 }
 
@@ -165,7 +167,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(--neutral-text);
 }
 
 .list > span .right i.material-icons.animated {
@@ -230,7 +232,6 @@ material-card table {
   border-collapse: collapse;
   white-space: nowrap;
   font-size: 13px;
-  background-color: #fff;
   border: none;
 }
 
@@ -239,7 +240,7 @@ material-card table th {
   vertical-align: bottom;
   line-height: 24px;
   height: 48px;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--neutral-text);
   box-sizing: border-box;
   padding: 0 18px 12px 18px;
   text-align: right;
@@ -249,10 +250,10 @@ material-card table th {
   text-align: left;
 }
 
-material-button:hover > :first-child[inverted='true'],
+material-button:hover > :first-child,
 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'],
@@ -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,10 +321,6 @@ 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;
@@ -452,9 +449,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);
 }