PowerShell Universal
DownloadsIssuesDiscordForums
v5
v5
  • ❓About
  • 🆕What's New in v5?
  • ⏯️Get Started
  • 📺Video Library
  • 📚Additional Resources
  • ⬇️Installation
    • Docker
    • Upgrade
    • Uninstall
    • Downgrade
    • Migrate and Restore
  • 🔑Licensing
  • 📊System Requirements
  • 🌐Supported Browsers
  • Release Support Policy
  • Cmdlet Help
  • 🔌API
    • About
    • Endpoints
    • OpenAPI
    • Event Hubs
    • Security
    • Error Handling
    • Rate Limiting
  • 🤖Automation
    • About Automation
    • Scripts
      • Parameters
    • Jobs
    • Schedules
    • Terminals
    • Tests
    • Triggers
  • 📊Apps
    • About
    • Apps
    • Components
      • Pages
      • Data Display
        • Alert
        • Badge
        • Chip
        • Data Grid
        • Date and Time
        • Icon
        • List
        • Markdown
        • Table
        • Timeline
        • Tooltip
        • Tree View
        • Typography
      • Data Visualization
        • Charts
        • Image
        • Map
      • Feedback
        • Backdrop
        • Modal
        • Progress
        • Skeleton
      • Inputs
        • Autocomplete
        • Button
        • Checkbox
        • Code Editor
        • Date Picker
        • Editor
        • Floating Action Button
        • Form
        • Radio
        • Rating
        • Select
        • Slider
        • Switch
        • Textbox
        • Time Picker
        • Transfer List
        • Upload
      • Navigation
        • Drawer
        • Link
        • Menu
        • Stepper
        • Tabs
      • Layout
        • Grid Layout
        • Grid
        • Hidden
        • Stack
      • Utilities
        • Dynamic Regions
        • Element
        • Error Boundary
        • Protect Section
        • Transitions
        • HTML
      • Surfaces
        • AppBar
        • Card
        • Paper
        • Expansion Panel
      • Custom Components
        • Building Custom JavaScript Components
    • Custom Variable Scopes
    • Interaction
    • Role Based Access
    • Scheduled Endpoints
    • Sessions
    • Static Apps
    • Themes
      • Colors
      • Cascading Style Sheets
      • Styles
  • 🌐Portal
    • About the Universal Portal
    • Portal Pages
    • Portal Widgets
      • Syntax
      • Conditions
      • Dynamic
      • Forms
      • Properties
      • Services
      • Tables
  • 🏗️Platform
    • Cache
    • Computers
    • Health Checks
    • Gallery
    • Middleware
    • Modules
    • Monitoring
    • Notifications
    • Plugins
    • Published Folders
    • Tags
    • Telemetry
    • Translations
    • User Sessions
    • Variables
  • 🔒Security
    • About
    • Local Accounts
    • Forms Authentication
    • Authorization
    • App Tokens
    • Enterprise Security
      • Client Certificate
      • OpenID Connect
      • SAML2
      • WS-Federation
      • Windows SSO
      • Permissions
  • ⚙️Configuration
    • Agent
    • App Settings
    • Best Practices
    • Branding
    • Command Line Options
    • Deployments
    • Environments
    • Feature Flags
    • Git
    • Hosting
      • Azure
      • High Availability
      • IIS
      • Reverse Proxy
    • Management API
    • Module
    • Persistence
    • psu Command Line Tool
    • Repository
    • Running as a Service Account
  • 👩‍💻Development
    • Debugging Scripts
    • Editor
    • Hangfire
    • Logging
    • Profiling
    • Visual Studio Code Extension
  • Changelogs
    • Changelog
    • Extension Changelog
    • Roadmap
    • CVEs
Powered by GitBook

PowerShell Universal

  • Downloads
  • Pricing
  • Gallery

Community

  • Issues
  • Forums
  • Discord

Support

  • Portal
  • Knowledgebase

Copyright 2025 Ironman Software

On this page
  • Built-In Themes
  • Setting the default theme
  • Custom Themes
  • Changing the background color
  • Supporting dark and light palettes
  • Changing the font size
  • Changing default button colors
  • Component Overrides
  • Example Themes

