dark theme

src/controls/MMapRouteControl/MMapWaypointInput/index.css

@@ -28,6 +28,10 @@
         justify-content: center;
         align-items: center;
         margin-right: 12px;
+
+        &._empty {
+            color: #c8c9cc !important;
+        }
     }
     .mappable--route-control_waypoint-input__field {
         box-sizing: border-box;
@@ -37,7 +41,7 @@
         border-radius: 8px;
         background: rgba(92, 94, 102, 0.06);
         flex-grow: 1;
-        color: var(--text-text-primary, #050d33);
+        color: #050d33;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -100,13 +104,42 @@
         align-items: center;
         position: absolute;
         transform: translate(-36px, -50%);
+        border-radius: 8px;
         background: none;
         outline: none;
         border: none;
         cursor: pointer;
+        color: #7b7d85;
 
         &:hover {
             background: rgba(18, 45, 178, 0.04);
         }
     }
 }
+
+/* dark theme styles */
+.mappable--route-control_waypoint-input._dark-input {
+    .mappable--route-control_waypoint-input__field {
+        background: rgba(250, 251, 255, 0.039);
+        color: #f2f5fa;
+        &:focus {
+            border: 1px solid #7d90f0;
+        }
+    }
+    .mappable--route-control_waypoint-input__indicator._empty {
+        color: #46464d !important;
+    }
+    .mappable--route-control_waypoint-input__field-buttons__location {
+        color: #7d90f0;
+        &:hover {
+            background: rgba(125, 144, 240, 0.071);
+            color: #aebbff;
+        }
+    }
+    .mappable--route-control_waypoint-input__field-buttons__reset {
+        color: #939499;
+        &:hover {
+            background: rgba(125, 144, 240, 0.071);
+        }
+    }
+}

src/controls/MMapRouteControl/MMapWaypointInput/index.ts

@@ -12,22 +12,15 @@ import debounce from 'lodash/debounce';
 import {CustomSearch, CustomSuggest, SearchParams} from '../../MMapSearchControl';
 import {MMapSuggest} from '../../MMapSearchControl/MMapSuggest';
 import emptyIndicatorSVG from '../icons/indicators/empty-indicator.svg';
-import fromFocusIndicator from '../icons/indicators/from-focus-indicator.svg';
-import fromSettedIndicator from '../icons/indicators/from-setted-indicator.svg';
-import toFocusIndicator from '../icons/indicators/to-focus-indicator.svg';
-import toSettedIndicator from '../icons/indicators/to-setted-indicator.svg';
+import focusIndicatorSVG from '../icons/indicators/focus-indicator.svg';
+import settedIndicatorSVG from '../icons/indicators/setted-indicator.svg';
 import locationSVG from '../icons/location-button.svg';
 import resetSVG from '../icons/reset-button.svg';
 import './index.css';
 
-const focusIndicator = {
-    from: fromFocusIndicator,
-    to: toFocusIndicator
-};
-
-const settedIndicator = {
-    from: fromSettedIndicator,
-    to: toSettedIndicator
+const INDICATOR_COLORS = {
+    light: {from: '#2E4CE5', to: '#313133'},
+    dark: {from: '#D6FD63', to: '#C8D2E6'}
 };
 
 export type SelectWaypointArgs = {
@@ -76,7 +69,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
 
         this._indicator = document.createElement('mappable');
         this._indicator.classList.add('mappable--route-control_waypoint-input__indicator');
-        this._indicator.insertAdjacentHTML('afterbegin', emptyIndicatorSVG);
+        this._updateIndicatorStatus('empty');
         form.appendChild(this._indicator);
 
         this._inputEl = document.createElement('input');
@@ -138,6 +131,15 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
             },
             {immediate: true}
         );
+        this._watchContext(
+            mappable.ThemeContext,
+            () => {
+                const {theme} = this._consumeContext(mappable.ThemeContext);
+                this._indicator.style.color = INDICATOR_COLORS[theme][this._props.type];
+                this._rootElement.classList.toggle('_dark-input', theme === 'dark');
+            },
+            {immediate: true}
+        );
 
         if (this._props.waypoint !== undefined && this._props.waypoint !== null) {
             this._search({text: this._props.waypoint.toString()}, this._props.waypoint);
@@ -160,12 +162,26 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
         this._detachDom = undefined;
     }
 
