Add color invert option to scale-line example

examples/scale-line.css

@@ -1,3 +1,11 @@
 #scaleBarOptions {
   display: none;
 }
+
+.ol-scale-bar-inverted .ol-scale-singlebar-even {
+  background-color: var(--ol-background-color);
+}
+
+.ol-scale-bar-inverted .ol-scale-singlebar-odd {
+  background-color: var(--ol-subtle-foreground-color);;
+}

examples/scale-line.html

@@ -31,4 +31,6 @@ tags: "scale-line, openstreetmap"
   </select>
 
   <label><input type="checkbox" id="showScaleText" checked> Show scale text</label>
+
+  <label><input type="checkbox" id="invertColors"> Invert colors</label>
 </div>

examples/scale-line.js

@@ -9,6 +9,7 @@ const unitsSelect = document.getElementById('units');
 const typeSelect = document.getElementById('type');
 const stepsSelect = document.getElementById('steps');
 const scaleTextCheckbox = document.getElementById('showScaleText');
+const invertColorsCheckbox = document.getElementById('invertColors');
 
 let control;
 
@@ -26,6 +27,7 @@ function scaleControl() {
       text: scaleTextCheckbox.checked,
       minWidth: 140,
     });
+    onInvertColorsChange();
     scaleBarOptionsContainer.style.display = 'block';
   }
   return control;
@@ -51,7 +53,14 @@ function reconfigureScaleLine() {
 function onChangeUnit() {
   control.setUnits(unitsSelect.value);
 }
+function onInvertColorsChange() {
+  control.element.classList.toggle(
+    'ol-scale-bar-inverted',
+    invertColorsCheckbox.checked
+  );
+}
 unitsSelect.addEventListener('change', onChangeUnit);
 typeSelect.addEventListener('change', reconfigureScaleLine);
 stepsSelect.addEventListener('change', reconfigureScaleLine);
 scaleTextCheckbox.addEventListener('change', reconfigureScaleLine);
+invertColorsCheckbox.addEventListener('change', onInvertColorsChange);