Fix: [Capacitor] Set overscroll background color from theme

.gitignore

@@ -30,4 +30,14 @@ __diff_output__
 
 ## PandaCSS
 styled-system
-styled-system-studio
+styled-system-studio
+
+## Custom Capacitor Plugin
+/packages/webview/node_modules
+/packages/webview/.DS_Store
+/packages/webview/xcuserdata/
+/packages/webview/DerivedData/
+/packages/webview/.swiftpm/configuration/registries.json
+/packages/webview/.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata
+/packages/webview/.netrc
+

.prettierignore

@@ -1,3 +1,4 @@
 build
 docs
 LICENSE.md
+packages

android/app/capacitor.build.gradle

@@ -12,6 +12,7 @@ dependencies {
     implementation project(':capacitor-clipboard')
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-status-bar')
+    implementation project(':webview-background')
 
 }
 

android/capacitor.settings.gradle

@@ -10,3 +10,6 @@ project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor
 
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
+
+include ':webview-background'
+project(':webview-background').projectDir = new File('../node_modules/webview-background/android')

eslint.config.js

@@ -116,6 +116,7 @@ export default [
   {
     ignores: [
       'node_modules/**',
+      'packages',
       '**/styled-system/*',
       '**/ios/*',
       '**/android/**',

ios/App/App/AppDelegate.swift

@@ -46,4 +46,5 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
         return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
     }
 
+
 }

ios/App/Podfile

@@ -14,6 +14,7 @@ def capacitor_pods
   pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
+  pod 'WebviewBackground', :path => '../../node_modules/webview-background'
 end
 
 target 'App' do

package.json

@@ -53,6 +53,7 @@
     "allowed-schemes": [
       "https:",
       "git+https:",
+      "file:",
       "npm:",
       "patch:",
       "workspace:"
@@ -133,6 +134,7 @@
     "ts-key-enum": "^2.0.12",
     "use-onclickoutside": "^0.4.1",
     "vite-plugin-html": "^3.2.2",
+    "webview-background": "./packages/webview",
     "workbox-build": "^7.1.1",
     "workbox-core": "^7.1.0",
     "workbox-expiration": "^7.1.0",

packages/webview/.eslintignore

@@ -0,0 +1,2 @@
+build
+dist

packages/webview/.gitignore

@@ -0,0 +1,5 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+/node_modules
+.DS_Store
+.env*.local

packages/webview/.prettierignore

@@ -0,0 +1,2 @@
+build
+dist

packages/webview/.swiftpm/xcode/xcuserdata/matheudewitt.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>SchemeUserState</key>
+	<dict>
+		<key>WebviewBackground.xcscheme_^#shared#^_</key>
+		<dict>
+			<key>orderHint</key>
+			<integer>0</integer>
+		</dict>
+	</dict>
+</dict>
+</plist>

packages/webview/CONTRIBUTING.md

@@ -0,0 +1,52 @@
+# Contributing
+
+This guide provides instructions for contributing to this Capacitor plugin.
+
+## Developing
+
+### Local Setup
+
+1. Fork and clone the repo.
+1. Install the dependencies.
+
+    ```shell
+    npm install
+    ```
+
+1. Install SwiftLint if you're on macOS.
+
+    ```shell
+    brew install swiftlint
+    ```
+
+### Scripts
+
+#### `npm run build`
+
+Build the plugin web assets and generate plugin API documentation using [`@capacitor/docgen`](https://github.com/ionic-team/capacitor-docgen).
+
+It will compile the TypeScript code from `src/` into ESM JavaScript in `dist/esm/`. These files are used in apps with bundlers when your plugin is imported.
+
+Then, Rollup will bundle the code into a single file at `dist/plugin.js`. This file is used in apps without bundlers by including it as a script in `index.html`.
+
+#### `npm run verify`
+
+Build and validate the web and native projects.
+
+This is useful to run in CI to verify that the plugin builds for all platforms.
+
+#### `npm run lint` / `npm run fmt`
+
+Check formatting and code quality, autoformat/autofix if possible.
+
+This template is integrated with ESLint, Prettier, and SwiftLint. Using these tools is completely optional, but the [Capacitor Community](https://github.com/capacitor-community/) strives to have consistent code style and structure for easier cooperation.
+
+## Publishing
+
+There is a `prepublishOnly` hook in `package.json` which prepares the plugin before publishing, so all you need to do is run:
+
+```shell
+npm publish
+```
+
+> **Note**: The [`files`](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#files) array in `package.json` specifies which files get published. If you rename files/directories or add files elsewhere, you may need to update it.

packages/webview/Package.resolved

@@ -0,0 +1,14 @@
+{
+  "pins" : [
+    {
+      "identity" : "capacitor-swift-pm",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/ionic-team/capacitor-swift-pm.git",
+      "state" : {
+        "branch" : "main",
+        "revision" : "2827600e5da84dcfca0339c987e5a8394d6b22f9"
+      }
+    }
+  ],
+  "version" : 2
+}

packages/webview/Package.swift

@@ -0,0 +1,24 @@
+// swift-tools-version: 5.9
+import PackageDescription
+
+let package = Package(
+    name: "WebviewBackground",
+    platforms: [.iOS(.v13)],
+    products: [
+        .library(
+            name: "WebviewBackground",
+            targets: ["WebviewBackgroundPlugin"])
+    ],
+    dependencies: [
+        .package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", branch: "main")
+    ],
+    targets: [
+        .target(
+            name: "WebviewBackgroundPlugin",
+            dependencies: [
+                .product(name: "Capacitor", package: "capacitor-swift-pm"),
+                .product(name: "Cordova", package: "capacitor-swift-pm")
+            ],
+            path: "ios/Sources/WebviewBackgroundPlugin")
+    ]
+)

packages/webview/README.md

@@ -0,0 +1,35 @@
+# webview-background
+
+A small plugin to change the background of a webview.
+
+## Install
+
+```bash
+npm install webview-background
+npx cap sync
+```
+
+## API
+
+<docgen-index>
+
+* [`changeBackgroundColor(...)`](#changebackgroundcolor)
+
+</docgen-index>
+
+<docgen-api>
+<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->
+
+### changeBackgroundColor(...)
+
+```typescript
+changeBackgroundColor(options: { color: string; }) => Promise<void>
+```
+
+| Param         | Type                            |
+| ------------- | ------------------------------- |
+| **`options`** | <code>{ color: string; }</code> |
+
+--------------------
+
+</docgen-api>

packages/webview/WebviewBackground.podspec

@@ -0,0 +1,17 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name = 'WebviewBackground'
+  s.version = package['version']
+  s.summary = package['description']
+  s.license = package['license']
+  s.homepage = package['repository']['url']
+  s.author = package['author']
+  s.source = { :git => package['repository']['url'], :tag => s.version.to_s }
+  s.source_files = 'ios/Sources/**/*.{swift,h,m,c,cc,mm,cpp}'
+  s.ios.deployment_target  = '13.0'
+  s.dependency 'Capacitor'
+  s.swift_version = '5.1'
+end

packages/webview/dist/docs.json

@@ -0,0 +1,31 @@
+{
+  "api": {
+    "name": "WebviewBackgroundPlugin",
+    "slug": "webviewbackgroundplugin",
+    "docs": "",
+    "tags": [],
+    "methods": [
+      {
+        "name": "changeBackgroundColor",
+        "signature": "(options: { color: string; }) => Promise<void>",
+        "parameters": [
+          {
+            "name": "options",
+            "docs": "",
+            "type": "{ color: string; }"
+          }
+        ],
+        "returns": "Promise<void>",
+        "tags": [],
+        "docs": "",
+        "complexTypes": [],
+        "slug": "changebackgroundcolor"
+      }
+    ],
+    "properties": []
+  },
+  "interfaces": [],
+  "enums": [],
+  "typeAliases": [],
+  "pluginConfigs": []
+}

packages/webview/dist/esm/definitions.d.ts

@@ -0,0 +1,5 @@
+export interface WebviewBackgroundPlugin {
+    changeBackgroundColor(options: {
+        color: string;
+    }): Promise<void>;
+}

packages/webview/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+import type { WebviewBackgroundPlugin } from './definitions';
+declare const WebviewBackground: WebviewBackgroundPlugin;
+export * from './definitions';
+export { WebviewBackground };

packages/webview/dist/esm/web.d.ts

@@ -0,0 +1,7 @@
+import { WebPlugin } from '@capacitor/core';
+import type { WebviewBackgroundPlugin } from './definitions';
+export declare class WebviewBackgroundWeb extends WebPlugin implements WebviewBackgroundPlugin {
+    changeBackgroundColor(options: {
+        color: string;
+    }): Promise<void>;
+}

packages/webview/dist/esm/web.js

@@ -0,0 +1,6 @@
+import { WebPlugin } from '@capacitor/core';
+export class WebviewBackgroundWeb extends WebPlugin {
+    async changeBackgroundColor(options) {
+        console.log('Color changed: ', options.color);
+    }
+}

packages/webview/ios/.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+.build
+/Packages
+xcuserdata/
+DerivedData/
+.swiftpm/configuration/registries.json
+.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata
+.netrc

packages/webview/ios/Sources/WebviewBackgroundPlugin/WebviewBackgroundPlugin.swift

@@ -0,0 +1,22 @@
+import Foundation
+import Capacitor
+
+/**
+ * Please read the Capacitor iOS Plugin Development Guide
+ * here: https://capacitorjs.com/docs/plugins/ios
+ */
+@objc(WebviewBackgroundPlugin)
+public class WebviewBackgroundPlugin: CAPPlugin, CAPBridgedPlugin {
+    public let identifier = "WebviewBackgroundPlugin"
+    public let jsName = "WebviewBackground"
+    public let pluginMethods: [CAPPluginMethod] = [
+        CAPPluginMethod(name: "changeBackgroundColor", returnType: CAPPluginReturnPromise)
+    ]
+
+    @objc func changeBackgroundColor(_ call: CAPPluginCall) {
+        let color = call.getString("color") ?? ""
+
+        self.webView?.backgroundColor = UIColor(named: color)
+        self.webView?.scrollView.backgroundColor = UIColor(named: color)
+    }
+}