> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/da/apps/themes.md).

# Temaer

Tilpas app-temaer i PowerShell Universal ved hjælp af Get-UDTheme, MUI-palettehashtables, mørke og lyse tilstande, typografi og tilsidesættelser af komponenttypografier.

## Indbyggede temaer

De kan bruge indbyggede temaer ved hjælp af cmdletten `Get-UDTheme`. Hvis De kører cmdletten uden parametre, returnerer den en liste over alle tilgængelige temaer.

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

## Angivelse af standardtemaet

De kan angive standardtemaet til enten Light eller Dark ved hjælp af parameteren `-DefaultTheme`.

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

## Brugerdefinerede temaer

PowerShell Universal-apps er bygget på MUI. MUI leverer et [indbygget temasystem ](https://material-ui.com/customization/theming/)som apps udnytter. De kan bruge dette temasystem ved at angive en hashtable med indstillinger til `New-UDApp`s `-Theme`-parameter.

Her er et eksempel på ændring af temaets hovedfarve.

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

{% hint style="info" %}
Bemærk, at når De angiver nøgler, der kræver et tal, skal De sikre, at nøglen er angivet som en streng.

```
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'
}
```

{% endhint %}

### Ændring af baggrundsfarven

De kan ændre sidens baggrundsfarve ved at angive baggrundens standardfarve. For at justere headerens baggrundsfarve skal De angive den primære hovedfarve.

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

### Understøttelse af mørke og lyse paletter

For at understøtte mørke og lyse paletter kan De definere en mørk og en lys sektion i Deres hashtable. Sektionerne har de samme egenskaber som et tema.

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

### Ændring af skriftstørrelsen

For at ændre skriftstørrelsen skal De angive egenskaben fontSize under typography.

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

### Ændring af standardknapfarver

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

Hvis De vil se en komplet liste over tilgængelige muligheder for temasystemet, kan De se [standardtemaet for MUI](https://material-ui.com/customization/default-theme/).

### Tilsidesættelser af komponenter

De kan tilsidesætte enhver CSS-værdi for en komponent ved hjælp af temamotoren. For at tilsidesætte en komponents grundlæggende tematisering skal De identificere det CSS-klassenavn, der er anvendt på det pågældende element.

For at identificere en komponents CSS-klasser skal De bruge udviklerværktøjerne i Deres browser. Højreklik på den komponent, De vil anvende typografi på, og klik på Inspect Element.

Dette vil fremhæve de HTML-elementer, der udgør den pågældende komponent. De kan have adskillige CSS-klasser anvendt, f.eks.:

* MuiButtonBase-root
* MuiButton-root
* MuiButton-label
* MuiTouchRipple-root

For at tilsidesætte disse forskellige elementer skal De tilføje en `overrides`-nøgle til Deres tema.

```powershell
$Theme = @{
   overrides = @{
   
   }
}
```

Derefter skal De tilføje nøgler til tilsidesættelserne for hvert element, De vil ændre. Bemærk, at jeg ikke har medtaget den del af klassenavnet, der står efter bindestregen.

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

Tilføj nu de underpunkter, De ønsker at ændre, til klassenavnet.

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

Det sidste trin er at definere de CSS-egenskaber, De ønsker at anvende på elementer, der bruger disse klasser.

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

For flere eksempler kan De se temaerne Onepirate og Paperbase nedenfor, der indeholder mange komponenttilsidesættelser.

### Eksempeltemaer

#### Sand

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

#### Compliment

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

#### Pastel

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

#### Onepirate

Baseret på Material UI-temaet, [Onepirate](https://material-ui.com/store/previews/onepirate/).

```powershell
$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
        }
    }
  }
}
```

Dashboardet, der blev brugt til at generere billedet ovenfor, er medtaget nedenfor.

```powershell
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

Baseret på Material UI-temaet, [Paperbase](https://material-ui.com/store/previews/paperbase/).

```powershell
$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
        }
    }
  }
}

```

Dette er det dashboard, der blev brugt til at oprette billedet ovenfor.

```powershell
$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
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.devolutions.net/powershell-universal/da/apps/themes.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.