Added material you color pulling android

.vscode/settings.json

@@ -11,5 +11,6 @@
     "i18n-ally.keystyle": "nested",
     "cSpell.words": [
         "Materialious"
-    ]
+    ],
+    "java.configuration.updateBuildConfiguration": "interactive"
 }

materialious/android/app/build.gradle

@@ -37,6 +37,7 @@ dependencies {
     implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
     implementation project(':capacitor-android')
     testImplementation "junit:junit:$junitVersion"
+    implementation 'com.google.android.material:material:1.12.0'
     androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
     androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
     implementation project(':capacitor-cordova-android-plugins')

materialious/android/app/src/main/java/us/materialio/app/ColorTheme.java

@@ -0,0 +1,47 @@
+package us.materialio.app;
+
+import android.content.Context;
+import android.content.res.TypedArray;
+
+import com.getcapacitor.annotation.CapacitorPlugin;
+import com.getcapacitor.PluginMethod;
+import com.getcapacitor.PluginCall;
+import com.getcapacitor.Plugin;
+import com.getcapacitor.JSObject;
+import com.google.android.material.color.DynamicColors;
+
+@CapacitorPlugin(name = "ColorTheme")
+public class ColorTheme extends Plugin {
+    @PluginMethod()
+    public void getColorPalette(PluginCall call) {
+        JSObject colorPalette = new JSObject();
+
+        if (DynamicColors.isDynamicColorAvailable()) {
+            Context dynamicColorContext = DynamicColors.wrapContextIfAvailable(getContext(), com.google.android.material.R.style.ThemeOverlay_Material3_DynamicColors_DayNight);
+
+            int[] attrsToResolve = {
+                    com.google.android.material.R.attr.colorPrimary,
+                    com.google.android.material.R.attr.colorOnPrimary,
+                    com.google.android.material.R.attr.colorSecondary,
+                    com.google.android.material.R.attr.colorAccent
+            };
+
+            try {
+                TypedArray ta = dynamicColorContext.obtainStyledAttributes(attrsToResolve);
+
+                colorPalette.put("primary", ta.getColor(0,0));
+                colorPalette.put("onPrimary", ta.getColor(1,0));
+                colorPalette.put("secondary", ta.getColor(2,0));
+                colorPalette.put("accent", ta.getColor(3,0));
+
+                ta.recycle();
+
+                call.resolve(colorPalette);
+            } catch (Exception e) {
+                call.reject("Unable to fetch dynamic color");
+            }
+        } else {
+            call.reject("Dynamic color not available");
+        }
+    }
+}

materialious/android/app/src/main/java/us/materialio/app/MainActivity.java

@@ -1,5 +1,13 @@
 package us.materialio.app;
 
+import android.os.Bundle;
+
 import com.getcapacitor.BridgeActivity;
 
-public class MainActivity extends BridgeActivity {}
+public class MainActivity extends BridgeActivity {
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        registerPlugin(ColorTheme.class);
+        super.onCreate(savedInstanceState);
+    }
+}

materialious/android/app/src/main/res/values/styles.xml

@@ -2,11 +2,7 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+    <style name="AppTheme" parent="Theme.Material3.DayNight">
-        <!-- Customize your theme here. -->
-        <item name="colorPrimary">@color/colorPrimary</item>
-        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
-        <item name="colorAccent">@color/colorAccent</item>
     </style>
 
     <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">

materialious/src/.d.ts

@@ -1 +1 @@
-declare module 'virtual:pwa-info';
+declare module 'virtual:pwa-info';

materialious/src/lib/android/plugins/ColorTheme.ts

@@ -0,0 +1,28 @@
+import { registerPlugin } from "@capacitor/core";
+
+export interface ColorTheme {
+  getColorPalette: () => Promise<{
+    primary: number;
+    onPrimary: number;
+    secondary: number;
+    accent: number;
+  }>;
+}
+
+export function convertToHexColorCode(color: number) {
+  // Convert the negative number to a positive unsigned integer
+  const unsignedColor = color < 0 ? color + 0x100000000 : color;
+
+  // Extract the RGB components
+  const r = (unsignedColor >> 16) & 0xff;
+  const g = (unsignedColor >> 8) & 0xff;
+  const b = unsignedColor & 0xff;
+
+  // Convert to hex format and pad with zeros if necessary
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
+}
+
+
+const colorTheme = registerPlugin<ColorTheme>('ColorTheme');
+
+export default colorTheme;

materialious/src/lib/patches/youtubejs.ts

@@ -5,7 +5,7 @@ import { Capacitor } from '@capacitor/core';
 import { BG } from 'bgutils-js';
 import { get } from 'svelte/store';
 import { Innertube, ProtoUtils, UniversalCache, Utils } from 'youtubei.js';
-import { capacitorFetch } from './capacitorFetch';
+import { capacitorFetch } from '../android/http/capacitorFetch';
 
 
 export interface PoTokens {

materialious/src/routes/(app)/+layout.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import { afterNavigate, beforeNavigate, goto } from '$app/navigation';
 	import { navigating } from '$app/stores';
+	import '$lib/android/http/androidRequests';
+	import colorTheme, { convertToHexColorCode } from '$lib/android/plugins/ColorTheme';
 	import { getFeed } from '$lib/Api/index';
 	import type { Notification } from '$lib/Api/model';
 	import { bookmarkletLoadFromUrl, loadSettingsFromEnv } from '$lib/externalSettings';
 	import Logo from '$lib/Logo.svelte';
 	import MiniPlayer from '$lib/MiniPlayer.svelte';
 	import PageLoading from '$lib/PageLoading.svelte';
-	import '$lib/patches/androidRequests';
 	import Search from '$lib/Search.svelte';
 	import Settings from '$lib/Settings.svelte';
 	import {
@@ -184,6 +185,11 @@
 		const themeHex = get(themeColorStore);
 		if (themeHex) {
 			await ui('theme', themeHex);
+		} else if (Capacitor.getPlatform() === 'android') {
+			try {
+				const colorPalette = await colorTheme.getColorPalette();
+				await ui('theme', convertToHexColorCode(colorPalette.primary));
+			} catch {}
 		}
 
 		setTheme();

materialious/svelte.config.js

@@ -6,7 +6,6 @@ const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
-
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
@@ -14,7 +13,7 @@ const config = {
 		adapter: adapter({
 			fallback: 'index.html'
 		})
-	}
+	},
 };
 
 export default config;