Themeing

Structure of a theme

A theme is a folder in the C:\ProgramData\FAForever\themes directory. You can call the folder for your theme whatever you like. The important info is taken from the theme.properties file in the root directory. Also in the folder can be images, fxml files and css stylesheets.

The theme.properties

Looks like that:

displayName=test
author=alex
compatibilityVersion=1
themeVersion=1
needsRestart=false

The values are pretty self explainatory. At the moment only displayName and needsRestart are actually used. You still need the other values. Make also sure the versions are whole numbers.

Selecting a theme

After restarting the client and putting the theme folder in the C:\ProgramData\FAForever\themes directory, a user should be able to select the theme in a dropdown in the settings. If selected style changes are immediately loaded. Tho changes on images and fxml files might only take effect after a restart.

The different files

You can change the following.

1. Style via css files
2. Images by providing them
3. FXML files (they are similar to HMTL) that define the layout If a file is not in you theme the client will use the default ones as a fallback. So try to only provide files you really changed. This increases compatibility with future versions. All this files from src/main/resources/theme in the client can be overwritten with your own.

CSS

Java FX uses CSS to style the application. Be aware that it uses special properties, that can be found in the java fx documentation. You probably want to make changes to the style.css file found in src/main/resources/theme . You can eiter provide that very file or better provide the style_extension.css and overwrite values from style.css there. The later version increases compatibility with future versions.

Images

Are in images/* just provide your own.

FXML Files

Try to avoid changing fxml files. This might make your theme fragile. Rather try to give certain items styleclasses. We are happy to accept Pull Requests that simply add styleclasses. You can then style them in the css. Tho if you want major changes to layout that is a valid strategy. The fxml files still need to fit on their Controllers tho. That would be something for an advanced theme.

Example

Here is a simple theme that sets accent color to green.

Development

You should probbaly have a look at the original files. And here a little tip: The client refreshes the stylesheets on the fly if you change them.