load css from js

src/private/css/magma.css

@@ -25,7 +25,7 @@ body {
   padding: 15px !important;
   margin-bottom: 0 !important;
   border-radius: 0.7rem !important;
-  align-items: center;
+  align-items: end !important;
   line-height: 2;
   transition: all 0.25s;
   display: flex;
@@ -35,10 +35,11 @@ body {
 
 .group-items h6 {
   align-items: center;
+  margin-top: 5px !important;
+  margin-bottom: 0 !important;
   margin-left: 0.5em !important;
   display: inline-block;
-  vertical-align: middle;
-  text-align: center;
+  vertical-align: bottom !important;
   font-weight: bold;
 }
 

src/private/index.html

@@ -9,9 +9,9 @@
 
     <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
 
+    <link rel="stylesheet" href="../public/css/custom.css">
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/skeleton.css">
-    <link rel="stylesheet" href="../public/css/custom.css">
     <link rel="stylesheet" href="css/magma.css">
 </head>
 

src/private/js/magma.js

@@ -1,4 +1,14 @@
+// Get CSS
+var declaration = document.styleSheets[1].cssRules[0];
+var allVar = declaration.style.cssText.split(";");
+var cssRootKeys = {}
+for (var i = 0; i < allVar.length; i++) {
+    var a = allVar[i].split(':');
+    if (a[0] !== "")
+        cssRootKeys[a[0].trim()] = a[1].trim();
+}
 
+// Set Clock
 var clock = document.getElementById("clock");
 const clockOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
 (function clockTick() {
@@ -6,5 +16,6 @@ const clockOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'nu
     setTimeout(clockTick, 2000);
 })();
 
-var skycons = new Skycons({ "color": "pink" });
+// Set weather icon
+var skycons = new Skycons({ "color": cssRootKeys["--accentColor"] });
 skycons.add("weather-icon", Skycons.PARTLY_CLOUDY_DAY);