Rename accentColor to primaryColor

src/App.vue

@@ -46,8 +46,8 @@ export default {
   components: { AppHeader, Modal },
   created() {
     document.documentElement.style.setProperty(
-      "--color-accent",
-      config.accentColor
+      "--color-primary",
+      config.primaryColor
     );
     this.populateStateFromQuery(this.$route.query);
     this.loadData();

src/config.js

@@ -13,7 +13,8 @@ const DEFAULT_CONFIG = {
     // API base URL, defaults to the same domain. Keep CORS in mind.
     baseUrl: `${window.location.protocol}//${window.location.host}`,
   },
-  accentColor: "#478db2",
+  // Primary color for the user interface
+  primaryColor: "#3f51b5",
   // Initial start and end date. Doesn't have to be hardcoded, see
   // above. Defaults to one month ago - today.
   startDate,
@@ -51,7 +52,7 @@ const DEFAULT_CONFIG = {
         imperial: true,
       },
     },
-    // `color` and `fillColor` default to `accentColor` when null.
+    // `color` and `fillColor` default to `primaryColor` when null.
     polyline: {
       color: null,
       fillColor: "transparent",

src/styles/_base.scss

@@ -7,8 +7,8 @@
 :root {
   --color-text: #333;
   --color-background: #fff;
-  --color-accent: #478db2;
-  --color-accent-text: #fff;
+  --color-primary: #3f51b5;
+  --color-primary-text: #fff;
   --drop-shadow: drop-shadow(0 10px 10px rgb(0, 0, 0, 0.2));
   --dropdown-arrow: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2210%22%3E%3Cpath%20fill%3D%22%23333%22%20fill-opacity%3D%221%22%20stroke%3D%22none%22%20d%3D%22M0%2C0%20L0%2C0%20L1%2C0%20L1%2C6%20L7%2C6%20L7%2C7%20L0%2C7%20z%22%20transform%3D%22rotate(-45%205%200)%22%20%2F%3E%3C%2Fsvg%3E");
 }
@@ -24,7 +24,7 @@ body {
 }
 
 a {
-  color: var(--color-accent);
+  color: var(--color-primary);
 }
 
 ul {
@@ -50,8 +50,8 @@ ul {
   white-space: nowrap;
   overflow-x: auto;
   z-index: 1;
-  color: var(--color-accent-text);
-  background: var(--color-accent);
+  color: var(--color-primary-text);
+  background: var(--color-primary);
 }
 
 #app > header > nav {
@@ -91,12 +91,12 @@ ul {
 
 .button-outline {
   border: 1px solid var(--color-background);
-  color: var(--color-accent-text);
+  color: var(--color-primary-text);
   background: transparent;
 }
 
 .button-flat {
-  color: var(--color-accent-text);
+  color: var(--color-primary-text);
   background: transparent;
 }
 
@@ -246,13 +246,13 @@ ul {
 .vdp-datepicker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
 .vdp-datepicker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
 .vdp-datepicker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
-  border-color: var(--color-accent);
+  border-color: var(--color-primary);
 }
 
 .vdp-datepicker .vdp-datepicker__calendar .cell.selected,
 .vdp-datepicker .vdp-datepicker__calendar .cell.selected:hover {
-  background: var(--color-accent);
-  color: var(--color-accent-text);
+  background: var(--color-primary);
+  color: var(--color-primary-text);
 }
 
 header .feather {

src/views/Map.vue

@@ -160,16 +160,16 @@ export default {
       controls: config.map.controls,
       polyline: {
         ...config.map.polyline,
-        color: config.map.polyline.color || config.accentColor,
+        color: config.map.polyline.color || config.primaryColor,
       },
       circle: {
         ...config.map.circle,
-        color: config.map.circle.color || config.accentColor,
-        fillColor: config.map.circle.fillColor || config.accentColor,
+        color: config.map.circle.color || config.primaryColor,
+        fillColor: config.map.circle.fillColor || config.primaryColor,
       },
       circleMarker: {
         ...config.map.circleMarker,
-        color: config.map.circleMarker.color || config.accentColor,
+        color: config.map.circleMarker.color || config.primaryColor,
       },
       heatmap: config.map.heatmap,
     };