Alternative themes

[lpil]

Hello again!

I was wondering if lms would be open to having alternative front end designs / themes included.

This could be alternative HTML and CSS being included, or just CSS (as it seems a lot more involved to have different HTML judging by the code).

I ask because I would like a slightly prettier user interface than is currently offered. If it turns out lms is something I use every day I may have a go at making an alternative UI and it would be great to not have to replicate all the logic of the existing UI, which works excellently already.

This is more of a speculative question about the direction of the project rather than a request for some work on your end!

Cheers, Louis

[epoupon]

Hi! Of course, any additional theme would be welcome 👍 If your proposal is better than the provided themes, we could as well replace the existing themes (no need to maintain useless stuff). I think theming should be limited to css themes though.

The lms.css file contains common things to the flat theme in use, we may need to isolate them in a separate css file.

Unfortunately, there is currently a limitation that makes theme switching buggy (but the selected theme works fine if you use the "remember me" option)

[GeorgeGedox]

What I would love to see is a switch to a templating engine like Twig for the HTML or fully VueJs implementation that does not embed the HTML/CSS/JS directly into the code but instead renders it, so we could have "theme packages" so we could have full access to customize the UI

[epoupon]

I understand your point. Indeed the usage done of Wt here may lead to html coupling between cpp code and the xml templates, which is definitely questionable. Switching to another engine would be quite a huge change though!

[GeorgeGedox]

I understand that I'm asking for a lot, it was just a suggestion for much later in time. But I would like to work with you to improve the UI/UX of the project. Let me know of a way to get in touch with you, alternatively you can find my contact handles on my website which is on my github profile.

[Maxmystere]

Now that bootswatch is used for the 4.29 should it be easy to add a client/server setting to select which theme we want ? I could submit a PR depending on how @epoupon might want

[epoupon]

Yes v3.29 has been done in order to make LMS easier to theme. The idea would be that replacing the bootstrap.min.css file should be enough. I am afraid we are not quite here though, as some choices I made may be awful in other themes (like link-success for album name for example). We would them need to provide a dedicated css file for each time, specific to LMS (i.e. replace link-success by Lms-release-link and defining it for each theme). Splitting this stuff to ease theming would be much appreciated, the remaining work is a matter of exposing this in the database/settings and UI)

[eddyizm]

Came back to this thread, I have tried a couple of other themes by switching the bootstrap in the browser and am really happy with how they look. Would be as easy as adding the css as options in the code base, then perhaps just set a flag as an option, defaulting to the current css (solar) if no flag is passed? or perhaps a change in the config ?

    std::vector<Wt::WLinkedCssStyleSheet>
    LmsTheme::styleSheets() const
    {
        static const std::vector<Wt::WLinkedCssStyleSheet> files
        {
            {"css/bootstrap.solar.min.css"}, // TODO parametrize this (default
                        {"css/bootstrap.superhero.min.css"}, 
                        {"css/bootstrap.slate.min.css"},
            {"css/lms.css"},
        };

        return files;
    }

# Path to the resources used by the web interface.
wt-resources = "/usr/share/Wt/resources";
docroot = "/usr/share/lms/docroot/;/resources,/css,/images,/js,/favicon.ico";
approot = "/usr/share/lms/approot";
cssstyle ="/css/bootstrap.superhero.min.css"

[epoupon]

Thanks for testing this! I remember I had to hack a bit between primary/secondary colors for the solar theme. Will think about it but I am afraid we have to add an extra indirection to map release/artist colors to colors in the theme? Maybe not since you seem to be happy with the default rendering?

[Maxmystere]

If it's relevant I've been using the darkly skin with some docker volumes trickery and didn't have any issues

[eddyizm]

Thanks for testing this! I remember I had to hack a bit between primary/secondary colors for the solar theme. Will think about it but I am afraid we have to add an extra indirection to map release/artist colors to colors in the theme? Maybe not since you seem to be happy with the default rendering?

Yeah, i think the only place where there is a discrepancy is the playqueue screen which, considering everything else, is more than bearable for me. I just get bored lol