Theme color dark support (#4235)

Support themeColorDark for Android CloudAPK. Minor fix: app name regexp pattern browser error. Need to merge the CloudAPK itself first: pwa-builder/CloudAPK#120
pwa-builder · Aug 22, 2023 · 6aa5ff8 · 6aa5ff8
1 parent ce1c307
commit 6aa5ff8
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 4 deletions.
diff --git a/apps/pwabuilder-vscode/src/android-interfaces.ts b/apps/pwabuilder-vscode/src/android-interfaces.ts
@@ -94,6 +94,7 @@ export interface AndroidPackageOptions {
   splashScreenFadeOutDuration: number;
   startUrl: string;
   themeColor: string;
+  themeColorDark?: string;
   webManifestUrl: string;
 }
 /**

diff --git a/apps/pwabuilder-vscode/src/library/package-utils.ts b/apps/pwabuilder-vscode/src/library/package-utils.ts
@@ -64,6 +64,7 @@ const advancedAndroidSettings: AndroidPackageOptions = {
   splashScreenFadeOutDuration: 300,
   startUrl: "/",
   themeColor: "#FFFFFF",
+  themeColorDark: "#FFFFFF",
   shareTarget: [] as any,
   webManifestUrl: "https://myapp.com/manifest.json",
 };
@@ -454,6 +455,7 @@ export async function buildAndroidOptions(): Promise<
         splashScreenFadeOutDuration: 300,
         startUrl: manifest.start_url || "/",
         themeColor: manifest.theme_color || "#FFFFFF",
+        themeColorDark: manifest.theme_color || "#FFFFFF",
         shareTarget: manifest.share_target || [],
         webManifestUrl: manifestUrl,
       };

diff --git a/apps/pwabuilder/src/script/components/android-form.ts b/apps/pwabuilder/src/script/components/android-form.ts
@@ -8,6 +8,7 @@ import { AppPackageFormBase } from './app-package-form-base';
 import { getManifestContext } from '../services/app-info';
 import { maxSigningKeySizeInBytes } from '../utils/android-validation';
 import { recordPWABuilderProcessStep, AnalyticsBehavior } from '../utils/analytics';
+import { AppNameInputPattern } from '../utils/constants';
 
 @customElement('android-form')
 
@@ -278,7 +279,7 @@ export class AndroidForm extends AppPackageFormBase {
                 minLength: 3,
                 maxLength: 50,
                 spellcheck: false,
-                pattern: "[^|$@#><)(!&%*]*$",
+                pattern: AppNameInputPattern,
                 validationErrorMessage:
                   'App name must not include special characters and be between 3 and 50 characters',
                 inputHandler: (val: string) => this.packageOptions.name = val
@@ -381,6 +382,17 @@ export class AndroidForm extends AppPackageFormBase {
                   })}
                 </div>
 
+                <div class="form-group">
+                  ${this.renderFormInput({
+                    label: 'Theme dark color',
+                    tooltip: `The theme color used for the Android status bar in your app when the Android device is in dark mode.`,
+                    inputId: 'theme-dark-color-input',
+                    type: 'color',
+                    value: this.packageOptions.themeColorDark,
+                    inputHandler: (val: string) => this.packageOptions.themeColorDark = val
+                  })}
+                </div>
+
                 <div class="form-group">
                   ${this.renderFormInput({
                     label: 'Background color',

diff --git a/apps/pwabuilder/src/script/components/ios-form.ts b/apps/pwabuilder/src/script/components/ios-form.ts
@@ -6,6 +6,7 @@ import { createIOSPackageOptionsFromManifest, emptyIOSPackageOptions } from '../
 import { getManifestContext } from '../services/app-info';
 import { AnalyticsBehavior, recordPWABuilderProcessStep } from '../utils/analytics';
 import { ManifestContext, PackageOptions } from '../utils/interfaces';
+import { AppNameInputPattern } from '../utils/constants';
 
 @customElement('ios-form')
 
@@ -169,7 +170,7 @@ export class IOSForm extends AppPackageFormBase {
                 required: true,
                 spellcheck: false,
                 minLength: 3,
-                pattern: "[^|$@#><)(!&%*]*$",
+                pattern: AppNameInputPattern,
                 // pattern: // NOTE: avoid using a regex pattern here, as it often has unintended consequences, such as blocking non-English names
                 inputHandler: (val: string) => this.packageOptions.name = val
               })}

diff --git a/apps/pwabuilder/src/script/components/oculus-form.ts b/apps/pwabuilder/src/script/components/oculus-form.ts
@@ -12,6 +12,7 @@ import { SigningMode } from '../utils/oculus-validation';
 import { maxSigningKeySizeInBytes } from '../utils/android-validation';
 import { recordPWABuilderProcessStep, AnalyticsBehavior } from '../utils/analytics';
 import { ManifestContext, PackageOptions } from '../utils/interfaces';
+import { AppNameInputPattern } from '../utils/constants';
 
 @customElement('oculus-form')
 
@@ -243,7 +244,7 @@ export class OculusForm extends AppPackageFormBase {
                 required: true,
                 spellcheck: false,
                 minLength:  3,
-                pattern: "[^|$@#><)(!&%*]*$",
+                pattern: AppNameInputPattern,
                 // pattern: // NOTE: avoid using a regex pattern here, as it often has unintended consequences, such as blocking non-English names
                 inputHandler: (val: string) => (this.packageOptions.name = val),
               })}

diff --git a/apps/pwabuilder/src/script/components/windows-form.ts b/apps/pwabuilder/src/script/components/windows-form.ts
@@ -11,6 +11,7 @@ import { AppPackageFormBase, FormInput } from './app-package-form-base';
 import { fetchOrCreateManifest } from '../services/manifest';
 import { AnalyticsBehavior, recordPWABuilderProcessStep } from '../utils/analytics';
 import { ManifestContext, PackageOptions } from '../utils/interfaces';
+import { AppNameInputPattern } from '../utils/constants';
 
 @customElement('windows-form')
 
@@ -412,7 +413,7 @@ export class WindowsForm extends AppPackageFormBase {
                   maxLength: 256,
                   value: this.packageOptions.name,
                   placeholder: 'My Awesome PWA',
-                  pattern: "[^|$@#><)(!&%*]*$",
+                  pattern: AppNameInputPattern,
                   validationErrorMessage:
                     'App name must not include special characters and be between 1 and 256 characters',
                   inputHandler: (val: string) =>

diff --git a/apps/pwabuilder/src/script/services/publish/android-publish.ts b/apps/pwabuilder/src/script/services/publish/android-publish.ts
@@ -113,6 +113,7 @@ export function emptyAndroidPackageOptions(): AndroidPackageOptions {
     splashScreenFadeOutDuration: 300,
     startUrl: '',
     themeColor: '#ffffff',
+    themeColorDark: '#000000',
     webManifestUrl: '',
     fullScopeUrl: ''
   };
@@ -249,6 +250,7 @@ export function createAndroidPackageOptionsFromManifest(manifestContext: Manifes
       new URL(manifestUrlOrRoot)
     ),
     themeColor: manifest.theme_color || '#FFFFFF',
+    themeColorDark: manifest.theme_color || '#000000',
     shareTarget: manifest.share_target,
     webManifestUrl: maniUrl,
     pwaUrl: manifestContext.siteUrl,

diff --git a/apps/pwabuilder/src/script/utils/android-validation.ts b/apps/pwabuilder/src/script/utils/android-validation.ts
@@ -60,6 +60,7 @@ export interface AndroidPackageOptions  extends PackageOptions {
   splashScreenFadeOutDuration: number;
   startUrl: string;
   themeColor: string;
+  themeColorDark?: string;
   webManifestUrl: string;
   fullScopeUrl: string;
   minSdkVersion?: number;

diff --git a/apps/pwabuilder/src/script/utils/constants.ts b/apps/pwabuilder/src/script/utils/constants.ts
@@ -0,0 +1 @@
+export const AppNameInputPattern = '[^\\|\\$\\@\\#\\>\\<\\)\\(\\!\\&\\%\\*]+$';