feat(theme): add support for dialogs

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

@@ -18,14 +18,14 @@
   <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)" 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>

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

@@ -23,10 +23,10 @@
       </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>
@@ -70,6 +70,10 @@
       -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,10 @@
       </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

@@ -105,10 +105,15 @@
   </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);
+    }
 
     :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,7 @@ 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>
@@ -59,9 +60,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>

src/components/tag-list/copy-to-clipboard.riot

@@ -19,7 +19,7 @@
     <input style="display: none; width: 1px; height: 1px" value="{ getDockerCmd(props) }" />
     <material-button
       text-color="var(--neutral-text)"
-      color="var(--background)"
+      color="inherit"
       waves-color="var(--hover-background)"
       waves-center="true"
       onClick="{ copy }"

src/components/tag-list/remove-image.riot

@@ -17,7 +17,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <remove-image>
   <material-button
     text-color="var(--neutral-text)"
-    color="var(--background)"
+    color="inherit"
     waves-color="var(--hover-background)"
     waves-center="true"
     title="This will delete the image."

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

@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <material-button
     title="{ buttonTittle() }"
     text-color="var(--neutral-text)"
-    color="var(--background)"
+    color="inherit"
     waves-color="var(--hover-background)"
     waves-center="true"
     href="{ routeToHistory() }"

src/components/tag-list/tag-list.riot

@@ -19,7 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <div class="material-card-title-action">
       <material-button
         text-color="var(--neutral-text)"
-        color="var(--background)"
+        color="inherit"
         waves-color="var(--hover-background)"
         waves-center="true"
         href="{ router.home() }"

src/style.scss

@@ -324,6 +324,8 @@ material-snackbar .toast {
 material-popup .popup > .content {
   padding: 1em;
   max-width: 450px;
+  background-color: var(--background);
+  color: var(--primary-text);
 }
 
 footer {