-    private _resetInput() {
-        this._inputEl.value = '';
-
+    private _updateIndicatorStatus(status: 'empty' | 'focus' | 'setted'): void {
         this._indicator.innerHTML = '';
-        this._indicator.insertAdjacentHTML('afterbegin', emptyIndicatorSVG);
+        this._indicator.classList.toggle('_empty', status === 'empty');
 
+        switch (status) {
+            case 'empty':
+                this._indicator.insertAdjacentHTML('afterbegin', emptyIndicatorSVG);
+                break;
+            case 'focus':
+                this._indicator.insertAdjacentHTML('afterbegin', focusIndicatorSVG);
+                break;
+            case 'setted':
+                this._indicator.insertAdjacentHTML('afterbegin', settedIndicatorSVG);
+                break;
+        }
+    }
+
+    private _resetInput() {
+        this._inputEl.value = '';
+        this._updateIndicatorStatus('empty');
         this._props.onSelectWaypoint(null);
     }
 
@@ -176,8 +192,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
 
     private _onFocusInput = (_event: FocusEvent) => {
         this.addChild(this._suggestComponent);
-        this._indicator.innerHTML = '';
-        this._indicator.insertAdjacentHTML('afterbegin', focusIndicator[this._props.type]);
+        this._updateIndicatorStatus('focus');
     };
 
     private _onBlurInput = (event: FocusEvent) => {
@@ -196,8 +211,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
             this._resetInput();
             return;
         }
-        this._indicator.innerHTML = '';
-        this._indicator.insertAdjacentHTML('afterbegin', emptyIndicatorSVG);
+        this._updateIndicatorStatus('empty');
     };
 
     private _submitWaypointInput = (event?: SubmitEvent) => {
@@ -236,9 +250,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
             properties: {name: text, description: text},
             geometry: {type: 'Point', coordinates: position.coords}
         };
-
-        this._indicator.innerHTML = '';
-        this._indicator.insertAdjacentHTML('afterbegin', settedIndicator[this._props.type]);
+        this._updateIndicatorStatus('setted');
         this._props.onSelectWaypoint({feature});
     }
 
@@ -249,8 +261,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
             this._inputEl.value = feature.properties.name;
             feature.geometry.coordinates = reverseGeocodingCoordinate;
         }
-        this._indicator.innerHTML = '';
-        this._indicator.insertAdjacentHTML('afterbegin', settedIndicator[this._props.type]);
+        this._updateIndicatorStatus('setted');
         this._props.onSelectWaypoint({feature});
     }
 

src/controls/MMapRouteControl/index.css

@@ -140,6 +140,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    color: #34374a;
 
     svg {
         position: relative;
@@ -218,3 +219,50 @@
         background-color: #e5fd30;
     }
 }
+
+/* dark theme styles */
+.mappable--route-control._dark {
+    .mappable--route-control_parameters {
+        background: #1d1e1f;
+        box-shadow:
+            0px 4px 12px 0px rgba(18, 20, 26, 0.22),
+            0px 4px 24px 0px rgba(18, 20, 26, 0.14);
+    }
+    .mappable--route-control_modes {
+        .mappable--route-control_modes__container {
+            background: rgba(250, 251, 255, 0.04);
+        }
+
+        input[type='radio']:checked + label {
+            background: #1d1e1f;
+            color: #f2f5fa;
+        }
+    }
+    .mappable--route-control_actions button {
+        color: #7d90f0;
+
+        &:disabled {
+            color: #46464d;
+        }
+    }
+    .mappable--route-control_info {
+        border: 1px solid #313133;
+        background: #1d1e1f;
+        box-shadow:
+            0px 4px 12px 0px rgba(18, 20, 26, 0.22),
+            0px 4px 24px 0px rgba(18, 20, 26, 0.14);
+
+        .mappable--route-control_info_container__value {
+            color: #f2f5fa;
+        }
+        .mappable--route-control_info_error__icon {
+            background: #4f1f24;
+        }
+        .mappable--route-control_info_error__label {
+            color: #f2f5fa;
+        }
+        .mappable--route-control_info_loading {
+            color: #f2f5fa;
+        }
+    }
+}

src/controls/MMapRouteControl/index.ts

@@ -126,6 +126,14 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
             },
             {immediate: true}
         );
+        this._watchContext(
+            mappable.ThemeContext,
+            () => {
+                const {theme} = this._consumeContext(mappable.ThemeContext);
+                this._rootElement.classList.toggle('_dark', theme === 'dark');
+            },
+            {immediate: true}
+        );
     }
 
     protected _onDetach(): void {