Let's get a few things clear here, I know ZERO PowerShell. So this concept was a bit odd to me at first, but also totally awesome. Even though I've never really worked with PowerShell, I decided to give the project a go. I'm always up for a good challenge and learning something new.
The first thing I did was scavenged the PowerShell Universal docs for a few hours to try to wrap my brain around how PowerShell Universal worked. Turns out it is built on top of the Material UI framework, specifically the default theme. So not only does PowerShell Universal convert PowerShell to CSS, but it also converts PowerShell into React components. How cool!
Choosing a styling approach
In PowerShell Universal, there is the option to add a traditional custom CSS file in addition to the theme.ps1 (the intimidating hashtable from earlier) file. Initially, I was excited about this, however, the more I tested it out, it made more sense to embrace PowerShell and use the CSS file as little as possible.
Why? Updating styles in the theme.ps1 file tends to override rules more gracefully than a CSS file. Updating the theme.ps1 file adds extra styles onto the initial rule supplied by Material UI instead of creating a new rule entirely. This removes the need for a bunch of unnecessary !important flags floating around, so for me, this was the obvious choice.
Breaking down the theme.ps1 file
The theme.ps1 file turned out to not be so scary after all. There are two different areas for adding specific styles for dark and light modes. These are then compiled into a dark.css and a light.css and applied whenever a user switches their theme mode.
For these examples, we'll target the top navigation bar with the class .MuiAppBar-root.
As you can see above, the conversion from PowerShell to CSS is quite simple. Just by comparing the two, you can pretty much tell what is going on. The PowerShell Universal docs are also very good at explaining this and giving a few examples of what is possible.
Cool. So I modified a few things, and saw the changes, everything was looking good. Along with the main background colors, the alert component was the first thing I styled.
One problem, my theme.ps1 file was becoming a million miles long. I was duplicating a lot of the same code in both themes when I really only needed to change the value and not the rule itself. This was getting increasingly more annoying, so, I did a thing:
Boom!💥 Now, instead of repeating the same thing in multiple places, we define it once and loop through the colors.json file to pull the color values. This beautiful piece of PowerShell cuts down the theme.ps1 file in half, plus all the colors are contained in one spot. You can also use the colors on components just by referencing them on the page file with the Get-Colors function.
After a few weeks of hackery (this would have been faster, but kids), I came up with some pretty sweet concepts. I put together a sample dashboard to show off some of the components.
Wait, hold up. Is that... dim mode?
Turns out, since all the colors are contained in the JSON file, adding or updating a theme is a breeze. Just swap out a few colors and that's it! Pretty nifty, aye?
Let's go back to the prerequisites:
Overall, I had a great time working on this project and definitely learned more about PowerShell. It was a nice break away from my normal go-to technologies, and working with Chrissy has been fun!
Things to note:
You don't need to know PowerShell to write a theme for PowerShell Universal.
Even though PowerShell Universal converts PowerShell into React components, you do not need to know React either.
You also don't need to know much about the default Material UI theme, but reading their docs does help to create a basic understanding.
PowerShell Universal is actively maintained and adding new features and bug fixes on a regular cadence.
Will I do another project in PowerShell Universal? Perhaps. I'd like to try my hand at creating some custom components as well. I have ideas. 🤓⚗️🔬
Have more questions or just want to chat? Connect with me below. I love hearing and learning from other rad developers!
Hi, I’m Steph Hays. I am a web designer and developer.
This place is my personal code playground and mostly concentrates on recent experiments, projects,
and blog ramblings about my journeys of web development and my life with 2 crazy kids. Want to know more?
Tweet at me, checkout my GitHub, or send me a message!