Merge pull request #14 from Gamboster/rastajpa/feat/dark-mode

Smooth transitions - navigation bar

package.json

@@ -145,6 +145,7 @@
     "cordova-plugin-globalization": "1.0.9",
     "cordova-plugin-inappbrowser": "3.1.0",
     "cordova-plugin-ionic-keyboard": "2.1.3",
+    "cordova-plugin-navigationbar-color": "0.0.9",
     "cordova-plugin-qrscanner": "3.0.1",
     "cordova-plugin-screen-orientation": "3.0.2",
     "cordova-plugin-spinner-dialog": "1.3.1",
@@ -265,4 +266,4 @@
   "prettier": {
     "singleQuote": true
   }
-}
+}

src/providers/app/app.ts

@@ -84,7 +84,6 @@ export class AppProvider {
     this.persistence.load();
     await this.config.load();
     await this.persistence.getAppTheme().then(value => {
-      if (!value) this.persistence.setAppTheme('light-theme');
       this.appTheme = new BehaviorSubject(value);
     });
     this.language.load();

src/theme/dark.scss

@@ -12,6 +12,10 @@
   // Home Messages
   $message-background-dark-theme: #121212;
 
+  @mixin transition {
+    transition: background-color, color, 250ms cubic-bezier(0, 0, 0.3, 0.3) !important;
+  }
+
   // General -----
   ion-content {
     background-color: $background-color-dark-theme;
@@ -31,19 +35,23 @@
   .toolbar-background-md {
     background: $background-color-dark-theme;
     color: $text-color-dark-theme;
+    @include transition();
   }
 
   .toolbar-title {
     color: $text-color-dark-theme;
+    @include transition();
   }
 
   .header .toolbar-background {
     background-color: $background-color-dark-theme;
+    @include transition();
   }
   .tabs-md,
   .tabs-ios {
     .tabbar {
       background: $background-color-dark-theme;
+      @include transition();
     }
   }
   .swiper-pagination-bullet-active {
@@ -53,6 +61,11 @@
     background-color: #4f4f4e;
   }
 
+  button.item.activated,
+  .item-md.activated {
+    background-color: #4f4f4e;
+  }
+
   ion-searchbar {
     .searchbar-input-container {
       input.searchbar-input {
@@ -64,6 +77,7 @@
       }
     }
   }
+
   // Lists -----
   .bp-list {
     .item {
@@ -72,6 +86,7 @@
         border: 0;
         background-color: $background-color-dark-theme;
         color: $text-color-dark-theme;
+        @include transition();
       }
     }
     .main-label {

src/theme/light.scss

@@ -1,2 +1,35 @@
-// .light-theme {
-// }
+.light-theme {
+  // Uses default values. This is just to make a smooth transition between themes
+  @mixin transition {
+    transition: background-color, color, 250ms cubic-bezier(0, 0, 0.3, 0.3) !important;
+  }
+
+  // General -----
+  .toolbar-background-md {
+    @include transition();
+  }
+
+  .toolbar-title {
+    @include transition();
+  }
+
+  .header .toolbar-background {
+    @include transition();
+  }
+  .tabs-md,
+  .tabs-ios {
+    .tabbar {
+      @include transition();
+    }
+  }
+
+  // Lists -----
+  .bp-list {
+    .item {
+      &.item-ios,
+      &.item-md {
+        @include transition();
+      }
+    }
+  }
+}