起因

突然想起来之前移植主题 Hingle 的夜间模式和halo的评论模块不搭。就算开启了夜间模式，评论那块区域还是该白白，该黑黑。

那不伸手就来

本想着重写下布局覆盖下咯，但想了想还是算了，在halo文档里发现还有另一款评论组件halo-comment-normal，而且是有支持夜间模式的，赶紧换上。只需要把这货的class 在 light or dark 切换下不就好了吗，简直不要太方便。

容我再想想

接下来就打脸了，不管用 css 定位还是 xpath 定位，都找不到这货，可他就是看得见摸不着，以至于让我怀疑我的 css 和 xpath 是不是写错了…

后来检查页面元素的时候发现个不同寻常的东西shadow-root，它将整个组件的元素的都包裹起来了。emmm…好像是第一次注意到这个东西，那我也不琢磨了，先 右键 -> 复制 -> 复制 JS 路径 复制下来看看

document.querySelector("#\\31 07").shadowRoot.querySelector("#halo-comment")

试了下，果然阔以。

又学到一招

遇到要定位shadow-root里头的元素时，需先定位到它的外层如<halo-comment id="107" type="post">,然后使用.shadowRoot进入到内层再定位内层的元素。这里要做下改动，改成这样才能定位到其他页面的评论组件(既然拿到了那就顺便给个变量存一下啦）。

comment_box = document.querySelector("halo-comment").shadowRoot.querySelector("#halo-comment")

拿到到元素了之后，class 加加减减就好啦

comment_box.classList.remove("dark");
comment_box.classList.add("light");