Runtime Theming

[PVince81]

Requirements

Themable topics

• Logo on login page
• Logo on top bar
• Primary color
• Secondary color
• Background image / color on login page
• Icon colors? => requires SVG
• Favicon
• Strings
  • Title
  • Entity
  • Base URL
  • Slogan
  • Logo claim
  • Help URL
  • Imprint URL
  • Privacy Poliy URL
  • Branded client download URL
  • Help text on public link page

Requirements

• should work during runtime dynamically
• can be switched on/off
• maybe switching between multiple available themes / theme sets within a theme? (to discuss; e.g., dark/bright mode switchable by users)
• defined set of themable parameters (see above)
• can be extended with additional parameters in future versions
• theme is configurable via WebUI => will need a Phoenix app for that https://github.com/owncloud/enterprise/issues/2187
• reuse branding parameters (e.g naming of parameters) across client platforms to make it easier for admins => e.g., same color schemes on all platform => semantic, platform-independent naming
• Mobile support
• SVG and PNG support for images

[LukasHirt]

I tried to gather some nice articles on how css-in-js can help vs. why it could be a bad idea.

Here are some arguments about why it could be bad.
https://gomakethings.com/whats-wrong-with-css-in-js/

Why it could help:
https://hackernoon.com/i-swore-never-to-use-css-in-js-here-are-6-reasons-why-i-was-wrong-541fe3dfdeb7
https://objectpartners.com/2017/11/03/css-in-js-benefits-drawbacks-and-tooling/ (this one is a wee bit longer)

Some theming examples:
https://www.styled-components.com/docs/advanced#theming
https://seek-oss.github.io/treat/how-it-works#theming

TL;DR Main benefits are having styles closely tied to components. Styles are included only if the component is rendered. Theming is possible on runtime. Components can easily extend each other. The CSS is not going anywhere, it's still there just inside of js.

[LukasHirt]

• TODO experiment: Possible to use - https://github.com/styled-components/vue-styled-components
  The effort for POC:

• Implementation: 1md

• Testing, review and discussion: 1md

• TODO: experiment: CSS variables (+ polyfill IE11)

Needs to be tested:

• Does it run properly in IE11
• Loading the theme variables from a different server
• Access the theme variables from within extension which lives outside of Phoenix code base

Needs to be implemented in POC:

• Load theme before authorisation (seems that it will need to be separated from capabilities then)

[LukasHirt]

Result of research:

Css-in-js

For our use case, this approach seems like too much effort for not so much benefits.

CSS custom properties (CSS variables)

This approach proved itself quite promising. Theming works fine for both components inside the SPA and for web components. The only issues seem to be IE11. Since it's not natively supported we need to transpile the code. In my research, I used css vars ponyfill which worked with components which are already in SPA. The problem was in the web components though where I haven't managed to get it working. Also, there was a performance issue when using watch option but that could be related to my setup since it was done in a virtual machine.

Seems like we would need to implement some special solution for IE11 then. One idea is to have the CSS file containing the variables manually transpiled (probably some script to do this). Other option could be to do a fork of ODS and manually adjusting the theme.

CSS variables provide an option to specify a fallback which could be used for the default theme.

[PVince81]

As discussed with @DeepDiver1975 and @felixboehm individually, we want to invest in new technologies and not let IE 11 stop us from doing it.

So we should move on with the CSS custom attributes approach.
The technical tasks I see for this left:

• adjust the research PR to a mergable state
• bring in CSS variables for all the design tokens (and more?) in ODS
• split out the current "poc theme designer" code into a separate place (app/extension/...)
• actually work on the theme designer as part of https://github.com/owncloud/enterprise/issues/2187

[PVince81]

The minimum we should aim for in the context of the "ocis extensions" epic is to have everything in place so that extensions can start using CSS custom attributes where needed.

In general I'd expect extensions to only work with the ODS but we know that sometimes there are exceptions where local styles are used. So the latter should be able to use the CSS custom attributes.