OctoPrint UI Layout/Theme Modification

Plugins
1

I'm looking for ways to modify the user interface of Octoprint to make it a dark theme and fit screens properly. Best case scenario one tool applies the dark theme, make a mobile version, and a version to fit all screens. I know that Themeify and TouchUi exist, but I feel neither one gets the job done super well, and I'm looking for something that builds on the concept. I have some training in web development focusing on UI (css, etc.) so I'm not afraid to get my hands dirty and build something. Before I do start trying to build something for myself I figured I should ask the people who know things if something already exists.

If it's the case that nothing exists in the wild already, I'd like to take on the project, but honestly, I don't really know much about the inner working of Octoprint and how it is coded. I'll probably need to learn some languages and such and get a decent understanding of how and where UI elements are generated for OctoPrint proper and plugins that people install. It's a lot to wrap my brain around and I don't really know where to start. If you know a bit about this stuff and can help me or point me to high quality documentation I would very much be thankful.

TL;DR want to find or build a high quality dark reskin for the OctoPrint UI compatible with mobile & desktop. Never made a plugin before and am seeking direction/ guidance.

2

The two plugins you listed are the most advanced styling options I've seen for octoprint. You may want to look into how themeify works. The best place you'll find is the docs and the src on github. The major ui framework if I'm not mistaken is bootstrap 2.

3

I think I would caution anyone who's attempting to write a major "makeover" UI for the OctoPrint interface. Robo 3D went that route and ended up with miles of spaghetti code which nobody later could figure out.

Themeify is awesome and comes with a dark theme option right at the top of the Settings screen. I'm guessing that it works in concert with the dark theme mode of OctoPrint and builds onto this. As you can see, it looks great and is hardly any difficulty at all.

Search the forum for "Pimp my web interface" to see all the things we've collected together on this topic.

4

Worked through that tread today. It got me about 85% of the way there! Thanks for that! Just a few unmentioned things that I'll post about there.

Mobile via TouchUi is decent, though I wish I could change some colors and such.

Thanks for lending me your brains!