Is there an overview document of the styling system?

Omniverse General Discussion
1

I’m looking to create some custom styling on an Omniverse editor-based app to try to comply with my company’s UI style guidelines. So far what I’ve found along those lines is some examples such as kit-extension-sample-ui-window/exts/omni.example.ui_julia_modeler/omni/example/ui_julia_modeler/style.py at main · NVIDIA-Omniverse/kit-extension-sample-ui-window · GitHub or Overview — Omniverse Kit or the tutorial being followed in https://www.youtube.com/watch?v=rwae82Vb7z4 (though I can’t find the original tutorial itself). What I haven’t found is an overview that explains how the system works and how I would actually go about constructing style dictionaries or add default styles to the app.kit file.

Just as an example of the type of thing I’m hoping to be able to do: what I’ve tried so far along those lines is something like this in my_editor_app.kit:

[settings.exts.“omni.kit.menu.core”]
background_color = 0x0000FF

(Of course, that’s not the final background color I’d want, I just wanted something where the effect would be obvious if it took hold.)

2

Here is some information for you to start you off

https://docs.omniverse.nvidia.com/kit/docs/omni.kit.documentation.ui.style/1.0.6/styling.html

And the NoCode extension has a page on UI styling also.
https://docs.omniverse.nvidia.com/extensions/latest/ext_no-code-ui/styling.html

3

OK, thanks, I think I found pretty much the same page through the Help menu if I added some extension like omni.kit.documentation.ui.style to the app. And then to get a global style installed, what I did was add something like this to the app’s setup extension:

from omni.ui import Style
from omni.ui import color as cl

APP_STYLE = {
    "background_color": cl(255, 0, 0),
    "color": cl(255, 255, 0),
    "Tooltip": {
        "border_width": 1.0,
        "margin_width": 2.0,
        "margin_height": 1.0,
        "padding": 1.0,
        "background_color": cl(255, 0, 0),
        "color": cl(255, 255, 0)
    }
}

and within the setup extension’s on_startup function:

        global_style = Style.get_instance()
        # print(f'old default style: {global_style.default}')
        global_style.default = APP_STYLE

(Yes, a very ugly style, but again for the first step I wanted it to be obvious whether it was working. And it appears that the Tooltip entry has to be there or somewhere else in the system throws errors.)

If there’s a better way to accomplish the same thing, I’d be glad to hear it.

4

No I think you are on the right track

5

My current attempt seems to still leave large parts of the UI at the usual dark-themed style. Namely, nothing I can do seems to affect the colors of the docking tabs of windows within the UI. Also, the only way I’ve been able to change the colors of the main menu bar is to include catch-all "color": MED_CONTRAST, "background_color": BG10 entries in the style dictionary; however, that then has unfortunate consequences for the viewport window. I’ve tried being more specific and adjusting colors for selectors such as MenuBar, MenuBar.Item, or MenuBar.Window (along with Menu, Menu.Item, Menu.Window, etc. which as I understand it should adjust the popup menus brought up by opening a menu bar entry), but nothing I’ve tried so far has had any effect on the main menu.

So, my current question is: Is there something I’m missing that would allow me to adjust the colors of the docking tab areas, and of the main menu bar? (Then, the next obvious targets would be the scene tree view and the object property view, which I cannot seem to adjust despite trying various things involving TreeView entries set to omni.ui.Style.get_instance().default.)

6

I am trying to get you an answer here. To be honest, nobody has requested any changes in color before. People are ok with grey and black :-)

7

OK, thanks. If not, I’m not too worried about that - this is for a more short-term project for an internal demo, and longer term we were hoping to use the web streaming interface and build an app around that with our existing tools and frameworks. And to be honest, the default style is not too far off from our dark theme, so it only becomes really glaring if we try to switch to our light theme.

8

Yeah I can keep looking, but honestly, the UI colors are not something anyone has mentioned before. They are pretty standard black and grey. And as you said, we are moving to using a web-based interface, so it can be anything you want on top.

9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.