> 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/es/aplicaciones/themes.md).

# Temas

## Temas integrados

Puede utilizar temas integrados mediante el cmdlet `Get-UDTheme`. Si ejecuta el cmdlet sin parámetros, devolverá una lista de todos los temas disponibles.

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

## Establecer el tema predeterminado

Puede establecer el tema predeterminado en Light o Dark mediante el parámetro `-DefaultTheme`.

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

## Temas personalizados

Las aplicaciones de PowerShell Universal se basan en MUI. MUI proporciona un [sistema de temas integrado ](https://material-ui.com/customization/theming/)del que las aplicaciones se benefician. Puede utilizar este sistema de temas proporcionando una tabla hash de opciones al parámetro `-Theme` de `New-UDApp`.

Aquí tiene un ejemplo de cómo cambiar el color principal del tema.

```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" %}
Tenga en cuenta que, al especificar claves que requieren un número, asegúrese de que la clave se especifique como una cadena.

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

### Cambiar el color de fondo

Puede cambiar el color de fondo de la página estableciendo el color default de background. Para ajustar el color de fondo del encabezado, establezca el color main de primary.

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

![](/files/MgBRRBtCAbiiAYQSm8OD)

### Compatibilidad con paletas oscuras y claras

Para admitir paletas oscuras y claras, puede definir secciones dark y light en su tabla hash. Tienen las mismas propiedades que un tema.

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

![](/files/sOtLrckChd5l6pTXHajt)

### Cambiar el tamaño de la fuente

Para cambiar el tamaño de la fuente, establezca la propiedad fontSize de typography.

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

![](/files/fY5WPawXgWxF1on0UuwO)

### Cambiar los colores predeterminados de los botones

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

![](/files/63rhhD7CQCI9Vlj408rX)

Para ver una lista completa de las opciones disponibles para el sistema de temas, consulte el [tema predeterminado de MUI](https://material-ui.com/customization/default-theme/).

### Anulaciones de componentes

Puede anular cualquier valor CSS de un componente utilizando el motor de temas. Para anular el tema base de un componente, deberá identificar el nombre de la clase CSS aplicada a ese elemento.

Para identificar las clases CSS de un componente, utilice las herramientas de desarrollo de su navegador. Haga clic con el botón derecho en el componente al que desea aplicar estilo y haga clic en Inspeccionar elemento.

Esto resaltará los elementos HTML que componen ese componente. En la imagen siguiente, verá que se aplican numerosas clases CSS, como:

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

![](/files/coxeHY8vuwcGcNkkFqHT)

Para anular estos distintos elementos, deberá añadir una clave `overrides` a su tema.

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

A continuación, deberá añadir claves a las anulaciones para cada elemento que desee modificar. Observe que no he incluido la parte del nombre de la clase posterior al guion.

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

Ahora, añada al nombre de la clase los subelementos que desee modificar.

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

El último paso es definir las propiedades CSS que desea aplicar a los elementos que utilizan estas clases.

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

Para más ejemplos, consulte los temas Onepirate y Paperbase que figuran a continuación, que incluyen muchas anulaciones de componentes.

### Temas de ejemplo

#### Sand

![Tema Sand](/files/cFuXjrredKh0EACCiYzm)

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

#### Compliment

![](/files/Gq16vTG1ILZLYLXB3Lpp)

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

#### Pastel

![](/files/WexBkWsoybGL190NPClA)

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

#### Onepirate

![](/files/l2239Dlo8OwPpRIkj7Ea)

Basado en el tema de 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
        }
    }
  }
}
```

El panel utilizado para generar la imagen anterior se incluye a continuación.

```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 en Universal Dashboard](/files/RdG3P5vFeW3dCzb0whZn)

Basado en el tema de 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
        }
    }
  }
}

```

Este es el panel utilizado para crear la imagen anterior.

```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/es/aplicaciones/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.