Add --farmos-map-accent-color CSS property

CHANGELOG.md

@@ -6,6 +6,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add `--farmos-map-accent-color` CSS property. #186
+
+### Fixed
+
+- Fix color scheme compliance of remaining icons. #181
+
 ### Changed
 
 - Improve interaction and control docs. #185

README.md

@@ -616,6 +616,16 @@ all the behaviors from `farmOS.map.behaviors` have finished being attached to th
 
 ## Advanced Integration
 
+### Accent color
+
+The farmOS-map accent color can be changed with the `--farmos-map-accent-color` custom CSS property.
+
+```css
+#farm-map {
+  --farmos-map-accent-color: #336633;
+}
+```
+
 ### Working with farmOS-map in an NPM/Webpack Project
 
 Some integration scenarios require farmOS-map to be modeled as a dependency - i.e. so static analysis can

src/styles.css

@@ -1,14 +1,18 @@
 /* Control color. */
+:root {
+  --farmos-map-accent-color: green;
+}
+
 .ol-control {
   background-color: rgba(255, 255, 255, 0.25);
 }
 
 .ol-control svg {
-  fill: green;
+  fill: var(--farmos-map-accent-color);
 }
 
 .ol-control button {
-  color: green;
+  color: var(--farmos-map-accent-color);
   background-color: rgba(255, 255, 255, 0.8);
 }