feat(theme): add support for custom themes

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>