Was this helpful?

Edit on GitHub
Export as PDF
  1. Apps

Themes

Custom themes for PowerShell Universal apps.

Built-In Themes

You can use built-in themes by using the Get-UDTheme cmdlet. If you run the cmdlet without parameters, it will return a list of all available themes.

$Theme = Get-UDTheme -Name 'MaterialDesign'
New-UDApp -Theme $Theme -Title 'Hello' -Content {
    New-UDButton -Text "Test " -OnClick {
        Show-UDToast -Message 'HEllo'
    }
}

Setting the default theme

You can set the default theme to either Light or Dark using the -DefaultTheme parameter.

New-UDApp -Title 'Hello' -Content {
    New-UDButton -Text "Test " -OnClick {
        Show-UDToast -Message 'HEllo'
    }
} -DefaultTheme dark

Custom Themes

Here's an example of changing the theme's main color.

$Theme = @{
    palette = @{
        primary = @{
            main = '#111111'
        }
    }
}
New-UDApp -Theme $Theme -Title 'Hello' -Content {
    New-UDButton -Text "Test " -OnClick {
        Show-UDToast -Message 'HEllo'
    }
}

Note that when specifying keys that require a number, ensure that the key is specified as a string.

grey = @{
    '50'              = '#fafafa'
    '100'             = '#f5f5f5'
    '200'             = '#eeeeee'
    '300'             = '#e0e0e0'
    '400'             = '#bdbdbd'
    '500'             = '#9e9e9e'
    '600'             = '#757575'
    '700'             = '#616161'
    '800'             = '#424242'
    '900'             = '#212121'
    A100              = '#d5d5d5'
    A200              = '#aaaaaa'
    A400              = '#303030'
    A700              = '#616161'
    contrastThreshold = '3'
    getContrastText   = 'f E()'
    augmentColor      = 'f B()'
    tonalOffset       = '0.2'
}

Changing the background color

You can change the page background color by setting the background default color. To adjust the header background color, set the primary main color.

$Theme = @{
    palette = @{
        primary = @{
            main = '#876a38'
        }
        background = @{
            default = '#876a38'
        }
    }
}
New-UDApp -Theme $Theme -Title 'Hello' -Content {
    New-UDButton -Text 'Hello' 
}

Supporting dark and light palettes

To support dark and light palettes, you can define a dark and light sections in your hashtable. They have the same properties as a theme.

$Theme = @{
    light = @{
        palette = @{
            primary = @{
                main = "#fff"
            }
        }
    }
    dark = @{
        palette = @{
            primary = @{
                main = "#333"
            }
        }
    }
}
New-UDApp -Theme $Theme -Title 'Hello' -Content {
    New-UDButton -Text 'Hello' 
}

Changing the font size

To change the font size, set the typography fontSize property.

$Theme = @{
    typography = @{
        fontSize = 20
    }
}
New-UDApp -Theme $Theme -Title 'Hello' -Content {
    New-UDButton -Text 'Hello' 
}

Changing default button colors

$Theme = @{
    palette = @{
        grey = @{
            '300' = '#000'
        }
    }
}
New-UDApp -Theme $Theme -Title 'Hello' -Content {
    New-UDButton -Text 'Small Button'
}

Component Overrides

You can override any component CSS value using the theme engine. In order to override a component's base theming, you will need to identify the CSS class name applied to that element.

To identify a component's CSS classes, use the developer tools of your browser. Right click on the component you wish to style and click Inspect Element.

This will highlight the HTML elements that make up that component. In the image below, you will see we have numerous CSS classes being applied such as:

  • MuiButtonBase-root

  • MuiButton-root

  • MuiButton-label

  • MuiTouchRipple-root

In order to override these various elements, you will need to add an overrides key to your theme.

$Theme = @{
   overrides = @{
   
   }
}

Next, you'll need to add keys to the overrides for each element you wish to modify. Notice that I have not included the portion of the class name after the hyphen.

$Theme = @{
   overrides = @{
       MuiButton = @{
       
       }
   }
}

Now, add the subitems you wish to modify to the class name.

