Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/mumble-voip/mumble.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/themes
diff options
context:
space:
mode:
authorRobert Adam <dev@robert-adam.de>2021-05-30 15:52:45 +0300
committerRobert Adam <dev@robert-adam.de>2021-06-01 09:28:20 +0300
commit48294be31f8d4f7f9b42ab3deef6f1da720abac0 (patch)
treea0a40bd4ae3ab19b15ef71caed6f6b8e1f1286a6 /themes
parent2cd4635e85ba8629e98a956d1f73d99f2a166728 (diff)
MAINT: Improved themes README
- Created a new README with instructions for how to change themes - Changed contents of original README to be purely descriptive of what the Mumble theme is about
Diffstat (limited to 'themes')
-rw-r--r--themes/Default/README.md32
-rw-r--r--themes/README.md63
2 files changed, 67 insertions, 28 deletions
diff --git a/themes/Default/README.md b/themes/Default/README.md
index dec6d5c4c..c43a614af 100644
--- a/themes/Default/README.md
+++ b/themes/Default/README.md
@@ -1,31 +1,7 @@
-A **Mumble theme in Lite and Dark variants**, which is **distributed as the default skin in the Mumble client**.
+# The Default theme
-This theme is a derivative of the [MetroMumble skin](https://github.com/xPoke/MetroMumble).
+This theme is a derivative of the [MetroMumble skin](https://github.com/xPoke/MetroMumble). It comes in a Lite and a Dark variant and with variants
+that are specifically tuned for use on macOS.
-# Skinning
+This is the default theme that gets shipped with Mumble since version 1.3.0.
-**Do not modify the qss files directly. Read below.**
-
-To change icons and other graphics, simply change the SVG files of the theme (with an editor such as [Inkscape](https://inkscape.org/en/) or Adobe Illustrator).
-
-See the [wiki article on Mumble skinning](https://wiki.mumble.info/wiki/Skinning).
-
-The theme is written in [Sass](https://en.wikipedia.org/wiki/Sass_%28stylesheet_language%29), a language that processes into CSS (or [QSS](http://doc.qt.io/qt-4.8/stylesheet.html) in this case).
-
-If you want to make your own skin based on it, install a Sass processor such as [Prepros](http://alphapixels.com/prepros/). A Prepros project file is included, so simply add the `mumble-theme` folder as a project.
-
-The file `source/Imports/Base Theme.scss` contains the actual theme QSS, but it is **not recommended** to modify.
-
-In future versions you might want to swap `Base Theme.scss` to a newer version, so it will be easier to update your theme in the future if you leave it alone.
-
-Instead, you should edit either the **`Lite.scss` or `Dark.scss` files in the `source` folder**, and add your own CSS at the end of the file.
-
-You can also add your **own variants** in the `source/Imports` folder, which contain the color definitions.
-
-When you process these files in Prepros, it will output the complete skin to the **qss files in the parent folder**. If something didn't work out
-quite right, it can also happen that Prepros will output **css** files in the `source` folder. In that case you can simply replace the qss files in
-the root folder with the generated css files (the syntax is actually the same - only the file extension differs).
-
-The **OSX variant** can also be found in the `source` folder, which imports the regular source files but adds a small [OSX fix](https://github.com/xPoke/MetroMumble/issues/4) and modifies font sizes.
-
-Have fun!
diff --git a/themes/README.md b/themes/README.md
new file mode 100644
index 000000000..9a57275e0
--- /dev/null
+++ b/themes/README.md
@@ -0,0 +1,63 @@
+# Mumble Theme(s)
+
+This directory contains the theme(s) Mumble ships with by default.
+
+A theme consists of the following components:
+- Style definitions (e.g. used colors, border widths, etc.) that are defined as QSS files (Qt's version of CSS)
+- Icons
+- Icon-Mapping that map a given name (alias) that is used in the application source code to a particular icon in the theme
+
+The heart of a theme is its corresponding `.qrc` file. This file contains the Icon-Mapping and also a mapping for the QSS files. It is responsible of
+bringing all required resources into the final binary and making these resources available under the name chosen in it.
+
+
+## Editing icons
+
+Editing icons is very straight forward. Most of our icons are vector graphics (SVGs) and that is what you should create when assembling a new icon.
+These files can be viewed and edited using the Open Source and cross-platform tool [Inkscape](https://inkscape.org/).
+
+By editing these SVG files with Inkscape, the files get bloated with a lot of unnecessary stuff though, so in order to clean them up (again), we use
+the [SVGOMG web tool](https://jakearchibald.github.io/svgomg/). Just upload the SVG to their page and accept the default values. That usually produces
+good results. Make sure to actually test that the icon still looks the same _inside Mumble_ after you have stripped it in this way.
+
+As already mentioned, every icon needs to be referenced in the corresponding `.qrc` file in order to find its way into the final application. In there
+you also have to create a unique name-alias for it. An entry in that file looks like this:
+```xml
+<file alias="nameToBeUsedInSourceCode">path/to/icon.svg</file>
+```
+
+In the application source code you can then refer to your new icon as `skin:nameToBeUsedInSourceCode`.
+
+
+## Editing styles
+
+Customizing the style of the theme is in principle also easy: The QSS files mostly behave like regular CSS files and as such they can be edited
+manually. **This is not recommended** though.
+
+The reason for that is that we auto-generate these style files using [Sass](https://sass-lang.com/) which is a CSS extension language.
+
+Thus in order to make changes to the QSS files, you have to edit the Sass sources and then regenerate the sources using an appropriate Sass compiler.
+We recommend the usage of the [Sass command line](https://sass-lang.com/install) tool.
+
+For legacy reasons it is also possible to use the [Prepros](https://prepros.io/) tool. Its support for Mumble themes is no longer actively maintained
+and might get removed in the future though.
+
+The Sass sources currently live in the `Mumble/source/` directory. The most interesting files are hidden in the `Imports` directory. In there you will
+find definitions for the general theme as well for the Dark and Lite variants of it. These are the files that you would usually edit in order to adapt
+the style to your likings.
+
+After you have made changes to the Sass files, you have to generate the respective QSS files from it. In order to do that you have to use the
+`sass` CLI as follows:
+```bash
+sass <sass-file> <output-file>
+```
+
+The `<sass-file>` is one of the files found directly in the `source` directory whereas `<output-file>` is the corresponding QSS file one directory
+above that. Starting from `Mumble/source/` such an invocation could look like this:
+```bash
+sass Lite.scss ../Lite.qss
+```
+
+To make sure you did not forget to regenerate the QSS for one of the variants, we recommend to simply always regenerate _all_ variants to make sure
+they are all updated as needed.
+