Themability ...

[DeepDiver1975]

We need a mechanism which allow to theme the front end.

There might be a build step required to create a theme/branding for it.

Elements which need to be themable:

• [x] colors of text and background
• [x] logo on login screen (if we will have one)
• [x] logo on top bar
• [ ] logo on public share pages
• [x] product name: ownCloud -> awesomeCloud
• [x] product slogan
• [ ] mime icons

Requirement for the theme:

• isolated file to be loaded via the config
• no recompilation of any app or the phoenix skeleton
• themes shall apply to all apps and plugins

[michaelstingl]

Involving @ChrisEdS …

[felixheidecke]

This we have already and its quite easy and straigt forward. Here we "only" need a documentation.

[felixheidecke]

I guess I'll start a wiki. ;-)

[ChrisEdS]

That's a good idea.

[felixheidecke]

Started the wiki.

[SamuAlfageme]

e.g. https://github.com/owncloud/core/blob/master/apps/theme-example/defaults.php should be a good place to start the recollection of those.

[kiu-ball]

An easier theming would be great. Here is a list of icons that I have to put directly in core/img and settings/img to style them (in a simple way) in oC 10.0.7:

/core/img/places/home.svg

/core/img/filetypes/x-office-document.svg /core/img/filetypes/folder-drag-accept.svg /core/img/filetypes/text-calendar.svg /core/img/filetypes/file.svg /core/img/filetypes/text-code.svg /core/img/filetypes/folder-starred.svg /core/img/filetypes/application.svg /core/img/filetypes/text.svg /core/img/filetypes/image.svg /core/img/filetypes/text-vcard.svg /core/img/filetypes/folder-shared.svg /core/img/filetypes/folder-external.svg /core/img/filetypes/package-x-generic.svg /core/img/filetypes/audio.svg /core/img/filetypes/video.svg /core/img/filetypes/folder.svg /core/img/filetypes/folder-public.svg

/core/img/actions/public.svg /core/img/actions/rename.svg /core/img/actions/download.svg /core/img/actions/details.svg /core/img/actions/add.svg /core/img/actions/more.svg /core/img/actions/star.svg /core/img/actions/toggle-pictures.svg /core/img/actions/delete.svg /core/img/actions/toggle-filelist.svg /core/img/actions/share.svg /core/img/actions/history.svg

/settings/img/help.svg

[michaelstingl]

Current methods (oC 10.0.x) are super complicated, but normally no need to hack the core:

• /core/img/filetypes/*.svg ==> occ maintenance:mimetype:update-js (see docs)
• /core/img/actions/*.svg ==> needs additional rule in apps/theme-mytheme/core/css/styles.css

[kiu-ball]

From an admin perspective it would be great to simply put a styled icon in the theme to replace the original. I would not like to think about how this icon is handled in code to do this in the right way. To get there would be a great enhancement for Phoenix in my eyes.

[patrickjahns]

@felixheidecke

as far as I understood UIKIT - theming should easily be possible by using sass / less compilers - or am I missing something? (ref: https://getuikit.com/docs/less // https://getuikit.com/docs/sass ).

What about "themeable strings" - could this be done with the same pre-compilers? Would it work of using a translation framework as a similar idea for overriding text / strings "

[michaelstingl]

Fancy live-theming: http://podlove-player.surge.sh/theme.html (no build step required)

Code here: https://github.com/podlove/podlove-web-player

[felixheidecke]

@patrickjahns … not sure what you mean by "themeable strings" :-|

[DeepDiver1975]

@patrickjahns … not sure what you mean by "themeable strings" :-|

Theming includes changing the product name. ownCloud -> CernBox Also slogans are replaced.

[DeepDiver1975]

@felixheidecke will it be necessary to recompile phoenix and all apps if I want to apply a theme? Or can we reduce the theme into one bundle/app/plugin. The later would be kind of a hard requirement. We don't want to recompile the full phoenix within ownBrander

[felixheidecke]

Creating a new theme happens in src/themes … it's as simple as creating a new my-theme-name.less file, importing UIKit base files and running node_modules/less/bin/lessc src/themes/my-theme-name.less core/css/uikit.my-theme-name.css --relative-urls

That's it, new theme exists.

Slogans could be generated using the content: 'Hello' CSS Method where needed.

[PVince81]

@felixheidecke can you provide an example theme file ?

[tempelgogo]

We need some kind of basic component library for oc apps, no matter which framework we choose. We need them in vue single file component format, for best re-usability. So while on the one hand UiKit offers more flexibility because there‘s not much component code included, on the other hand it‘s far more to work.

Vuetify offers pre-defined vue component files, containing template + stylesheet + ViewModel. We could derive & extend them (e.g. with oc specific icons/functions/state). Vuetify also offers color theming capability via js api, so we could easily modify colors on-the-fly (we could even provide an oc instance changer in phoenix & connect phoenix to multiple different-themed backends)

They are both useable for ServerSide rendered Applications & PWA.

UiKit depends on LESS/SASS Stylesheets, and makes heavily use of variables in these languages. This offers awesome features like color deriving methods, the possibility to tree-shake the entire stylesheet, modify via PostCSS, etc… without the need for CSS3 var() or colors inside vuex state. In return this brings the need to recompile the entire stylesheet with these new base colors set, to include them inside the outputted „bundle stylesheet“. If we would like to enable on-the-fly color themability with UiKit, we would need to include a LESS/SASS compiler inside the frontend or call it everytime when changing theme colors.

(Notice: This is intended behaviour, like explained on their website: „This allows you to include customizations in the build process, rather than manually overwriting a lot of CSS rules by hand.“)

Regarding to our need for RTL styles, UiKit wins the battle, because it offers RTL support out-of-the box. There‘s a ThirdParty Package available on NPM (vuetify-rtl-style) which upgrades vuetify with RTL supporting css code.

UiKit has an very dom-driven API, for example

• sticky method need‘s selector
• Notification Method is globally injected per default.

While Vuetify is written with the Vue Api in mind, UiKit needs some special API Wrapper for clean UiKit integration (e.g. VuiKit)

While the community of these both Projects seems to look similar sized, VuiKit is a far less active maintained project.

[DeepDiver1975]

@PVince81 I'd like to hear you opinion on this as well - you have been voting for uikit. THX

[felixheidecke]

@tempelgogo thank you for your in-depth review. One thing remains:

We would need to compile apps with vuetify, whereas UIKit does not directly come in contact with apps during compile-time. How does that affect theming and improving/updating vuetify? Would we need to recompile all apps to work?

[tempelgogo]

Regarding to our themeable requirements: https://github.com/owncloud/phoenix/issues/1#issue-298978245

• productName / productSlogan -> We can simply wrap a string from vuex, which get's initialized with oc config from backend.
  • MIME Icons -> We can wrap it into mime-icon component, which inherits the icon name from vuex. We need to load this icons as usual via css, webfont, etc.
• logo loginScreen / logo topBar / logo publicPages -> Same but easier, because no additional style is needed. We can simply change the img src via vuex.
• colors of text and background -> This is the only point the workflow on vuetify vs. UiKit would differ: Vuetify encapsulates seven base colors as state inside the code, which it uses for theming. That's why we can change the color after compiling & initialization on-the-fly inside the browser. UiKit hold's these colors inside their base css Stylesheet. You have to change the whole stylesheet with the new colors set.

Any other customization setting (for example border-radius or font-family) is not covered by any of them; We would need to implement it manually.

[DeepDiver1975]

should be ready for most topics. closing. needs re-evaluation ...