logseq有light和dark两种主题模式，如果我们要让我们的插件在不同主题的下显示不同的配色。主要思路是通过获得logseq当前的状态。并改变当前html所对应的css。
实现
在无框架下的实现方式
我们在之前之前写的上进行修改让在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中看看效果，不同主题成功切换了不同的配色。
ps：遇到一些windicss中的颜色无法使用，目前还没有找到原因。
