diff --git a/apps/common/mobile/resources/css/skeleton.css b/apps/common/mobile/resources/css/skeleton.css
index ec4a8adb6..fd4da6d28 100644
--- a/apps/common/mobile/resources/css/skeleton.css
+++ b/apps/common/mobile/resources/css/skeleton.css
@@ -2,6 +2,13 @@ body {
     margin: 0;
 }
 
+body.theme-type-dark {
+    --background-navbar-ios: #232323;
+    --background-navbar-word: #232323;
+    --background-navbar-cell: #232323;
+    --background-navbar-slide: #232323;
+}
+
 .skl-navbar {
     --box-logo-height: 26px;
     --skl-navbar-height: 44px;
@@ -27,19 +34,19 @@ body {
 }
 
 .skl-navbar.skl-navbar--ios {
-    background-color: #f7f7f8;
+    background-color: var(--background-navbar-ios, #f7f7f8);
 }
 
 .skl-navbar.skl-navbar--word.skl-navbar--md {
-    background-color: #446995;
+    background-color: var(--background-navbar-word, #446995);
 }
 
 .skl-navbar.skl-navbar--cell.skl-navbar--md {
-    background-color: #40865c;
+    background-color: var(--background-navbar-cell, #40865c);
 }
 
 .skl-navbar.skl-navbar--slide.skl-navbar--md {
-    background-color: #aa5252;
+    background-color: var(--background-navbar-slide, #aa5252);
 }
 
 .skl-navbar::before {
diff --git a/apps/documenteditor/mobile/src/index_dev.html b/apps/documenteditor/mobile/src/index_dev.html
index da5516e89..b769d12cc 100644
--- a/apps/documenteditor/mobile/src/index_dev.html
+++ b/apps/documenteditor/mobile/src/index_dev.html
@@ -32,6 +32,17 @@
   <!-- built styles file will be auto injected -->
 </head>
 <body>
+    <script>
+        let obj = !localStorage ? {id: 'theme-light', type: 'light'} : JSON.parse(localStorage.getItem("ui-theme"));
+        if ( !obj ) {
+            if ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ) {
+                obj = {id: 'theme-dark', type: 'dark'};
+                localStorage && localStorage.setItem("ui-theme", JSON.stringify(obj));
+            }
+        }
+
+        document.body.classList.add(`theme-type-${obj.type}`);
+    </script>
     <section class="skl-container">
         <div class="skl-navbar skl-navbar--word"></div>
         <div class="skl-lines">
