onThemeChange

• Category: Events
• Relate: onThemeChange
• Dependencies: @lark-base-open/js-sdk
• Last Changed: yesterday

Notice

This function needs to use in Base, please use this website as a plugin in a Base to see the demo.

Demo

Source

Show demo code

demo.vue

<script setup lang="ts">
import { onThemeChange } from "@qww0302/use-bitable";
import { bitable } from "@lark-base-open/js-sdk";
import { ref, onMounted } from "vue";

const theme = ref("LIGHT");

onThemeChange({
  callback: (t) => {
    theme.value = t;
  }
});

onMounted(() => {
  bitable.bridge.getTheme().then((t) => {
    theme.value = t;
  });
});
</script>

<template>
  <div>Current theme: {{ theme }}</div>
</template>

Usage

Type Declarations

import type {
  ThemeModeType,
  IDashboard,
  IBridge,
  IDashboardTheme,
} from "@lark-base-open/js-sdk"
export interface OnThemeChangeOption<T extends IBridge | IDashboard> {
  /**
   * The target object(bridge or dashboard) to get the theme
   *
   * 获取主题的目标对象( bridge 或 dashboard )
   *
   * @default bridge
   * @type {IBridge | IDashboard}
   */
  target?: T
  callback: (theme: T extends IBridge ? ThemeModeType : IDashboardTheme) => void
}
export declare function onThemeChange(
  callback: (theme: ThemeModeType) => void,
): () => void
export declare function onThemeChange(
  option: OnThemeChangeOption<IBridge>,
): () => void
export declare function onThemeChange(
  option: OnThemeChangeOption<IDashboard>,
): void
export declare function onThemeChange<T extends IDashboard | IBridge>(
  option: OnThemeChangeOption<T>,
): void | (() => void)