Docs: How to contribute new theme (#5863)

* Update 05_Configuration.md

* Update 11_Themes.md

* Update contributing.md

* Update 02_Design.md

* fix

---------

Co-authored-by: math-gh <>

4 files changed, 37 insertions, 15 deletions

diff --git a/docs/en/admins/11_Themes.md b/docs/en/admins/11_Themes.md
index c4edb841a..6d627da93 100644
--- a/docs/en/admins/11_Themes.md
+++ b/docs/en/admins/11_Themes.md
@@ -4,10 +4,10 @@
 
 **For small theme changes, the official [CustomCSS extension](https://github.com/FreshRSS/Extensions) is recommended.**
 
-Themes should be installed at `FreshRSS/p/themes/theme-name`. Docker users can use:
+Themes should be installed at `FreshRSS/p/themes/my-theme-name`. Docker users can use:
 
 ```sh
--v /home/you/my-theme/:/var/www/FreshRSS/p/themes/my-theme/
+-v /home/you/my-theme-name/:/var/www/FreshRSS/p/themes/my-theme-name/
 ```
 
 or a similar method to add their theme to their FreshRSS instance.
diff --git a/docs/en/contributing.md b/docs/en/contributing.md
index f18ddda26..7c8246777 100644
--- a/docs/en/contributing.md
+++ b/docs/en/contributing.md
@@ -43,7 +43,25 @@ If your idea is nice, we’ll have a look at it.
 
 Learn how to contribute to translations in [the dedicated documentation](./internationalization.md).
 
-## Contribute to documentation
+## Contribute to the documentation
 
 The documentation needs a lot of improvements in order to be more useful to new contributors and we are working on it.
 If you want to give some help, meet us in the main repositories [docs directory](https://github.com/FreshRSS/FreshRSS/tree/edge/docs)!
+
+## Contribute to the system themes
+
+FreshRSS offers some official themes. If you have a good sense for great UI you are invited to share your theme with the community (via a [show&tell discussion thread](https://github.com/FreshRSS/FreshRSS/discussions/categories/show-and-tell) or as a [Pull Request](https://github.com/FreshRSS/FreshRSS/pulls)).
+
+Basic Information for creating a new theme are written [here](./developers/04_Frontend/02_Design.md).
+
+This checklist is designed to ensure high-quality system themes while minimizing maintenance efforts.
+
+* Essential files include: [metadata.json, loader.gif, original.png](./developers/04_Frontend/02_Design.md) (located in the `thumbs` directory).
+* Include _frss.css in the "files" section of [`metadata.json`](./developers/04_Frontend/02_Design.md).
+* Theme-specific icons reside in the `icons` directory.
+	* Icons should be provided as `svg` files.
+		* Ensure clean code without any unnecessary fragments; utilize tools like [SVGOMG](https://jakearchibald.github.io/svgomg/) for cleaning.
+		* The default color for icons is `#666666`; employ CSS filters for recoloring.
+* Utilize CSS variables for colors to facilitate easy color adjustments with [CustomCSS extension](https://github.com/FreshRSS/Extensions).
+* Implement a dark mode that aligns with the `.darkMode` CSS class.
+* To streamline maintenance, avoid using CSS preprocessors; instead, employ well-structured plain CSS.
diff --git a/docs/en/developers/04_Frontend/02_Design.md b/docs/en/developers/04_Frontend/02_Design.md
index a497ac29d..fb1496985 100644
--- a/docs/en/developers/04_Frontend/02_Design.md
+++ b/docs/en/developers/04_Frontend/02_Design.md
@@ -4,14 +4,14 @@
 
 **As of writing (02-02-2021), support for themes as extensions is under development.**
 
-The easiest way to create a theme is by copying and modifying the base theme (or another of the pre-installed themes). The base theme can be found in [/p/themes/base-theme](https://github.com/FreshRSS/FreshRSS/tree/edge/p/themes/base-theme). Themes require:
+The easiest way to create a theme is by copying and modifying the base theme (or another of the pre-installed themes). The base theme can be found in [/p/themes/base-theme](https://github.com/FreshRSS/FreshRSS/tree/edge/p/themes/base-theme). Each Theme requires:
 
-- a **metadata.json** file to describe the theme.
-- a **loader.gif** file to use as a loading icon (assuming .loading’s background has not been overridden)
-- an **icons** folder containing .svg, .ico, and .png files to override existing icons
-- a **thumbs** folder containing a file, **original.png** that will be used as the preview for the theme
+- a `metadata.json` file to describe the theme
+- a `loader.gif` file to use as a loading icon
+- an (optional) `icons` folder containing .svg (for icons), .ico (for favicons), and .png (for special cases) files to override existing icons
+- a `thumbs` folder containing a file, `original.png` that will be used as the preview for the theme
 
-"_frss.css" is normally added to the metadata file as a fallback for missing aspects. The file is taken from the base theme. If submitting a pull request for a theme, please know that [pull request themes must include this file.](https://github.com/FreshRSS/FreshRSS/pull/2938#issuecomment-624085450)
+`_frss.css` is normally added to the `metadata.json` file as a fallback for missing aspects or as basement. The file is taken from the base theme.
 
 ## RTL Support
 
@@ -19,7 +19,7 @@ RTL (right-to-left) support for languages such as Hebrew and Arabic is handled t
 
 ## Overriding icons
 
-To replace the default icons, add an "icons" folder to your theme’s folder. Use files with the same name as the default icon to override them.
+To replace the default icons, add an `icons` folder to your theme’s folder. Use files with the same name as the default icon to override them.
 
 ## Template file
 
@@ -35,4 +35,8 @@ To replace the default icons, add an "icons" folder to your theme’s folder. Us
 }
 ```
 
-An example of a css theme file can be found at [/p/themes/base-theme/base.css](https://github.com/FreshRSS/FreshRSS/blob/edge/p/themes/base-theme/base.css)
+An example of a CSS theme file can be found at [/p/themes/base-theme/base.css](https://github.com/FreshRSS/FreshRSS/blob/edge/p/themes/base-theme/base.css)
+
+## Installation
+
+see [](../../admins/11_Themes.md)
diff --git a/docs/en/users/05_Configuration.md b/docs/en/users/05_Configuration.md
index 654529391..e2e0f1205 100644
--- a/docs/en/users/05_Configuration.md
+++ b/docs/en/users/05_Configuration.md
@@ -45,7 +45,7 @@ There’s no accounting for tastes, which is why FreshRSS offers 13 official the
 |:--------------|:-------------------------------------------------------|:--------------------------------------------------------------|
 | Alternative Dark | Ghost | |
 | Ansum | Thomas Guesnon  | |
-| Blue Lagoon     |Mister aiR | No longer supported. Will be removed with FreshRSS V1.22.0 |
+| ~~Blue Lagoon~~     |Mister aiR | Was removed with FreshRSS V1.22.0 |
 | Dark | AD | |
 | Dark pink | Miicat_47 | |
 | Flat design | Marien Fressinaud | |
@@ -54,13 +54,13 @@ There’s no accounting for tastes, which is why FreshRSS offers 13 official the
 | Origine | Marien Fressinaud | (default theme) |
 | Origine-compact | Kevin Papst | |
 | Pafat | Plopoyop | |
-| Screwdriver | Mister aiR | No longer supported. Will be removed with FreshRSS V1.22.0 |
+| ~~Screwdriver~~ | Mister aiR | Was removed with FreshRSS V1.22.0 |
 | Swage | Patrick Crandol | |
 
-If you can’t find any themes you like, it’s always possible to [create your own](../developers/04_Frontend/02_Design.md).
-
 To select a theme, simply scroll through the themes and select one that strikes your fancy. After confirmation, the theme will be applied to the interface.
 
+If you can’t find any themes you like, it’s always possible to [create your own](../developers/04_Frontend/02_Design.md) and [install it](../admins/11_Themes.md). For small theme changes, the official [CustomCSS extension](https://github.com/FreshRSS/Extensions) is recommended.
+
 ## Content width
 
 Some people prefer short lines of text, while others prefer to maximize the available screen space. To satisfy the maximum number of people, it’s possible to customize the width of the displayed content. There are four settings available: