Stratos provides a mechanism for customizing the theme, including:
- Changing colors
- Changing image assets (favorite icon, login background and logo)
- Using additional fonts
- Adding/Overriding styles
- Applying theme colors to components
Theme's are best encapsulated in a new npm package. It should contain the usual
package.json file with a
stratos section which will contain some of the theme customizations.
Stratos uses Material Design and the angular-material library and uses the same approach to theming.
To create your own theme you will need to create a color pallet and provide it to Stratos as a material theme. This theme can also contain additional colors that customize core parts of the page (header, side navigator menu, avatar, etc).
To do this create the file
_index.scss in the root of your theme package. This should contain a Stratos scss function that will return a
object via the Stratos helper function
stratos-theme-helper, for example.
In most cases you will probably want to generate a palette for the primary color for your version of Stratos - an example
custom.scss for this is shown below:
Additional Stratos colors can be customized by supplying more colors to the
theme object. Defining these colors helps reduce the amount of custom css the theme has to use.
You do not have to specify all of these - defaults will be used if they are not set.
|app-background-color||Base color to show in the background of the application|
|app-background-text-color||Color of text when placed on the basic background|
|subdued-color||Lighter color meant to be a subdued version of the primary color|
|header-background-color||Background color for the main stratos header|
|header-foreground-color||Foreground color for the main stratos|
|stratos-title-show-text||Boolean - Show |
|header-background-span||Does the header background color span across the top, or is the sidenav background color used for the top-left portion|
|underflow-background-color||Background colors to use for things like the about page header (underflow)|
|underflow-foreground-color||Background colors to use for things like the about page header (underflow)|
|link-color||Color for hyperlinks|
|link-active-color||Color of visited hyperlinks|
|user-avatar-background-color||Background color of the default avatar in the main header|
|user-avatar-foreground-color||Foreground color of the default avatar in the main header|
|user-avatar-underflow-invert-colors||Boolean - Invert the user-avatar colors|
|user-avatar-header-invert-colors||Boolean - Invert the user-avatar colors in the main header|
|intro-screen-background-color||Color of the background to introduction style screens (log in, log out, etc)|
Side Nav Colors
Colors that define how the top level navigation menu on the left of Stratos appears.
|background||Background color of the side nav|
|text||Color of text when menu item is not selected|
|active||Color of background of a selected item|
|active-text||Color of text of a selected item|
|hover||Color of background of an item when hovered on|
|hover-text||Color of text of an item when hovered on|
Colors that are associated with the standard levels of statuses.
Terminal style set of colors to show for logging output.
By default the theme will not contain a dark mode and the UX for enabled/disabling it will be hidden.
In order to add a dark mode to your theme an additional
dark color theme should be provided by the
stratos-theme theme function in your
_index.scss, for example
Within the dark theme the default theme's additional Stratos colors can be overwritten.
Replace Stratos Images
Images that Stratos uses can be overwritten by a theme, for example the logo and favicon. To do so the new images should be added to the
package and then referenced in the theme's
package.json including the path of the image they overwrite. Below are some prominent examples.
|Favorite icon to use|
|Logo to use on login screen and about page|
|Logo to use in the top-left side navigation for the application logo|
nav-logo.pnglogo should have a height of 36px and a maximum width of 180 pixels.
Files written to
core/assetsshould be done in one line. In the example below both logo.png and nav-logo.png and done via the one line
When images are used by custom components they should also be referenced in the theme's
package.json. Whole folders can be included and should
be written to
core/assets. When references by the components they use that path
Any custom fonts used by the theme or extensions can be provided in a similar way to images, the files should be added to the theme's package
and then referenced in the theme's
We don't generally recommend modifying styles, since from version to version of Stratos, we may change the styles used slightly which can mean any modifications you made will need updating. Should you wish to do so, you can modify these in the same
_index_.scss. For example the Acme_index.scss imports a file that adds a text color
Note that the class
stratos has been placed on the
BODY tag of the Stratos application to assist with css selector specificity.
Angular components in your packages can be themed, which provides them access to the theme's colors. To do this, in your extensions package that contains the components (this may be different to your theme package), add a
_all-theme.scss file containing a scss function. This function
should be referenced in the package's package.json and is called by the Stratos extension mechanism.
package.json content may look like below
Component theme files can then be defined and their own scss functions being called from