use css vars for colors

config.html

@@ -28,11 +28,11 @@
 			<section class="w3-container">
 				<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2>
 				<form>
-					<fieldset>
+					<fieldset class="w3-card w3-padding">
 						<legend>Resources</legend>
 						<div class="input-grid" id="resources" style="grid-template-columns: repeat(3, auto) 1fr;"></div>
 					</fieldset>
-					<fieldset style="margin-top: 16px;">
+					<fieldset class="w3-card w3-padding" style="margin-top: 16px;">
 						<legend>Disks</legend>
 						<div class="input-grid" id="disks" style="grid-template-columns: auto auto auto 1fr;"></div>
 						<div class="w3-container w3-center">

css/form.css

@@ -15,23 +15,18 @@
 }
 
 legend {
-    display: table;
-    float: left;
-    margin: 8px 0;
-    padding: 0;
-    width: 100%;
-    + * {
-        clear: both;
-    }
+	display: table;
+	float: left;
+	margin: 8px 0;
+	padding: 0;
+	width: 100%;
+	+ * {
+		clear: both;
+	}
 }
 
 fieldset {
-    border: 0;
-    padding: 8px 16px;
-    margin: 0;
-    min-width: 0;
-	background-color: #202020;
-	box-shadow: 0 2px 5px 0px black;
+	border: 0;
 }
 
 fieldset > *:last-child {
@@ -39,5 +34,5 @@ fieldset > *:last-child {
 }
 
 body:not(:-moz-handler-blocked) fieldset {
-    display: table-cell;
+	display: table-cell;
 }

css/nav.css

@@ -1,10 +1,25 @@
+:root {
+	--nav-bg-color: black;
+	--nav-text-color: white;
+	--nav-header-bg-color: #0f0;
+	--nav-header-text-color: black;
+	--nav-link-hover-color: var(--main-bg-color, #404040);
+}
+
 nav {
 	overflow: hidden;
-	color: white;
-	background-color: black;
+	background-color: var(--nav-bg-color);
+	color: var(--nav-text-color);
 	font-size: larger;
 }
 
+nav h1 {
+	font-size: 18px;
+	margin: 0px;
+	background-color: var(--nav-header-bg-color);
+	color: var(--nav-header-text-color);
+}
+
 nav a, nav h1, nav label {
 	text-align: left;
 	padding: 8px 10px;
@@ -17,13 +32,11 @@ nav a, nav h1, nav label {
 
 @media screen and (min-width: 600px){
 	#hamitems a:hover, #hamitems a[aria-current="true"], #hamitems:hover a[aria-current="true"]:hover {
-		background-color: #303030;
-		color: white;
+		background-color: var(--nav-link-hover-color);
 	}
 	
 	#hamitems:hover a[aria-current="true"] {
-		background-color: black;
-		color: white;
+		background-color: var(--nav-bg-color);
 	}
 
 	nav {

css/style.css

@@ -1,6 +1,12 @@
 :root {
 	--fail-color: #f00;
 	--success-color: #0f0;
+	--main-bg-color: #404040;
+	--main-text-color: white;
+	--main-card-bg-color: #202020;
+	--main-card-shadow-color: black;
+	--main-table-header-bg-color: black;
+	--main-input-bg-color: #404040;
 }
 
 * {
@@ -20,33 +26,26 @@ body {
 
 main, dialog {
 	max-width: 100vw;
-	background-color: #303030;
-	color: white;
-}
-
-h1 {
-	font-size: 18px;
-	margin: 0px;
-	background-color: #0f0;
-	color: #000;
+	background-color: var(--main-bg-color);
+	color: var(--main-text-color);
 }
 
 .w3-card {
-	background-color: #202020;
-	box-shadow: 0 2px 5px 0 black;
+	background-color: var(--main-card-bg-color);
+	box-shadow: 0 2px 5px 0 var(--main-card-shadow-color);
 }
 
 th {
-	background-color: #080808;
+	background-color: var(--main-table-header-bg-color);
 }
 
 td {
-	background-color: #202020;
+	background-color: var(--main-card-bg-color);
 }
 
 input, select, textarea {
-	background-color: #303030;
-	color: white;
+	background-color: var(--main-input-bg-color);
+	color: var(--main-text-color);
 }
 
 img.clickable {