Table of Contents

How to create your own theme ?

Themes allow you to customize the colors of the different components used by your application. By default the application will use a standard Neos theme.

Tip

For programmatic access to themes, use the strongly-typed Themes class instead of hard-coded strings. See Typed IDs for UI Elements for more information.

If you want to create your own theme, you can do so by adding a new theme in the module of you choice.

You can either start from a copy of a standard theme or start from scratch.

A theme is split into two parts :

  • a list of predefined colors that you can complete
  • the list of the component attributes to which colors are assigned

For each component, all the customizable attributes are listed. You can either choose to use one of the predefined colors or check Customize to choose a specific color for this attribute using a color picker.

For a better consistency, it is recommended to create predefined colors that can be reused across multiple components.

You can use this website to create a color palette to use in your theme.

Font

You can change the font in the theme properties.

The default font is Montserrat but you can also choose the Roboto font.

Today, it's not possible to use a custom font other than these two.

Color scheme

The color scheme is used to specify to the framework that the theme is light or dark

  • Light Theme: Uses lighter colors for backgrounds and darker colors for text and UI elements, providing a bright and clean appearance
  • Dark Theme: Uses darker colors for backgrounds and lighter colors for text and UI elements, reducing eye strain in low-light environments

This information is used by the framework to adapt the images. You can indeed define a dark version for an image. If the dark version is not defined, the image will not be differentiated between the light and dark themes. You can define this dark version :

  • by using the dedicated column in the images list
  • by adding a suffix .dark to the image name. For example, if you have an image named Customer.svg, you can add a dark version named Customer.dark.svg
Note

It is possible to get the color scheme in the client code by using the ThemeManager.GetCurrentTheme().ColorScheme property.

Reversed button order in the buttons-layout component

The button order in the buttons-layout component can be reversed through a theme option. See buttons-layout documentation for more information.

How to apply your theme ?

Theme can be applied on the server side by using the ITenantResolvedInterceptor interface or on the client side.

Tenant resolved interceptor

To apply a theme, you need to create an interceptor for the resolution of the tenant and enrich the result of the previous interceptor.

Here is an example showing how to apply a custom theme :

public class TenantResolvedInterceptor : ITenantResolvedInterceptor
{
    public async Task<OnTenantResolvedResult> OnTenantResolvedAsync(NeosTenantInfo? tenant, OnTenantResolvedResult previousTenantResolvedResult)
    {
        return previousTenantResolvedResult.WithTheme("MyTheme");
    }
}

Client side

You can also apply a theme on the client side by using the ThemeManager class.

Here is an example showing how to apply a custom theme on the Initialized event of the home page UI:

_ = ThemeManager.SetThemeAsync("MyDarkTheme");
Note

It is possible to get the current theme in the client code by using the ThemeManager.GetCurrentTheme() method.