> 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/de/apps/themes.md).

# Themes

## Integrierte Themes

Sie können integrierte Themes mit dem Cmdlet `Get-UDTheme` verwenden. Wenn Sie das Cmdlet ohne Parameter ausführen, gibt es eine Liste aller verfügbaren Themes zurück.

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

## Festlegen des Standard-Themes

Sie können das Standard-Theme mit dem Parameter `-DefaultTheme` entweder auf Light oder Dark festlegen.

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

## Benutzerdefinierte Themes

PowerShell Universal-Apps basieren auf MUI. MUI stellt ein [integriertes Theme-System ](https://material-ui.com/customization/theming/)bereit, das Apps nutzen. Sie können dieses Theme-System nutzen, indem Sie dem Parameter `-Theme` von `New-UDApp` eine Hashtable mit Optionen übergeben.

Hier ist ein Beispiel für die Änderung der Hauptfarbe des Themes.

```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" %}
Beachten Sie, dass bei der Angabe von Schlüsseln, die eine Zahl erfordern, sichergestellt werden muss, dass der Schlüssel als Zeichenfolge angegeben wird.

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

### Ändern der Hintergrundfarbe

Sie können die Hintergrundfarbe der Seite ändern, indem Sie die Standardhintergrundfarbe festlegen. Um die Hintergrundfarbe der Kopfzeile anzupassen, legen Sie die primäre Hauptfarbe fest.

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

![](/files/Jz3gt6Elnys2CXwBBhwl)

### Unterstützung von dunklen und hellen Paletten

Um dunkle und helle Paletten zu unterstützen, können Sie in Ihrer Hashtable einen dunklen und einen hellen Abschnitt definieren. Sie haben dieselben Eigenschaften wie ein Theme.

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

![](/files/6AG00SCWfqdzIZxLuvX6)

### Ändern der Schriftgröße

Um die Schriftgröße zu ändern, legen Sie die Eigenschaft fontSize der Typografie fest.

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

![](/files/NCDIoZV6iztKVaGUXbfT)

### Ändern der Standardfarben von Schaltflächen

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

![](/files/qf2D1xUSeiGn6zLTZkDT)

Eine vollständige Liste der für das Theme-System verfügbaren Optionen finden Sie im [Standard-Theme für MUI](https://material-ui.com/customization/default-theme/).

### Komponenten-Überschreibungen

Sie können jeden CSS-Wert einer Komponente über die Theme-Engine überschreiben. Um das Basis-Theming einer Komponente zu überschreiben, müssen Sie den CSS-Klassennamen identifizieren, der auf dieses Element angewendet wird.

Verwenden Sie die Entwicklertools Ihres Browsers, um die CSS-Klassen einer Komponente zu identifizieren. Klicken Sie mit der rechten Maustaste auf die Komponente, die Sie gestalten möchten, und klicken Sie auf Element untersuchen.

Dadurch werden die HTML-Elemente hervorgehoben, aus denen diese Komponente besteht. Im Bild unten sehen Sie, dass zahlreiche CSS-Klassen angewendet werden, wie zum Beispiel:

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

![](/files/lXyy0W1IfcIprSeBX2it)

Um diese verschiedenen Elemente zu überschreiben, müssen Sie Ihrem Theme einen Schlüssel `overrides` hinzufügen.

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

Als Nächstes müssen Sie den Überschreibungen für jedes Element, das Sie ändern möchten, Schlüssel hinzufügen. Beachten Sie, dass ich den Teil des Klassennamens nach dem Bindestrich nicht einbezogen habe.

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

Fügen Sie nun dem Klassennamen die Unterelemente hinzu, die Sie ändern möchten.

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

Der letzte Schritt besteht darin, die CSS-Eigenschaften zu definieren, die Sie auf Elemente anwenden möchten, die diese Klassen verwenden.

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

Weitere Beispiele finden Sie in den nachstehenden Themes Onepirate und Paperbase, die viele Komponenten-Überschreibungen enthalten.

### Beispiel-Themes

#### Sand

![Sand-Theme](/files/jCbmPKOuQrrWxwX40zri)

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

#### Compliment

![](/files/rAb5l3zZpLNG8GQ7bSQl)

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

#### Pastel

![](/files/fBezUMX2ImpkesVXzOdE)

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

#### Onepirate

![](/files/qxhi0mtAaC3GVGSz9KG7)

Basierend auf dem Material UI-Theme [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
        }
    }
  }
}
```

Das Dashboard, mit dem das obige Bild erzeugt wurde, ist unten aufgeführt.

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

![Paperbase in Universal Dashboard](/files/9qfDG3oJ4EIlgHiIAV1s)

Basierend auf dem Material UI-Theme [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
        }
    }
  }
}

```

Dies ist das Dashboard, das zum Erstellen des obigen Bildes verwendet wurde.

```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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.