P5.gui theme change

p5.js Libraries
1

Hey guys, I’ve been playing around with p5.gui to make one of my sims more user friendly. Although p5.gui is incredibly simple to use and I really love the ease of use.

My problem is, it’s colour scheme isn’t exactly the most attractive. I want to change that.

Since p5.gui runs on quicksettings.js I was thinking there may be a way to do it (since you can change the styling of quicksettings). So far I have had no luck :((

Does anyone know how to do it?

Thanks,
Sam

2

Solved:

From the quicksettings GitHub page you can get the stylesheet_black.css (or whatever colour you want)

You can easily copy and paste this under under whatever is in the Stylesheet.css

Once you have your stylesheet set up and all of the necessary you can call the function

QuickSettings.useExtStyleSheet();

which according to the website “Causes QuickSettings to ignore its default styles and instead use whatever QuickSettings stylesheet is on the page. This must be called before creating any panel in order to have any effect.”

this allows us to access the stylesheet instead of the boring default theme.

Now, you can just call the createGui(); function and it since quicksettings is referring to the stylesheet, when quicksettings is called in p5.gui it will have the custom styling.

If you edit the values of the style sheet, you can set custom colours with whatever values you want.

Notes:

  • there is probably a cleaner way to do this than copy and pasting all the files, but I haven’t tried it yet.
  • I assume that you should be able to put colour colour profile in it’s own css file and then make quicksettings refer to that instead. (my method is faster but super messy)
3 Likes