logseq / plugins

Documentation site of Logseq plugins
https://plugins-doc.logseq.com/
20 stars 4 forks source link

🧩 logseq.provideStyle #26

Open utterances-bot opened 4 months ago

utterances-bot commented 4 months ago

https://plugins-doc.logseq.com/logseq/provideStyle

YU000jp commented 4 months ago

How to toggle CSS in plugin settings

import { LSPluginBaseInfo } from '@logseq/libs/dist/LSPlugin.user'

const keyCssA = "cssA"

// first load
if(logseq.settings!.configBooleanA === true) provideCssA()

// Changed
logseq.onSettingsChanged(async (newSet: LSPluginBaseInfo['settings'], oldSet: LSPluginBaseInfo['settings']) => {

    if(newSet.configBooleanA === true && oldSet.configBooleanA === false){
   provideCssA()
   } else
       if (newSet.configBooleanA === false && oldSet.configBooleanA === true){
   removeProvideCss(keyCssA)
   }

}

// Set <style>
const provideCssA = () => {
logseq.provideStyle({
key: keyCssA, // A plugin-specific key is added to this keyword.
style: `
/* CSS here */

`})
}

// Remove <style>
const removeProvideCss = (className: string) => {
  const doc = parent.document.head.querySelector(`style[data-injected-style^="${className}"]`) as HTMLStyleElement | null
  if (doc) doc.remove()
}