I have noticed that the comments could be styled through the Perchance Panel, however I noticed that the style are not as comprehensive as using traditional CSS would be. It can be easily mitigated by using a CSS file and if there was a way to link the CSS file to the comments plugin. It can be easily achieved as well, if there was an option to write the URL of the CSS file, the comments plugin would only need to append a link with href and rel as style at the end of the iframe to use completely custom and comprehensive CSS.

I have many generators, and in all of them, I use darkmode, and since there were no darkmode buttons for the comments plugin, I just decided to use darkmode as default, however recently I have noticed that some people have eye condition where it is hard for them to read text in darkmode. So it would have been great if the dev could implement a message listener so I could post a message for darkmode from the parent window to the container, of course this would require the comments plugin to handle a darkmode function to apply the dark class to the body inside the iframe. If the dev is consider this, I believe not everyone uses dark as class, so I think making another option for the Perchance Panel as to what the class name could be is great.

Next up, I have thought about images, we upload images in the comments, however what if, we as creators were to predefine sets of images to be used? I think the smarter way would be to look for image links. However the reason I am proposing this is because I wanted to predefine sets of custom emoji, for example, :husk:, I could predefine it and the plugin could format them before sending.

Next, I have thoughts of being able to set up bots. It could be a great innovation. However I do not think this suggestion could be taken into consideration due to its complexity. Bots could be written through JS and the reason I am suggesting this is because I thought of being able to set up an AI using the Perchance AI Text plugin. If the dev is indeed considering this, I believe many people would create their own bots, and thus, there should be a way to share them, which could be done as pure codes, or shared links for files. This suggestion is extremely complex, but this is just my suggestions.

Next, the Perchance Comments Plugin by default has a border, which is completely fine, but I noticed that we are unable to remove that border even if we try to style the container in the Perchance Panel, I am merely bringing this up as a graphical issue, however this, too, should be solved upon being able to use custom comprehensive CSS.

In summary, what I would like are as follows:

  • Custom CSS Linking: I would appreciate adding an option to the Perchance Comments Plugin to allow users to specify a URL for a custom CSS file, allowing comprehensive styling beyond the current options.

  • Dark Mode Accessibility: Implement a message listener for dark mode toggling from the parent window to the plugin container, allowing users to switch between dark and light modes. Additionally, allow customization of the CSS class for dark mode (e.g., .dark).

  • Predefined Images and Custom Emoji: Allow creators to define sets of images to be used in comments. Also, enable the formatting of custom emoji (e.g., :husk:) by predefining them in the plugin.

  • Bots and AI Integration: Though complex, consider adding the ability to set up bots using JavaScript, along with perhaps the ability to use Perchance Plugins. Provide a means to share bot configurations, either as code or shared links for files.

  • Border Styling: Currently, the Perchance Comments Plugin has a default border that cannot be removed even with container styling. This issue should be addressed alongside the ability to use custom CSS.

  • BluePower@sh.itjust.worksEnglish
    1·
    2 months ago

    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!

    • Cocell@lemmy.worldOP
      2·
      2 months ago

      Hm, I think I am running on low power mode, why didn’t I think of that?

      Well, this gave me some ideas though. I don’t plan on using light mode and dark mode variable, I thought about just using variables, and then replace the values of the variables! 😄

      Though I will be eclipsing all of this into my hub, so I wanted to make sure it would work when being imported, do you have any ideas about that?