Idea: custom stylesheets without URL

[kwaa]

Hello, I‘m trying to switch from Utterances to Giscus.

since my blog uses DaisyUI, Its theme color is dynamic like this:

[data-theme=cupcake] {
  --p: 183 47.4% 59%;
  --pf: 183 47.2% 49%;
  --pc: 0 0% 100%;
}

it is very troublesome to be set in advance, so I hope to be able to directly set stylesheets through attributes & postMessage:

<script src="https://giscus.app/client.js"
  ...
  data-css="stylesheets here"
  ...>
</script>

// and...

const sendMessage = (message) => {
  const iframe = document.querySelector('iframe.giscus-frame');
  if (!iframe) return;
  iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
}

sendMessage({
  setConfig: {
    css: 'stylesheets here'
  }
})

then I can do:

const sendThemeColors = (el = getComputedStyle(document.documentElement)) =>
  sendMessage({
    setConfig: {
      css: `:root ${JSON.stringify(
        Object.fromEntries(
          ['p', 'pf', 'pc', ...].map(v => [`--${v}`, el.getPropertyValue(`--${v}`).slice(1)] ?? [])
        )
      ).replaceAll('"', '')
       .replaceAll(',', '; ')
       .replaceAll(':', ': ')}`,
    },
  })

if u think it's a good idea, I would be happy to try implement this feature and pull request. :)

[kwaa]

if u think it's a good idea, I would be happy to try implement this feature and pull request. :)

UPDATE: I temporarily give up, this is difficult for me.