Update the wiki skin from Vector to Vector 2022 to get a modern design in line with the redesign

[teolemon]

What

• Update the wiki skin from Vector to Vector 2022

Benefits

• We will get a modern design, and a sticky bar that will echo the sticky bar of the redesign of product opener and our other properties
• We will get a dark mode for Free
• We will get a sticky top bar, with user actions always accessible, that enhances usability (see photos of the current situation attached)
• It's more accessible: https://diff.wikimedia.org/2023/01/27/how-the-new-wikipedia-design-focused-on-accessibility/

Tasklist

• With very small effort (changing the background color in the header), the design will echo the design of the mobile app, of product opener, of the Zammad FAQ, of Hunger Games
• With additional effort, we can put a radius around the search field, and recolor the search icon.
• We may have to update mediawiki, and possibly install a few extensions (for instance it seems the notifications are now loaded using JS magic, it might be optional though)

Mockup

Test it

• https://test.wikipedia.org/wiki/Main_Page

Current mobile theme

Mobile screenshots of the new theme

Current desktop

![image](https://github.com/openfoodfacts/openfoodfacts-infrastructure/assets/1689815/94672696-1ce4-4da8-86a9-28a1e85389f0" height="400px"> ![image](https://github.com/openfoodfacts/openfoodfacts-infrastructure/assets/1689815/310b956c-a2d5-4683-b76c-533397f9eb1b" height="400px">

Desktop screenshots of the new theme

The layout of the content is not the same (it's a test site). Things to notice: the menu is accessible from the top left menu, and user menu on the right, like on Wikipedia (you can still have it always visible as well)

Installation website

• https://www.mediawiki.org/wiki/Skin:Vector/2022/fr

[teolemon]

@CharlesNepote if you can, also take advantage to change the logo at the same time

[CharlesNepote]

I changed the logo but I disagree with the change of the skin:

• The Vector 2022 skin is well suited for communication but not for collaboration:
  • the left menus have disappeared and it's quite harder to find direct links to useful tools/links for contributors
  • the skin is only deployed on few wikipedias (the French one, etc.): users from all around the world will lose their habits
• changing the skin would require hours of work to rebuild menus and the dynamic contents of the menu (look at its source code: https://wiki.openfoodfacts.org/index.php?title=MediaWiki:Sidebar&action=edit)

The current template has the advantage to be well known and easy to use.

[teolemon]

• This would also help with accessibility: https://diff.wikimedia.org/2023/01/27/how-the-new-wikipedia-design-focused-on-accessibility/

[teolemon]

The sidemenus are shown on the top menu, as opposed to the footer previously, that is be very cumbersome for long page. I've made a quick video comparing the two @alexgarel @CharlesNepote : https://photos.app.goo.gl/WncQC8GyFiBZq3GW6