Customize the ERC View Theme to Match the Rest of the OJS Theme

[tomniers]

The idea is to reuse the theme used in OJS, in the o2r galley. Of course it would be nice to adopt as much as possible, but the goal of this issue is that the user gets a few colors suggested for the o2r galley in the plugin settings, selects one and it is then applied accordingly in the o2r galley.

• How does theme work in OJS, which parameters do we have to pay attention to so that the theme also works accordingly in the ERC view and is taken over e.g. the colar (https://www.uni-muenster.de/Ejournals/index.php/byzrev/index vs. https://www.uni-muenster.de/Ejournals/index.php/jcsw/index), or the font
• Have a look how theme plugins work: https://docs.pkp.sfu.ca/dev/plugin-guide/en/categories#themes
• breakthrough: the users should be able to specify in the OJS plugin settings the color which should be used by the ERC Galley as theme
• in general the possibility that the user can manually set the color in the plugin settings is enough maybe we can also look again in the OJS themes if there are any main colors and if we can get them out somehow.

related to o2r-project/o2r-UI#197

[tomniers]

Maybe the option would be possible to access e.g. the header color that is currently used by the current theme. So you have to look which theme is currently activated by the user (so look in the database in the table site_settings for the themePluginPath) and then find out the base color accordingly. This should not be a problem for one theme, but if variables and structure differ in the different themes it could be problematic.

A concrete example would probably be to get the @bg-base: variable in the default theme, which is already customizable by a function in the Website Settings in OJS (https://github.com/pkp/ojs/blob/c192565e655110850fe30378652aa58fbd292502/plugins/themes/default/DefaultThemePlugin.inc.php#L136). This will change at least the background-color, which is usually available in every theme. But I got the impression that the background-color variable is always at different places/ files, so it could be difficult to find this in a fixed place, you could of course search for it and if not findable use an default value.

Thus, for now, the decision is that the user sets the color himself in the settings.

[tomniers]

In OJS there is no general baseColour that can be used for this purpose. It is only defined per theme plugin by some plugins, but NOT all (compare comment in the PKP Community Forum). So you can't always refer to this colour. So the procedure now is to use the baseColour of the default theme plugin as a basis (if available and no other theme plugin is installed), otherwise the predefined default color of OJS. But the user has the possibility to change the main color of the ERC Galley in the ojs-erc-plugin settings. Unfortunately, the predefined colorPicker from OJS cannot be used (compare comment in the PKP Community Forum), so we use the predefined one from HTML5. The corresponding main implementation can be found here:

• https://github.com/tnier01/ojs-erc-plugin/blob/e55fb2241469e8c66ba8c65e8769ad32f61f2924/ojsErcPlugin.inc.php#L104
• https://github.com/tnier01/ojs-erc-plugin/blob/e55fb2241469e8c66ba8c65e8769ad32f61f2924/js/pluginSettings.js
• https://github.com/tnier01/ojs-erc-plugin/blob/e55fb2241469e8c66ba8c65e8769ad32f61f2924/templates/settings.tpl#L38.