Updated Theme Documentation and Examples

PowerShell Universal
1

I’ve updated the theme documentation to include some more information on how to override individual component styles. I’ve also included a couple example themes as well. Two of the sample themes I ported from the Material UI sample themes so that they work in UD and are pretty complicated.

There are some improvements we are going to make in the next version to make it easier to apply theme colors to components without having to do anything too crazy and hopefully simplify theming a bit.

3 Likes
2

Hey Adam,

Thank you for this. I’m working on my first theme, and finding this quite useful!

I’m working with the Material UI Theme Creator: Material UI Theme Creator (bareynol.github.io)

There I found I could import google fonts into the Material UI theme. What I can’t seem to figure out is how can I import google fonts into the dashboard, so my theme can use it for fontFamily?

To note, I tried using ‘@import url’ in a CSS file and importing it, but it didn’t work. I set some other CSS styles in the file to prove they were working.

Thanks,
Rob

3

What a neat tool! I will take a look at this and write up some docs around it. Seems like a good solution to simplifying theming…

As for the font, I think you’ll have to include the CSS file in the -Stylesheets parameter of New-UDDashboard. It will load the CSS stylesheet when loading the dashboard.

EDIT: Loving the comic book theme…

image
image909×514 42.9 KB

1 Like
4

Hey Adam,

I was already using a CSS file with -Stylesheets, but wasn’t getting it to work. I found I’m a goofy, goof, and I had a misspelling in my fontFamily value :stuck_out_tongue:

For anyone looking to do this, an old but good article is here: How to import Google Web Font in CSS file? - Stack Overflow

I put this into the top of my CSS file, then provided it to New-UDDashboard with the -Stylesheets parameter:

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

Then, in my $theme hash table, I have:

typography = @{
    fontFamily = "'Nunito Sans', Arial, sans-serif"
    ...
    ...
  }

Thanks,
Rob

1 Like