diff --git a/src/App.vue b/src/App.vue
index 90f2e9b6..451d4ec1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -226,6 +226,12 @@ export default defineComponent({
     root.style.setProperty('--color-primary-select-light', `${colorPrimary}40`);
     root.style.setProperty('--plyr-color-main', colorPrimary);
 
+    // Set theme color for native part
+    nativex.setThemeColor?.(
+      getComputedStyle(document.body).getPropertyValue('--color-main-background'),
+      document.body.hasAttribute('data-theme-dark')
+    );
+
     // Register sidebar metadata tab
     globalThis.OCA?.Files?.Sidebar?.registerTab(
       new globalThis.OCA.Files.Sidebar.Tab({
diff --git a/src/native.ts b/src/native.ts
index 8ebdf803..19ca26e2 100644
--- a/src/native.ts
+++ b/src/native.ts
@@ -10,6 +10,7 @@ type NativePromise<T> = (call: string, arg: T) => void;
  */
 export type NativeX = {
   isNative: () => boolean;
+  setThemeColor: (color: string, isDark: boolean) => void;
   getLocalDays: NativePromise<string>;
   getLocalByDayId: NativePromise<string>;
   getJpeg: NativePromise<string>;
@@ -80,6 +81,11 @@ globalThis.nativexr = (call: string, resolve?: string, reject?: string) => {
  */
 export const has = () => !!nativex;
 
+/**
+ * Change the theme color of the app.
+ */
+export const setThemeColor: typeof nativex.setThemeColor = nativex?.setThemeColor.bind(nativex);
+
 /**
  * Gets the local days array.
  *