Adding Dark Mode support to add-ins

[AlexFielder]

Hi all,

Based off the solution here:

Solved: How to Check if Inventor is in Darkmode? - Autodesk Community

I wondered what (if any) elegant solutions people are using/willing to share with regards to their addins switching between Light/Dark colour schemes?

Is it simply a case of hard-coding userforms / DockableWindow objects etc. to follow Inventor's colour values or is there some other secret sauce I have yet to research?

Thanks,

Alex.

[bradeneuropeArthur]

With this you can check:

Sub main()
    Dim oThemeManager As ThemeManager
    oThemeManager = ThisApplication.ThemeManager

    MsgBox (oThemeManager.Themes.Item(1).Name)
    If oThemeManager.Themes.Item(1).Name = oThemeManager.ActiveTheme.Name Then
        msgbox ("Dark Mode active")
    Else

    End If
    
End Sub

and to switch the themes:

Sub main()
    Dim oThemeManager As ThemeManager
    oThemeManager = ThisApplication.ThemeManager

    MsgBox (oThemeManager.Themes.Item(1).Name)
    If oThemeManager.Themes.Item(1).Name = oThemeManager.ActiveTheme.Name Then
        MsgBox("Dark Mode active")
		oThemeManager.Themes.Item(2).Activate
		Else
			oThemeManager.Themes.Item(1).Activate
   
    End If
    
End Sub

[AlexFielder]

Thanks @bradeneuropeArthur, 

I guess what I am asking is: do I need to manually work out the colouration of all the textboxes/form elements in the add-in I have and set them based on code you shared..?

Or is there another way; Do I build a "normal/dark" theme into my add-in or is there some winforms-compatible library I can use?

Cheers,

Alex.

[AlexFielder · Accepted solution]

In order to offer a solution for others, in the "activate" method of the addin I have this:

If IsInventorUsingDarkTheme() Then
    SwitchTheme(myiPropsForm, True)
Else
    SwitchTheme(myiPropsForm)
End If

Which in turn runs this:

 Private Function IsInventorUsingDarkTheme() As Boolean
    Dim oThemeManager As ThemeManager = AddinGlobal.InventorApp.ThemeManager
    If oThemeManager.Themes.Item(1).Name = oThemeManager.ActiveTheme.Name Then
        Return True
    Else
        Return False
    End If
End Function

and then finally:

Private Sub SwitchTheme(ByRef myiPropsForm As IPropertiesForm, Optional DarkTheme As Boolean = False)
    If DarkTheme Then
        AddinGlobal.BackColour = Drawing.Color.FromArgb(59, 68, 83)
        AddinGlobal.ForeColour = Drawing.Color.FromArgb(225, 225, 225)
        AddinGlobal.ControlBackColour = Drawing.Color.FromArgb(69, 79, 97)
        AddinGlobal.ControlHighlightedColour = Drawing.Color.FromArgb(44, 52, 64)
    Else
        AddinGlobal.BackColour = Drawing.Color.FromArgb(240, 240, 240)
        AddinGlobal.ForeColour = Drawing.Color.FromArgb(0, 0, 0)
        AddinGlobal.ControlBackColour = Drawing.Color.FromArgb(255, 255, 255)
        AddinGlobal.ControlHighlightedColour = Drawing.Color.FromArgb(225, 225, 225)
    End If
    myiPropsForm.BackColor = AddinGlobal.BackColour
    For Each FormControl As Control In myiPropsForm.Controls
        Select Case TypeName(FormControl)
            Case "Button"
                Dim Btn As Button = FormControl
                Btn.BackColor = AddinGlobal.ControlBackColour
                Btn.ForeColor = AddinGlobal.ForeColour
            Case "Label"
                Dim Lbl As Label = FormControl
                Lbl.BackColor = AddinGlobal.BackColour
                Lbl.ForeColor = AddinGlobal.ForeColour
            Case "TextBox"
                Dim TxtBox As Windows.Forms.TextBox = FormControl
                TxtBox.BackColor = AddinGlobal.ControlHighlightedColour
                TxtBox.ForeColor = AddinGlobal.ForeColour
            Case "DateTimePicker"
                Dim DateTimePickR As DateTimePicker = FormControl
                DateTimePickR.CalendarMonthBackground = AddinGlobal.ControlBackColour
                DateTimePickR.CalendarForeColor = AddinGlobal.ForeColour
       End Select

    Next
