diff options
author | Robert Adam <dev@robert-adam.de> | 2021-05-30 15:52:45 +0300 |
---|---|---|
committer | Robert Adam <dev@robert-adam.de> | 2021-06-01 09:28:20 +0300 |
commit | 48294be31f8d4f7f9b42ab3deef6f1da720abac0 (patch) | |
tree | a0a40bd4ae3ab19b15ef71caed6f6b8e1f1286a6 /themes | |
parent | 2cd4635e85ba8629e98a956d1f73d99f2a166728 (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.md | 32 | ||||
-rw-r--r-- | themes/README.md | 63 |
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. + |