Material UI Theme Question

I’m a complete noob here, so please forgive me if this is a stupid question. I’ve spent the last week learning MaterialUI themes and have been able to process through theme building pretty well but the issue I’m having currently is figuring out a way to have different color palettes for different components like Cards and Paper elements. Is this possible currently on v3 of UD?

Thought I figured this out last night but realized it wasn’t working as I intended. Still looking for a possibility of declaring different component colors within the material ui theme.

I haven’t touched the new global themes in V3 yet so I can’t comment on that, sorry. I was as confused about the documentation as you are :slight_smile:

However, as an alternative, to touch individual elements on page, you could use UniversalDashboard.Style module instead. I absolutely love it and it’s easy to use!

Here’s an example code for you:

$paperStyleMain = "
    background-color: black;
    .MuiPaper-root {
        background-color: green;   
    }"

    $paperStyleSecondary = "
    .MuiPaper-root {
        background-color: lightblue !important;   
    }"

    New-UDStyle -Style $paperStyleMain -Content {
        New-UDGrid -Container -Content {
            New-UDGrid -Item -ExtraSmallSize 12 -Content {
                New-UDStyle -Style $paperStyleSecondary -Content {
                    New-UDPaper -Content { "xs-12" } -Elevation 2
                }
            }

            New-UDGrid -Item -ExtraSmallSize 6 -Content {
                New-UDPaper -Content { "xs-6" } -Elevation 2
            }

            New-UDGrid -Item -ExtraSmallSize 6 -Content {
                New-UDPaper -Content { "xs-6" } -Elevation 2
            }

            New-UDGrid -Item -ExtraSmallSize 3 -Content {
                New-UDPaper -Content { "xs-3" } -Elevation 2
            }

            New-UDGrid -Item -ExtraSmallSize 3 -Content {
                New-UDPaper -Content { "xs-3" } -Elevation 2
            }

            New-UDGrid -Item -ExtraSmallSize 3 -Content {
                New-UDPaper -Content { "xs-3" } -Elevation 2
            }

            New-UDGrid -Item -ExtraSmallSize 3 -Content {
                New-UDPaper -Content { "xs-3" } -Elevation 2
            }
        }
    }

You can also apply New-UDStyle on everything on your page then add -ID tag to elements on your page and reference them as DIV tag in your CSS:

$paperStyleMain = "
    background-color: black;
    #myPaperObject {
        background-color: green;
        color: red;  
    }"

    New-UDStyle -Style $paperStyleMain -Content {
        New-UDGrid -Container -Content {
            New-UDGrid -Item -ExtraSmallSize 12 -Content {
                New-UDPaper -id "myPaperObject" -Content { "xs-12" } -Elevation 2
            }
        }
    }

You could have a main theme file that you dot source at the start so you can keep your pages clean by only using variables loaded from this page

1 Like

I actually installed this last night and have been playing around with quite a bit. I was hoping to avoid building an entire stylesheet because the global theme looks really cool overall. I just wish there was a simple way to apply more than a 2-3 tone palette (which I’m sure there is I just can’t figure out how to do it).

Thank you for the example code I think this is probably the route ill go if there isn’t a way to re-shade different elements using the MUI theme system.

Just an FYI when or if you get around to messing with the new global themes I found this MUI theme editor and its really intuitive for setting up the simple theme and exporting the required code.

1 Like

Update here: I have figured out the setup with the new global theme in v3 but I’m wanting to possibly add in a background image with some masking or overlay to it similar to this but it seems like with the new system it will certainly require some kind of feature to be added. My question is it even possible to have a global background image at the moment in UD?

You’d have to use custom CSS to setup a background for the dashboard. I put together a doc page for this use-case: https://docs.ironmansoftware.com/dashboard/themes/cascading-style-sheets

1 Like

@adam I won’t admit how many hours i spent figuring this out lastnight but I actually did end up building out a global style using CSS and with the use of the UDStyle Module and UDElement I was able to come up with a pretty slick design for a gradient background thats responsive and looks really clean and I still have my MUI theme incorporated as well so win win.

I found a really nice tool for quickly building out stylesheets that work well with the UDStyle Module it’s called enjoycss.

Looks awesome! Any code you can share, I would love to contribute to the docs to help others.

Sure I’ll get something posted to my Github and post a link here.

1 Like

@adam - https://github.com/aggiebck/UDTheming

I included a cool Gantt Chart Dashboard I’ve been working on and the Code from the picture above. Feel free to use whatever. Hope it helps someone!

Let me know if you have any questions.

1 Like