Add custom-properties to css for improved styling

CHANGELOG.md

@@ -15,6 +15,7 @@ _This release is scheduled to be released on 2021-04-01._
 - Added German translation for "PRECIP".
 - Added first test for Alert module.
 - Added support for `dateFormat` when not using `timeFormat: "absolute"`
+- Added custom-properties in css for improved styling experience, see `custom.css.sample` file
 
 ### Updated
 
@@ -28,7 +29,7 @@ _This release is scheduled to be released on 2021-04-01._
 - Fix updatenotification start function logging inconsistency.
 - Checks and applies the showDescription setting for the newsfeed module again
 - Fix tests in weather module and add one for decimalPoint in forecast
-- Fix decimalSymbol in the forcast part of the new weather module #2530
+- Fix decimalSymbol in the forecast part of the new weather module #2530
 - Fix wrong treatment of `appendLocationNameToHeader` when using `ukmetofficedatahub`
 - Fix alert not recognizing multiple alerts (#2522)
 

css/custom.css.sample

@@ -0,0 +1,18 @@
+/* Magic Mirror Custom CSS Sample
+ *
+ * MIT Licensed.
+ */
+
+// Uncomment and adjust accordingly if you want to import another font from the google-fonts-api:
+// @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap');
+
+// Change color and fonts here:
+:root {
+  --color-text: #999;
+  --color-text-dimmed: #666;
+  --color-text-bright: #fff;
+  --color-background: black;
+  --font-size: 20px;
+  --font-primary: "Roboto Condensed";
+  --font-secondary: "Roboto";
+}

css/main.css

@@ -1,8 +1,19 @@
+:root {
+  --color-text: #999;
+  --color-text-dimmed: #666;
+  --color-text-bright: #fff;
+  --color-background: black;
+  --font-size: 20px;
+  --font-primary: "Roboto Condensed";
+  --font-secondary: "Roboto";
+}
+
 html {
   cursor: none;
   overflow: hidden;
-  background: #000;
+  background: var(--color-background);
   user-select: none;
+  font-size: var(--font-size);
 }
 
 ::-webkit-scrollbar {
@@ -14,12 +25,11 @@ body {
   position: absolute;
   height: calc(100% - 120px);
   width: calc(100% - 120px);
-  background: #000;
-  color: #aaa;
-  font-family: "Roboto Condensed", sans-serif;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-family: var(--font-primary), sans-serif;
   font-weight: 400;
-  font-size: 2em;
-  line-height: 1.5em;
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -28,60 +38,60 @@ body {
  */
 
 .dimmed {
-  color: #666;
+  color: var(--color-text-dimmed);
 }
 
 .normal {
-  color: #999;
+  color: var(--color-text);
 }
 
 .bright {
-  color: #fff;
+  color: var(--color-text-bright);
 }
 
 .xsmall {
-  font-size: 15px;
-  line-height: 20px;
+  font-size: 0.667rem;
+  line-height: 1.4;
 }
 
 .small {
-  font-size: 20px;
-  line-height: 25px;
+  font-size: 1rem;
+  line-height: 1.4;
 }
 
 .medium {
-  font-size: 30px;
-  line-height: 35px;
+  font-size: 1.5rem;
+  line-height: 1.4;
 }
 
 .large {
-  font-size: 65px;
-  line-height: 65px;
+  font-size: 2.25rem;
+  line-height: 1;
 }
 
 .xlarge {
-  font-size: 75px;
-  line-height: 75px;
+  font-size: 3.375rem;
+  line-height: 1;
   letter-spacing: -3px;
 }
 
 .thin {
-  font-family: Roboto, sans-serif;
+  font-family: var(--font-secondary), sans-serif;
   font-weight: 100;
 }
 
 .light {
-  font-family: "Roboto Condensed", sans-serif;
+  font-family: var(--font-primary), sans-serif;
   font-weight: 300;
 }
 
 .regular {
-  font-family: "Roboto Condensed", sans-serif;
+  font-family: var(--font-primary), sans-serif;
   font-weight: 400;
 }
 
 .bold {
-  font-family: "Roboto Condensed", sans-serif;
+  font-family: var(--font-primary), sans-serif;
   font-weight: 700;
 }
 
@@ -96,7 +106,7 @@ body {
 header {
   text-transform: uppercase;
   font-size: 15px;
-  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
+  font-family: var(--font-primary), Arial, Helvetica, sans-serif;
   font-weight: 400;
   border-bottom: 1px solid #666;
   line-height: 15px;