Theming and Customizing the UI and appearance

Last updated 2022.02.23

This implementation now has support for custom themes. By default, a light gray theme will be used whenever a theme asset is missing, however by creating a named directory inside the web/themes directory you can customize images, icons, sounds, and color schemes.

To select a theme, there is a directive in config.php where you just need to put the folder name; all available assets will be pulled from the indicated folder based on this config. If an asset is missing, a default asset will be used instead.

To create a theme, we recommend starting by copying the web/themes/default-light directory to a new name; this sample theme has all referenced assets and works as a great starting point. The structure of all possible theme assets is as follows:

\themename\
|-- \icons\
|   |-- android-chrome-192x192.png
|   |-- android-chrome-256x256.png
|   |-- apple-touch-icon.png
|   |-- browserconfig.xml
|   |-- favicon.ico
|   |-- favicon-16x16.png
|   |-- favicon-32x32.png
|   |-- mstile-150x150.png
|   |-- safari-pinned-tab.svg
|   |-- site.webmanifest
|-- \sounds\
|   |-- dtmf.wav
|   |-- ringbacktone.wav
|   |-- ringtone.wav
|-- logo.png                          ( Your organization's logo, 540px x 72px )
|-- style-theme.css                   ( Custom CSS file for setting colors )

Blinking buttons are created with a 5-step color gradient found in style-theme.css. The steps for this can be easily created with this tool: https://colordesigner.io/gradient-generator

Assets for favicons/badges were generated using https://realfavicongenerator.net/; by starting with a 270px x 270px image, a complete set of icons and manifests can be generated.

Feel free to submit themes to us via pull request or share, we're happy to include new themes!