Since introducing our freya-ivy
theme, we also provide a dark mode for our applications (Engine Cockpit, Portal, etc.) 🌚
And of course, it is also possible that your HTML Dialog has a dark mode too: Doc 10 - HTML Dialog Themes
Also with the introduction of the branding, we added the possibility of giving the Portal and your HTML Dialog your touch: Doc 10 - Branding
custom.css
One part of the branding is the custom.css
. In it you can override some CSS variables, to change e.g. the primary-color
of the whole application.
E.g. with the following entries in the custom.css:
:root {
--ivy-primary-color-h: 365;
--ivy-primary-color-s: 96%;
--ivy-primary-color-l: 45%;
--ivy-primary-dark-color: hsl(365, 96%, 35%);
}
Your Portal and HTML Dialog will adopt your colors and will appear like the following:
But sometimes this is not enough. So with 10.0.17
and 11.3.0
(Issue: XIVY-13035) we added more possibilities to react to theme mode changes and also style your components accordingly.
Body theme mode class
If you create a new project (starting with 10.0.17
) our templates will contain the current theme mode as class in the body element:
<h:body class="body-hd #{ivyFreyaTheme.mode}"></h:body>
<!-- What will result in html according to the current theme -->
<body class="body-hd dark"></body>
<body class="body-hd light"></body>
With that, you can go even further in your custom.css
file and change styles that are currently not supported via CSS variables. E.g. changing the global text color to white
in 🌚 mode or black
in 🌞 mode:
body.light {
color: black;
}
body.dark {
color: white;
}
Of course, this class will also be changed if you change the theme mode via the ThemeSwitch
button.
DOM custom event
In addition to this added body class, a CustomEvent is fired when you change the theme mode via the ThemeSwitch
. On this event, you can listen from within your JavaScript code, e.g. by the following:
document.body.addEventListener('change-theme-mode', event => console.log(event.detail.mode));
Warning âš
Even if these two new ways are now supported by the Platform in combination with the freya-ivy
theme and we try our best to hold them stable, it can cause migration pain in the future e.g. if you want to change to another theme.
So please be aware that you customize as little as possible via CSS.