End Sub

The AddinGlobal object allows us to store the values so we can store the colour setting globally.

[josh.nieman]

@AlexFielder Thank you, that's a wonderful thing to share!  You just saved me a fair amount of tedious work.

It's unfortunate I couldn't seem to find a way to "inherit" an Inventor form or propertyset of some kind, to simply use whatever it has.  However, the next best idea I had was exactly what you did - set the hard values somewhere I can just reference it universally and only have one place to update.

I'm unclear what your "addinglobal" object is, however.  Or rather, how you use it, I should say.  Is that the actual main Form of your addin?  Or is it a "dummy" form object with nothing but stored-property-defaults you can then inherit from for any and all forms you create thereafter?

Bonus points: Since this thread is a year old, have you updated or added any other color values or controls/objects since, that might save me from hearing about it from users who catch something I miss?  🙂


ETA: Or is this just a custom class (POCO) you have similarly-named properties on just to store vals?

[Curtis_Waguespack]

I'm going to piggyback on to this thread, and ask about custom Ribbon buttons in dark mode...

Am I overlooking something for getting the ribbon buttons to look okay in dark mode? I have button icons that look fine in light mode, but are pretty ugly when switched to dark mode. 

Is there a trick to this? Surely we don't need to create 2 versions of each icon.. do we?

[josh.nieman]

I can at least confirm that you're not alone.  Inventor seems to handle transparency very poorly, so if your button has any SEMI-transparent pixels, it can have unpredictable results.

The short of it is: Don't have semi-transparent pixels unless the alpha channel color is the same color as the Inventor ribbon background.

Alternatively: have an icon for dark or light and switch them depending on Inventor theme.  That might end up being the way I go, just so I can have nicer icons with some anti-aliasing / smoothing / shadows / whatever, as I go.

Here are two example buttons of mine that , afaik, were made via the exact same process, but the one on the right has some issues that drive me nuts trying to fix.

Better would be that Inventor handles them differently, somehow, but I'm not a UI guy, so there may be good reasons they do things the way they do, and don't change it, even today.  I don't know.  Seems like it benefit from some improvement, though, since apparently this has been a struggle since Brian Ekins first put out his Inventor addin guide info.


ETA:  Hopefully that's what you were referring to 🙂  If not, maybe a screenshot will help.  Also, I think it's just hard to find colors that do actually "work" well in both themes.  I dislike the buttons I show because I feel they're too dark for dark mode (despite me being a strongly-opinioned darkmode user, my icons look better in the default mode until I fix it)

So I think in the end I'll have to do what Autodesk devs did... separate icons for each mode.   

[Curtis_Waguespack]

@josh.nieman 

Yes you've shown and described the issue I was referring to perfectly. Thank you for confirming that I am not overlooking something. 

I personally have no preference for either mode, but would like to be able to accommodate both, for users that do have a preference.

I was guessing that I was going to have to create a set of icons for each mode, but wanted to make sure this was the case before doing so.

[josh.nieman]

Bonus tip:
I'm not an artist by any means.  So I found I could infer some "style tips" from what Autodesk does with their icons, to help my stuff look clean and consistent.  Might be worth looking at if you haven't already.

Here's an example of one .dll's set of icons where you can see differences in how they outline (or don't) certain features and there are subtle differences in the colors depending on which theme it's intended for.  I use BeCyIconGrabber as referenced here: https://forums.autodesk.com/t5/inventor-forum/ribbon-icons-folder-location/m-p/8237470/highlight/tru... 

...\Program Files\Inventor 2022\en-US\FDAAddInRes.dll