Why use Blue Crystal style in Design Studio apps?
In Short
from the available styles in Design Studio – the “recommended” one is “Blue Crystal”. You should use this when creating new apps, not the default one “Platinum”.
Why?
Design Studio has started with many available styles for SAPUI5 controls, and all applications created on them are still running. Now, going forward SAP UI5 is supporting Blue Crystal as standard theme for Fiori UI and in the new mobile world (sap.m). Even Design Studio is not yet mobile “ready”, some new UI5 controls are running only in the Blue Crystal theme.
In addition, some other functions are only available for Blue Crystal:
Difference?
Blue Crystal (top) vs Platinum (bottom)
—– 
The Blue Crystal is an “flat design”, WIKI: Flat design – Wikipedia, the free encyclopedia, with shadows on the components.
What to DO?
For new applications, create them based on Blue Crystal theme.
* btw, if you do not like the blue background, just assign CSS file which puts white background as body css class.
body {
background: white !important;
}
For existing applications, you can still run them – there is no need of any migration. But, you can consider changing it – especially when you want to define company internal rules for styles and be prepared for Fiori “UI-compatibility”
Setting for the Style
In Design Studio, every application can have different style, the setting is on application level. This is the setting.
The default is “Platinum”.
Community SCN SDK Extensions
Some of the extensions are looking nice only in Blue Crystal theme, this is because the components used from SAPUI5 are only styled properly in Blue Crystal.
Component List 2.0 – SCN Design Studio Community
The theme documentation:
SAP Blue Crystal – User Interface Add-On for SAP NetWeaver – SAP Library
UI5_Developer_Guide_for_SAP_HANA
Moving Forward in Design Studio
Design Studio has in the roadmap better mobile support, styling is also part of this support. It is possible that in some release only the one supported style will be available – and this is the Blue Crystal style (as of today and the future plans).
Update / Removal of BLUE background
If you do not like the blue background and want to have this white, place this CSS in your custom css file:
body {
background-image: initial!important;
background-color: white!important;
}
Hi Karol,
I think this is very good advice, especially considering that SAP's stated User Experience Strategy is for "All applications & UI technologies to converge to the SAP Fiori UX", which is enabled by the Blue Crystal theme. Under this approach, I assume now that the existing iPhone templates (as shown below) are outdated and should no longer be used, particularly since they apply the now deprecated (as I understand it) aad_mobile_black theme. Is that right?
I expect that going forward, Design Studio apps for the iPhone can be developed just like those targeting iPad and desktop, using the Blue Crystal theme, with appropriate consideration being given to the screen size. Would that be an accurate assessment?
Regards,
Mustafa.
Hi Mustafa,
good point, thanks.
we will need to review the current templates. Those should be updated as well. I log this for review as idea.
Idea: Update Mobile Templates with Blue Crystal Theme
Karol
My feedback to Karol:
Excellent, as always!
My frank addition:
Platinum/Gold Reflection are dead. Stop using them.
My advice to Design Studio team:
Make Blue Crystal the Default, and deprecate even Platinum.
My advice to designers:
Learn F12 and Fiori/UI5 classes.
I would also add: "Mobile Black iPhone templates are dead. Stop using them." 🙂
Hi Mike,
I have placed this post to avoid a lot of "dead" apps are created in the meantime and then many customers will get the migration question / effort. as Design Studio has started unfortunately Blue Crystal was not yet there...
I can only agree, for all apps - Blue Crystal - should be used to assure log term compatibility. It is really important if some overwriting via CSS is made on customer side, the CSS classes are not 100% compatible with other styles.
Karol
Hi Karol,
great advice, thats what we always do by default. It would just be great if we can have white and clean background by default in future without using CSS. Less coding is always better 🙂
Regards
Jörg
Hi Jörg,
this is defined in the UI5 theme, Design Studio has no influence on this background. To be honest, it got changed some days ago, I am sure there was a reason for this.
for now, the only option is to overwrite it via CSS.
Karol
Awesome advice. The fact that Blue Crystal is flat and minimal it makes more sense to use it.