feat(theme): add support for header and footer

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

@@ -18,7 +18,7 @@
   <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" text-color="var(--primary-text)" label-color="var(--neutral-text)" 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">

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)"
+      color="var(--header-background)"
-      text-color="#fff"
+      text-color="var(--header-text)"
       icon
     >
       <i class="material-icons">more_vert</i>

src/components/docker-registry-ui.riot

@@ -141,7 +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);
+        loadTheme(props, this.root.parentNode.style);
       },
       onServerChange(registryUrl) {
         this.update({
@@ -204,17 +204,22 @@ 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;
+      color: var(--header-text);
+      background-color: var(--header-background);
     }
 
     material-navbar .menu {
       display: flex;
     }
+
+    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>

src/components/search-bar.riot

@@ -1,5 +1,5 @@
 <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';
 

src/scripts/theme.js

@@ -3,14 +3,24 @@ const LIGHT_THEME = {
   'neutral-text': '#777',
   'background': '#fff',
   'hover-background': '#eee',
-  'accent-text': 'rgba(0,0,0,0.26)',
+  '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': '#5684C4',
+  'accent-text': '#5684FF',
+  'header-text': '#fff',
+  'header-background': '#333A45',
+  'footer-text': '#fff',
+  'footer-neutral-text': '#999',
+  'footer-background': '#555',
 };
 
 let THEME;

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,
@@ -160,7 +162,7 @@ docker-registry-ui material-button > :first-child .content i.material-icons.mate
   height: 24px;
   width: 24px;
   box-sizing: border-box;
-  color: var(--neutral-text);
+  color: var(--accent-text);
 }
 
 .list > span .right i.material-icons.animated {
@@ -233,7 +235,7 @@ material-card table th {
   vertical-align: bottom;
   line-height: 24px;
   height: 48px;
-  color: var(--neutral-text);
+  color: var(--accent-text);
   box-sizing: border-box;
   padding: 0 18px 12px 18px;
   text-align: right;
@@ -280,7 +282,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: var(--accent-text);
+  color: var(--primary-text);
 }
 
 material-card table th.material-card-th-sorted-ascending:before,