Suggestions for the Perchance Comments Plugin.

Okay I just found a trick to make the comments plugin use different appropriate custom styles that matches to the light/dark mode configuration. (There's an alternate solution down below)

Now, I see in the ai-chat-modern generator there isn't a variable that detects whether the dark mode is on or off, so to create one put this in the list code:

isDarkMode = [document.body.classList.contains("dark")]

And then you can make a default themes list that consists of the items light and dark accordingly, and then move all the style configurations (except the Defautwidth, Defautheight and DefaultloadFonts) as the child items on your generator like this:

DefaultThemes
  light
    DefautlmessageBubbleStyle = font-family: "Work Sans"; font-size: 13.5px; background: #f9f9f9; color: #191713; border-radius: 10px; padding: 10px; margin: 10px; margin-block: 25px; border: 1px solid #c1bcb9; margin: 0;
    DefautmessageFeedStyle = background-color: #f8f8f8; background-size: contain, cover; background-repeat: no-repeat; background-position: center, center; overflow-x: auto; display: flex; flex-direction: column-reverse; gap: 10px; padding: 10px; 
    ...
  dark
    DefautlmessageBubbleStyle = font-family: "Work Sans"; font-size: 13.5px; background: #1e1f20; color: #e6e8ec; border-radius: 10px; padding: 10px; margin: 10px; margin-block: 25px; border: 1px solid #313638; margin: 0;
    DefautmessageFeedStyle = background-color: #070707; background-size: contain, cover; background-repeat: no-repeat; background-position: center, center; overflow-x: auto; display: flex; flex-direction: column-reverse; gap: 10px; padding: 10px; 
    ...

(I've already made the full code for the DefaultThemes list that you can take a look here)

And from here you can replace the [Defautl...Style] variable blocks in the chat options to follow with the light/dark mode configuration. If that'd be too tedious to find and replace each of them manually, I've built a set of regex that can be entered in the find and replace field (press Ctrl+H) of the list code only once:

Replace: /\[(Defaut.*Style)\]/g

With: [DefaultThemes[isDarkMode ? "dark" : "light"].$1]

So the chat options should now look like this:

chatOne
  replacedDuringUpdate = true
  messageBubbleStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautlmessageBubbleStyle]
  messageFeedStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautmessageFeedStyle]
  inputAreaStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautinputAreaStyle]
  submitButtonStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautsubmitButtonStyle]
  containerStyle = [DefaultcontainerStyle]
  fullscreenButtonStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautfullscreenButtonStyle]
  settingsButtonStyle = [DefaultThemes[isDarkMode ? "dark" : "light"].DefautsettingsButtonStyle]
  ...

Oh, and we also need the comments plugin to match to the appropriate mode right when the mode is switched, so we're going to make a function that updates the chat frames:

reloadChatFrames() =>
  for (let cpel of document.querySelectorAll("#chat, #custom-chat")) {
    update(cpel);
  }

And then, moving on to HTML code panel, assign the light/dark mode toggle event so that the function runs after the darkMode() like this:

<button onclick="darkmode(); reloadChatFrames()">
  <i class="fa-solid fa-moon" aria-hidden="true"></i>
  <i class="fa-solid fa-sun" aria-hidden="true"></i>
</button>

Also, if you want the loading screen to also match with the mode, you can add this into the CSS style:

  .__perchance-comments-loading-facade-12345 {
    background: var(--vanilla-velour) !important;
  }
  .dark .__perchance-comments-loading-facade-12345 {
    background: #181818 !important;
  }

I might create a new example out of this that not only demonstrates this behavior that is applicable to all generators, but also shows that you can have multiple different styles inside the comments plugin, not just light and dark mode custom styles.