$Theme = @{
   overrides = @{
       MuiButton = @{
           root = @{
           
           }
           label = @{
           
           }
       }
   }
}

The last step is to define the CSS properties you wish to apply to elements that use these classes.

$Theme = @{
   overrides = @{
       MuiButton = @{
           root = @{
               padding = 20
           }
           label = @{
               fontSize = 40
           }
       }
   }
}

For more examples, look at the Onepirate and Paperbase themes below that include many component overrides.

Example Themes

Sand

$Theme = @{
  palette = @{
    primary = @{
      light = '#ffe8d6'
      main = '#ddbea9'
      dark = '#cb997e'
    }
    secondary = @{
      light = '#b7b7a4'
      main = '#a5a58d'
      dark = '#6b705c'
    }
  }
}

Compliment

$Theme = @{
  palette = @{
    primary = @{
      light = '#e9c46a'
      main = '#2a9d8f'
      dark = '#264653'
    }
    secondary = @{
      light = '#e9c46a'
      main = '#f4a261'
      dark = '#e76f51'
    }
  }
}

Pastel

$Theme = @{
  palette = @{
    primary = @{
      light = '#ffcdb2'
      main = '#ffb4a2'
      dark = '#e5989b'
    }
    secondary = @{
      light = '#e5989b'
      main = '#b5838d'
      dark = '#6d6875'
    }
  }
}

Onepirate

$Theme = @{
  palette = @{
    primary = @{
      light = '#69696a'
      main = '#28282a'
      dark = '#1e1e1f'
    }
    secondary = @{
      light = '#fff5f8'
      main = '#ff3366'
      dark = '#e62958'
    }
    warning = @{
      main = '#ffc071'
      dark = '#ffb25e'
    }
    error = @{
        xLight = '#ffebee'
        main = '#f44336'
        dark = '#d32f2f'
    }
    success = @{
        xLight = '#e8f5e9'
        main = '#4caf50'
        dark = '#388e3c'
    }
  }
  typography = @{
    fontFamily = "'Work Sans', sans-serif"
    fontSize = 14
    fontWeightLight = 300
    fontWeightRegular = 400
    fontWeightMedium = 700
    fontFamilySecondary = "'Roboto Condensed', sans-serif"
    h1 = @{
        letterSpacing = 0
        fontSize = 60
    }
    h2 = @{
        fontSize = 48
    }
    h3 = @{
        fontSize = 42
    }
    h4 = @{
        fontSize = 36
    }
    h5 = @{
        fontSize = 20
        fontWeight = 100
    }
    h6 = @{
        fontSize = 18
    }
    subtitle1 = @{
        fontSize = 18
    }
    body = @{
        fontSize = 16
    }
    body2 = @{
        fontSize = 14
    }
  }
  overrides = @{
    MuiButton = @{
        root = @{
            borderRadius = 0
            fontWeight = 300
            fontFamily = "'Roboto Condensed', sans-serif"
            padding = 10
            fontSize = 14
            boxShadow = 'none'

        }
    }
    MuiInput = @{
        root = @{
            padding = 0
            backgroundColor = 'white'
            'label + &' = @{
                marginTop = 3
            }
        }
        input = @{
            fontSize = 16
            padding = 16
            border = '1px solid #e9ddd0'
            '&:focus' = @{
                borderColor = '#ff3366'
            }
        }
        'underline:after' = @{
            borderBottom = 'none'
        }
    }
    MuiInputLabel = @{
        root = @{
            fontSize = 18
        }
    }
    MuiFormControl = @{
        root = @{
            border = 'none'
        }
    }
    MuiCard = @{
        root = @{
            boxShadow = 'none'
        }
    }
    MuiPaper = @{
        root = @{
             backgroundColor = '#fff5f8'
        }
        rounded = @{
            borderRadius = 0
        }
    }
  }
}

The dashboard used to generate the above image is included below.

