Themes/skins added to UI Customizer

I'm happy announce that I have just added a much requested feature to my plugin UI Customizer (UI Customizer) ... Themes!

There is 6 themes included at the moment but i'm planning to add more and the themes are going to be updated/handled without updating the plugin in a future version.

There is thumbs of the themes here : OctoPrint-UICustomizer/octoprint_uicustomizer/static/themes/thumbs at main · LazeMSS/OctoPrint-UICustomizer · GitHub

Let me know your ideas and comments.

1 Like

A guide/how-to on creating your own theme and adding it to the plugin would be awesome when you start making those changes for theme updates.

1 Like

Hello,
Could you add a button to import a custom theme ?
I found this plugin last day and its an awesome plugin !
Have a nice day,
Enzo

For now all themes are stored in GitHub - LazeMSS/OctoPrint-UICustomizerThemes: UICustomizer Themes
Basically take a look at: OctoPrint-UICustomizerThemes/red-night.css at 2d24ba6bb007c962d67c8d3e5fc9bae788a934f5 · LazeMSS/OctoPrint-UICustomizerThemes · GitHub and use that as a template

Thanks for your rapid response ! :wave:

1 Like

It would be nice if there was an easy way for other plugins to grab the primary color, background color, text color, dark or light values or something like that of the current theme so that plugins can conform to the theme.

Look at the red night theme. It uses variables. When I have the time I will change all themes to use this method.

But if plugin developers try to avoid using to much custom CSS then most of the standard bs styling should work

I try and only use the default styling, avoiding hard coded colours seems to be the only way.

Eg. For a primary button, class btn btn-primary, or success text is text-success etc.

1 Like

Sorry to ping an old thread but trying to customize my favorite theme based on a specific color per printer (to help with better organization of multiple printers). After I modify the css, what file/folder location do I need to go to so I can upload and test the modified theme?

Technically you can copy/paste the contents into the advanced CSS section of the plugin's settings just to test with.

2 Likes

That is probably exactly what I needed lol. Thank you!