适配logseq主题

logseq有light和dark两种主题模式，如果我们要让我们的插件在不同主题的下显示不同的配色。主要思路是通过获得logseq当前的状态。并改变当前html所对应的css。

实现

在无框架下的实现方式

我们在之前之前写的renderer组件上进行修改让在dark模式下显示红色，light模式下显示黑色。

修改index.ts

  logseq.App.onMacroRendererSlotted(({ slot, payload} ) => {
    const [type,name,color] = payload.arguments

    // 这里是新增的代码
    const theme = top?.document
      .querySelector("html")
      ?.getAttribute("data-theme") as typeof mode) ??
      (matchMedia("prefers-color-scheme: dark").matches ? "dark" : "light");
		//
    
    if (type !== ':hello') return
    logseq.provideUI({
      key: 'hello',
      reset: true,
      slot, template: `
      <div style="background-color: ${ theme === "dark"?"red":"green" }" class="hello"
      data-block-uuid="${payload.uuid}"
      data-on-click="msg" >
        hello! ${name}
      </div>  
     `,
    })
  })

这段新增的代码来自logseq-plugin-heatmap的实现。我们这里直接借用。

修改下面组件的代码，让他判断当前的theme去选择css颜色。

现在看看效果

在logseq-plugin-template-react下的实现方式

这个手脚架自带了windi CSS，所以我们将用windi CSS实现。同时我们将参考logseq-plugin-heatmap的实现。

在utils.ts中定义我们自己的hook。这个hook包装了logseq的api。

export const useThemeMode = () => {
  const isMounted = useMountedState();
  const [mode, setMode] = React.useState<"dark" | "light">("light");
  React.useEffect(() => {
    setMode(
      (top?.document
        .querySelector("html")
        ?.getAttribute("data-theme") as typeof mode) ??
        (matchMedia("prefers-color-scheme: dark").matches ? "dark" : "light")
    );
    logseq.App.onThemeModeChanged((s) => {
      console.log(s);
      if (isMounted()) {
        setMode(s.mode);
      }
    });
  }, [isMounted]);

  return mode;
};

在App.tsx中

...
import { useAppVisible, useThemeMode } from "./utils";
...


function App() {
    ...
    const themeMode = useThemeMode();
  ...
  <main
          className={`absolute inset-0 ${themeMode}`}
  ...
}

这样当logseq中的主题改变时，main的css也跟着改变。把css写在className是windi CSS的功能。

当然这才刚刚开始，这只是css中标识着dark和light的值跟着logseq一直改变而已。我们还要为我们的页面写不同的配色的css。我们以第四章中的create table插件为例。

在dashborad.css中修改，对应的是你组件的css，light和dark对应不同颜色的背景

.table-root {
    position: absolute;
    display: flex;
    width: 250px;
    height: 150px;
    border-radius: 5px;
    @apply light:bg-blue-500 dark:bg-gray-300;
}

这里是windi CSS的语法。我们在logseq中看看效果，不同主题成功切换了不同的配色。

logse为dark时

logseq为light时

ps：遇到一些windicss中的颜色无法使用，目前还没有找到原因。