Theming App - No preview functionality and image does not display Name, Web address, Slogan or Color

[sunjam]

Steps to reproduce

1. Go to enabled Theming App on 12.0.3 as an admin
2. Set custom values on Name, etc.

Expected behaviour

Admin can preview any changes made in their Theming App. Image at the bottom of Theming App (which displays current theme) should also display Name, Web address, Slogan and Color. Image at the bottom of the Theming App can be viewed as a larger, complete reference image... either through a zoom function when you mouse over the image, opening a full screen image in a new browser window, or opening a full screen image in a new browser tab. Any changes can be previewed in the browser or the App while remaining logged in as an administrator.

Actual behaviour

No preview functionality is available. All theme changes are permanent, affect all users immediately and can only be previewed by logging out of the instance. Theming App image only displays current Logo and Login image. Selecting elements in the Theming App image with the mouse will also make permanent changes to either the Logo or Login image.

[jancborchardt]

One of the great things about our theming is that it's quick & easy. It's instantly changed so you can see it live, and the log in screen has a small preview. You can also test that live by using an incognito window / private tab.

An inbetween-preview function would make the themimg unnecessarily complex and not instant anymore. For the only 6 values which can be changed that would be a bit overengineering.

@juliushaertl what do you think?

[juliushaertl]

As @jancborchardt said this would dramatically increase the complexity of the app. Also that code would need to be tested and maintained.

In case you need to test stuff before deploying them to the users, you should probably have a separate staging instance. All other apps/settings are not "previewable" as well.

[sunjam]

Ok, that makes sense. How about just allowing custom hex color for the Name and Slogan typography as you currently do for the overall theme. This would make it much easier to create a nice looking custom theme.

[jancborchardt]

We'll not have that in theming as it will make it far too easy to create themes which don't look good, have unreadable color contrast, or have text color which fight for attention with more important elements.

You can always add custom CSS. Check for the custom CSS app at https://apps.nextcloud.com

But really I'd recommend you to not use a separate text color, for reasons mentioned above.

[juliushaertl]

@sunjam Also, it should work fine to use a custom theme besides the theming app. (Can't find the reference pr right now) So you can adjust images if you really need to.

[sunjam]

@jancborchardt The slider color functionality you already have for the generic color theme works great. Makes it easy to set a proper color, which would work even more nicely if it was extended to the type font color on the Name and Slogan as well. Depending on the theme image used, the font just doesn't read legibly as current black or white + there is no way to preview.. It is an understatedly enjoyable experience to create a custom theme, and I honestly feel any admin willing to customize their nextcloud instance will appreciate being able to change the basic fonts and theme to any color they choose on the sliders or a specific hex value. Please consider it, as this is targeted towards admins of an instance.

Here is an example theme I created for a local hackerspace. The black slogan typography I wanted was unusable and had to be shortened or it would be illegible against the background image. I would have dropped the slogan completely, but it would leave an awkward trailing hyphen Be Excellent -

[jancborchardt]

I would recommend to use Noiebridge red as the primary color so that button and header are red.

The text will be white then on the log in page which will be much better readable.

Then the logo SVG could be white instead of the dark red and it would be nicely visible on both the image and in the header when logged in.

If there's any additional legibility issues then, I recommend darkening the image just a bit, as images with lots of variation in lightness like this one will always have some issues, especially on different screen sizes when elements shift.

---

(And btw, do you officially use Nextcloud at Noisebridge? If so that's something cool we could tweet or interview about, cc @jospoortvliet)

[sunjam]

@jancborchardt Problem with using Noisebridge's red color value is it looks bad in Nextcloud. If I could change the top bar icons to white it would be more legible + with this red I cannot see your red indicator symbol on the right hand side. It would be really nice to allow admins to more concretely manage how the theme is set up - allow them to change icon color if they choose and adjust Name / Slogan text colors on the login page.