New-UDDashboard -Theme $theme -Title "Onepirate" -Content {
    New-UDTypography -Text 'Upgrade your Sundays' -Variant h2 -Align Center
    New-UDTypography -Text 'Enjoy secret offers up to -70% off the best luxury hotels every Sunday.' -Variant h5 -Align Center
    New-UDElement -Tag div -Attributes @{
        style = @{
            textAlign = 'center'
        }
    } -Content {
        New-UDButton -Text 'Register' -Color secondary
    }
            
    New-UDCard -Title 'SIGN UP' -Content {
        New-UDForm -Content {
            New-UDTextbox -Label 'EMAIL ADDRESS' 
        } -OnSubmit {

        }
    } -Elevation 0
}

Paperbase

$Theme = @{
  palette = @{
    primary = @{
      light = '#63ccff'
      main = '#009be5'
      dark = '#006db3'
    }
  }
  typography = @{
    h5 = @{
      fontWeight = 500
      fontSize = 26
      letterSpacing = 0.5
    }
  }
  shape = @{
    borderRadius = 8
  }
  mixins = @{
    toolbar = @{
      minHeight = 48
    }
  }
  overrides = @{
    MuiDrawer = @{
        paper = @{
          backgroundColor = '#081627'
        }
    }
    MuiButton = @{
        label = @{
            textTransform = 'none'
        }
        contained = @{
          boxShadow = 'none'
          '&:active' = @{
            boxShadow = 'none'
          }
        }
    }
    MuiTabs = @{
        root = @{
          marginLeft = 1
        }
        indicator = @{
          height = 3
          borderTopLeftRadius = 3
          borderTopRightRadius = 3
          backgroundColor = '#000'
        }
    }
    MuiTab = @{
        root = @{
            textTransform = 'none'
            margin = '0 16px'
            minWidth = 0
            padding = 0
        }
    }
    MuiIconButton = @{
        root = @{
          padding = 1
        }
    }
    MuiTooltip = @{
        tooltip = @{
          borderRadius = 4
        }
    }
    MuiDivider = @{
        root = @{
          backgroundColor = 'rgb(255,255,255,0.15)'
        }
    }
    MuiListItemButton = @{
        root = @{
          '&.Mui-selected' = @{
            color = '#4fc3f7'
          }
        }
    }
    MuiListItemText = @{
        primary = @{
            color = 'rgba(255, 255, 255, 0.7) '
          fontSize = 14
          fontWeight = 500
        }
    }
    MuiListItemIcon = @{
        root = @{
          color = 'rgba(255, 255, 255, 0.7) '
          minWidth = 'auto'
          marginRight = 2
          '& svg' = @{
            fontSize = 20
          }
        }
    }
    MuiAvatar = @{
        root = @{
          width = 32
          height = 32
        }
    }
  }
}

This the dashboard used to create the above image.

$Navigation = @(
    New-UDListItem -Label "Home"
    New-UDListItem -Label "Getting Started" -Children {
        New-UDListItem -Label "Installation" -Icon (New-UDIcon -Icon envelope) -OnClick { Invoke-UDRedirect '/installation' }
        New-UDListItem -Label "Usage" -Icon (New-UDIcon -Icon edit) -OnClick { Invoke-UDRedirect '/usage' }
        New-UDListItem -Label "FAQs" -Icon (New-UDIcon -Icon trash) -OnClick { Invoke-UDRedirect '/faqs' }
        New-UDListItem -Label "System Requirements" -Icon (New-UDIcon -Icon bug) -OnClick { Invoke-UDRedirect '/requirements' }
        New-UDListItem -Label "Purchasing" -OnClick { Invoke-UDRedirect '/purchasing'}
    }
)


New-UDApp -Theme $theme -Title "Paperbase" -Content {
    New-UDButton -Text 'Add user' -Color primary
    New-UDCard -Title 'User Info' -Content {
        "No users for this project yet."
    }
} -Navigation $Navigation -NavigationLayout Permanent
PreviousStatic AppsNextColors

Last updated 10 months ago

Was this helpful?

PowerShell Univeral apps are built on MUI. MUI provides a that apps take advantage of. You can utilize this theme system by providing a hashtable of options to the New-UDApp 's -Theme parameter.

For a full list of options available for the theme system, you can look at the .

Based on the Material UI theme, .

Based on the Material UI theme, .

📊
built-in theme system
default theme for MUI
Onepirate
Paperbase
Sand Theme
Paperbase in Universal Dashboard