Dhis2 styling

Development - Développement
1

Hello community,

lets say you donot prefer the dhis2 frontend styling and you want to write your own CSS styling to change the style for your instance.so my question how can I archive this if there is any documentation or any other meaningful resources please share. thank you

2

Hi @mugisha_alain

There’s the option to use the API to customize the CSS style, see Settings and configuration - DHIS2 Documentation; however, it seems that currently the CSS is loaded only for the login page and then it’s not taking effect (UI Customization (style.css) not taking effect?.

I think it is possible to make changes using a custom app but I have not tried it. The reason I think it would work is because the Training App app seems to work at a global level.

3

thanks @mugisha_alain . As @Gassim points out, there are some limited options for customizing the styling of your DHIS2 instance. In general, we try to use a uniform design system in DHIS2, so that users have a consistent experience when using different apps and when using different DHIS2 systems. You can read more about some of the principles of our design here: https://ui.dhis2.nu/principles/color. We may add themes or other customization options in the future, but this is not in our current development plans. (cc @joecooper )

Where you currently can customize styling

login page:

  • in v38.6, v39.5, v40.3: this is customizable via api/files/style (e.g. here is the documentation that Gassim shared, specifically for v40)

custom apps:

  • you can write your own apps and make your own styling choices here. We encourage you to use components from the DHIS2 UI library, but you are free to implement what you want. Some developers choose to write their own custom apps to cover most user interaction with the system. You can also set the landing app to be a custom app from within the settings app (Appearance > Start page)

android

  • The android app has supported some limited theming. From your question, I believe you are more interested in web apps, but let us know if you are also interested in styling in the android app.
2 Likes