> 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/fr/applis/themes.md).

# Thèmes

Personnalisez les thèmes des applis PowerShell Universal à l'aide de Get-UDTheme, des tables de hachage de palettes MUI, des modes sombre et clair, de la typographie et des remplacements de styles de

## Thèmes intégrés

Vous pouvez utiliser les thèmes intégrés en utilisant l'applet de commande `Get-UDTheme`. Si vous exécutez l'applet de commande sans paramètres, elle retournera une liste de tous les thèmes disponibles.

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

## Définir le thème par défaut

Vous pouvez définir le thème par défaut à Light ou Dark en utilisant le paramètre `-DefaultTheme`.

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

## Thèmes personnalisés

Les applis PowerShell Universal sont bâties sur MUI. MUI fournit un [système de thèmes intégré ](https://material-ui.com/customization/theming/)dont les applis tirent parti. Vous pouvez utiliser ce système de thèmes en fournissant une table de hachage d'options au paramètre `-Theme` de `New-UDApp`.

Voici un exemple de modification de la couleur principale du thème.

```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" %}
Notez que lorsque vous spécifiez des clés qui nécessitent un nombre, assurez-vous que la clé est spécifiée comme une chaîne.

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

### Changer la couleur d'arrière-plan

Vous pouvez changer la couleur d'arrière-plan de la page en définissant la couleur par défaut de l'arrière-plan. Pour ajuster la couleur d'arrière-plan de l'en-tête, définissez la couleur principale primaire.

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

### Prise en charge des palettes sombre et claire

Pour prendre en charge les palettes sombre et claire, vous pouvez définir des sections dark et light dans votre table de hachage. Elles ont les mêmes propriétés qu'un thème.

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

### Changer la taille de la police

Pour changer la taille de la police, définissez la propriété fontSize de typography.

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

### Changer les couleurs par défaut des boutons

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

Pour une liste complète des options disponibles pour le système de thèmes, vous pouvez consulter le [thème par défaut de MUI](https://material-ui.com/customization/default-theme/).

### Remplacements de composants

Vous pouvez remplacer n'importe quelle valeur CSS d'un composant en utilisant le moteur de thèmes. Pour remplacer le thème de base d'un composant, vous devrez identifier le nom de classe CSS appliqué à cet élément.

Pour identifier les classes CSS d'un composant, utilisez les outils de développement de votre navigateur. Faites un clic droit sur le composant que vous souhaitez styliser et cliquez sur Inspecter l'élément.

Cela mettra en évidence les éléments HTML qui composent ce composant. Vous pouvez avoir de nombreuses classes CSS appliquées, telles que :

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

Afin de remplacer ces différents éléments, vous devrez ajouter une clé `overrides` à votre thème.

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

Ensuite, vous devrez ajouter des clés aux remplacements pour chaque élément que vous souhaitez modifier. Remarquez que je n'ai pas inclus la portion du nom de classe après le trait d'union.

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

Maintenant, ajoutez les sous-éléments que vous souhaitez modifier au nom de classe.

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

La dernière étape consiste à définir les propriétés CSS que vous souhaitez appliquer aux éléments qui utilisent ces classes.

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

Pour plus d'exemples, consultez les thèmes Onepirate et Paperbase ci-dessous qui incluent de nombreux remplacements de composants.

### Exemples de thèmes

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

Basé sur le thème Material UI, [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
        }
    }
  }
}
```

Le tableau de bord utilisé pour générer l'image ci-dessus est inclus ci-dessous.

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

Basé sur le thème Material UI, [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
        }
    }
  }
}

```

Voici le tableau de bord utilisé pour créer l'image ci-dessus.

```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/fr/applis/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.