make status bar dark & readme

README.md

@@ -0,0 +1,9 @@
+# GPS Info
+
+This is a demo app built for CapacitorJS. It's a simple GPS tracker that works in the browser and on both mobile platforms.
+
+It's inspired by [GPS Data](https://apps.apple.com/app/id1076838348).
+
+## Screen
+
+![Screenshot](./.github/screen.png)

android/app/capacitor.build.gradle

@@ -13,6 +13,7 @@ dependencies {
     implementation project(':capacitor-clipboard')
     implementation project(':capacitor-geolocation')
     implementation project(':capacitor-preferences')
+    implementation project(':capacitor-status-bar')
 
 }
 

android/capacitor.settings.gradle

@@ -13,3 +13,6 @@ project(':capacitor-geolocation').projectDir = new File('../node_modules/.pnpm/@
 
 include ':capacitor-preferences'
 project(':capacitor-preferences').projectDir = new File('../node_modules/.pnpm/@capacitor+preferences@4.0.2_@capacitor+core@4.6.1/node_modules/@capacitor/preferences/android')
+
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../node_modules/.pnpm/@capacitor+status-bar@4.1.1_@capacitor+core@4.6.1/node_modules/@capacitor/status-bar/android')

capacitor.config.ts

@@ -4,6 +4,7 @@ const config: CapacitorConfig = {
   appId: 'io.nicco.app.gps',
   appName: 'GPS Info',
   webDir: 'build',
+  backgroundColor: '#180b2e',
   bundledWebRuntime: false,
   // server: {
   //   url: 'http://127.0.0.1:5173',

ios/App/Podfile

@@ -15,6 +15,7 @@ def capacitor_pods
   pod 'CapacitorClipboard', :path => '../../node_modules/.pnpm/@capacitor+clipboard@4.1.0_@capacitor+core@4.6.1/node_modules/@capacitor/clipboard'
   pod 'CapacitorGeolocation', :path => '../../node_modules/.pnpm/@capacitor+geolocation@4.1.0_@capacitor+core@4.6.1/node_modules/@capacitor/geolocation'
   pod 'CapacitorPreferences', :path => '../../node_modules/.pnpm/@capacitor+preferences@4.0.2_@capacitor+core@4.6.1/node_modules/@capacitor/preferences'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/.pnpm/@capacitor+status-bar@4.1.1_@capacitor+core@4.6.1/node_modules/@capacitor/status-bar'
 end
 
 target 'App' do

package.json

@@ -33,6 +33,7 @@
     "@capacitor/core": "^4.6.1",
     "@capacitor/geolocation": "^4.1.0",
     "@capacitor/ios": "^4.6.1",
-    "@capacitor/preferences": "^4.0.2"
+    "@capacitor/preferences": "^4.0.2",
+    "@capacitor/status-bar": "^4.1.1"
   }
 }

pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   '@capacitor/geolocation': ^4.1.0
   '@capacitor/ios': ^4.6.1
   '@capacitor/preferences': ^4.0.2
+  '@capacitor/status-bar': ^4.1.1
   '@sveltejs/adapter-auto': ^1.0.0
   '@sveltejs/adapter-static': ^1.0.1
   '@sveltejs/kit': ^1.0.7
@@ -31,6 +32,7 @@ dependencies:
   '@capacitor/geolocation': 4.1.0_@capacitor+core@4.6.1
   '@capacitor/ios': 4.6.1_@capacitor+core@4.6.1
   '@capacitor/preferences': 4.0.2_@capacitor+core@4.6.1
+  '@capacitor/status-bar': 4.1.1_@capacitor+core@4.6.1
 
 devDependencies:
   '@capacitor/cli': 4.6.1
@@ -130,6 +132,14 @@ packages:
       '@capacitor/core': 4.6.1
     dev: false
 
+  /@capacitor/status-bar/4.1.1_@capacitor+core@4.6.1:
+    resolution: {integrity: sha512-3wosxMD1XuIFz88+c2GdVEHSJV6u7suOeKQjyWf3zf9eFr622Sg+udZqDbC0dtTWXw97BWyCjv3r1EYJw7XnIA==}
+    peerDependencies:
+      '@capacitor/core': ^4.0.0
+    dependencies:
+      '@capacitor/core': 4.6.1
+    dev: false
+
   /@esbuild/android-arm/0.16.15:
     resolution: {integrity: sha512-JsJtmadyWcR+DEtHLixM7bAQsfi1s0Xotv9kVOoXbCLyhKPOHvMEyh3kJBuTbCPSE4c2jQkQVmarwc9Mg9k3bA==}
     engines: {node: '>=12'}

src/routes/+layout.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+  import { StatusBar, Style } from '@capacitor/status-bar'
+
   import '../app.css'
   import '../fonts.css'
+
+  StatusBar.setStyle({ style: Style.Dark })
 </script>
 
 <div class="px-8 py-16">