Prism.jsでシンタックスハイライトしようとしてる、ライブラリのimportは条件分岐できるのか

ライブラリの import を条件分岐できる？

やりたかったことのひとつに、記事内のコード記述部にシンタックスハイライトをつけたいというのがあったので、とりあえず調べている。

いくつか記事を読むと大体 Prism.js がおすすめされているので、まあひとまず気楽にと思って Prism.js を入れてみた。

公式ページの個性が強い。

ここらへんの記事を参考に prismjs(と@types/prismjs)を追加して、シンタックスハイライトを行いたい[id].tsx内の useEffect でPrism.highlightAll()を呼んでみたがうまくいかなかった。

どうやら_app.tsxにスタイルを import しなくてはいけないらしい。

import 'prismjs/themes/prism-tomorrow.css'みたいに CSS を import しているんだけど、ダークモードの場合は見やすさを考慮して色合いを変更したい。

となった場合、ダークモード時だけ別の CSS を import するといった必要があると思うんだけど、どうやればいいか分からない。

「ダークモードかどうか」は、next-themesのconst { theme } = useTheme()で取れるはずだが、この theme を条件に import を分岐させるというのはできるのだろうか。

少し調べた感じだと、

;(async () => {
  if (condition) {
    await import('/path/to/module')
  }
})()

のような形でできそうだけど、node_modules に入っているライブラリでもできるのかな。

もしくは、両方を import して変数に格納して、条件によって適用させるほうを変えるというやり方が正しいのかもしれない(こっちのほうが正統派な感じがある)