BluePower

This will forever be recorded as one of the most exciting events to participate in for my whole life. I’ve never been this happy and excited before. It is fun and intriguing just to be able to explore and draw a bunch of pixels into a public canvas just like grabbing squares (pixels) and putting it into a giant block of land (the canvas) to draw art with.

Great job! 😃

Alternate solution: This one doesn’t need the replacing of the [Defautl...Style] variable blocks in the chat options, and you won’t need to change the CSS styles for both the light and dark mode configurations. All you need is to create a list which consists of color palettes for both light and dark mode for your generator:

colorVars
  light
    bgColor = #f9f9f9
    messageBgColor = #f8f8f8
    textColor = #191713
    borderColor = #c1bcb9
    inputColor = #efefef
  dark
    bgColor = #1e1f20
    messageBgColor = #070707
    textColor = #e6e8ec
    borderColor = #313638
    inputColor = #101010ad

And then we need an additional function since we’re going to spam a lot of adapting-with-the-mode checks inside the variable blocks:

adaptWithMode(v) =>
  return colorVars[isDarkMode ? "dark" : "light"][v];

And then in your style configs, still in list code, modify it so that the background, border and color properties reference those list variables with that function, pretty much like this:

DefautlmessageBubbleStyle = font-family: "Work Sans"; font-size: 13.5px; background: [adaptWithMode("bgColor")]; color: [adaptWithMode("textColor")]; border-radius: 10px; padding: 10px; margin: 10px; margin-block: 25px; border: 1px solid [adaptWithMode("borderColor")]; margin: 0;
DefautmessageFeedStyle = background-color: [adaptWithMode("messageBgColor")]; background-size: contain, cover; background-repeat: no-repeat; background-position: center, center; overflow-x: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px; 
DefautinputAreaStyle = font-family: "Work Sans"; background: [adaptWithMode("inputColor")]; color: [adaptWithMode("textColor")]; padding: 10px; resize: none; border: 0;
DefautsubmitButtonStyle = font-family: "Work Sans"; font-size: 13.5px; background: [adaptWithMode("inputColor")]; color: [adaptWithMode("textColor")]; height: 50px; border: none; user-select: none; flex-grow: 1;
DefaultcontainerStyle = width: 100%; height: 100%;
DefautfullscreenButtonStyle = "Work Sans"; font-size: 13.5px; border: none; background: [adaptWithMode("inputColor")]; color: [adaptWithMode("textColor")]; cursor: pointer; user-select: none;
DefautsettingsButtonStyle = "Work Sans"; font-size: 13.5px; border: none; background: [adaptWithMode("inputColor")]; color: [adaptWithMode("textColor")]; cursor: pointer; user-select: none;

The last thing to do is to add the isDarkMode, reloadChatFrames() function and then assign the dark mode button as I’ve said before and you’re done!

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.