mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2025-12-07 22:15:38 -05:00
133 lines
2.5 KiB
Markdown
133 lines
2.5 KiB
Markdown
# Theme Property Reference for Plugins
|
|
|
|
Quick reference for commonly used Theme properties in plugin development.
|
|
|
|
## Font Sizes
|
|
|
|
```qml
|
|
Theme.fontSizeSmall // 12px (scaled)
|
|
Theme.fontSizeMedium // 14px (scaled)
|
|
Theme.fontSizeLarge // 16px (scaled)
|
|
Theme.fontSizeXLarge // 20px (scaled)
|
|
```
|
|
|
|
**Note**: These are scaled by `SettingsData.fontScale`
|
|
|
|
## Icon Sizes
|
|
|
|
```qml
|
|
Theme.iconSizeSmall // 16px
|
|
Theme.iconSize // 24px (default)
|
|
Theme.iconSizeLarge // 32px
|
|
```
|
|
|
|
## Spacing
|
|
|
|
```qml
|
|
Theme.spacingXS // Extra small
|
|
Theme.spacingS // Small
|
|
Theme.spacingM // Medium
|
|
Theme.spacingL // Large
|
|
Theme.spacingXL // Extra large
|
|
```
|
|
|
|
## Border Radius
|
|
|
|
```qml
|
|
Theme.cornerRadius // Standard corner radius
|
|
Theme.cornerRadiusSmall // Smaller radius
|
|
Theme.cornerRadiusLarge // Larger radius
|
|
```
|
|
|
|
## Colors
|
|
|
|
### Surface Colors
|
|
```qml
|
|
Theme.surface
|
|
Theme.surfaceContainerLow
|
|
Theme.surfaceContainer
|
|
Theme.surfaceContainerHigh
|
|
Theme.surfaceContainerHighest
|
|
```
|
|
|
|
### Text Colors
|
|
```qml
|
|
Theme.onSurface // Primary text on surface
|
|
Theme.onSurfaceVariant // Secondary text on surface
|
|
Theme.outline // Border/divider color
|
|
```
|
|
|
|
### Semantic Colors
|
|
```qml
|
|
Theme.primary
|
|
Theme.onPrimary
|
|
Theme.secondary
|
|
Theme.onSecondary
|
|
Theme.error
|
|
Theme.warning
|
|
Theme.success
|
|
```
|
|
|
|
### Special Functions
|
|
```qml
|
|
Theme.popupBackground() // Popup background with opacity
|
|
```
|
|
|
|
## Common Patterns
|
|
|
|
### Icon with Text
|
|
```qml
|
|
DankIcon {
|
|
name: "icon_name"
|
|
color: Theme.onSurface
|
|
font.pixelSize: Theme.iconSize
|
|
}
|
|
|
|
StyledText {
|
|
text: "Label"
|
|
color: Theme.onSurface
|
|
font.pixelSize: Theme.fontSizeMedium
|
|
}
|
|
```
|
|
|
|
### Container with Border
|
|
```qml
|
|
Rectangle {
|
|
color: Theme.surfaceContainerHigh
|
|
radius: Theme.cornerRadius
|
|
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
|
|
border.width: 1
|
|
}
|
|
```
|
|
|
|
### Hover Effect
|
|
```qml
|
|
MouseArea {
|
|
hoverEnabled: true
|
|
onEntered: parent.color = Qt.lighter(Theme.surfaceContainerHigh, 1.1)
|
|
onExited: parent.color = Theme.surfaceContainerHigh
|
|
}
|
|
```
|
|
|
|
## Common Mistakes
|
|
|
|
❌ **Wrong**:
|
|
```qml
|
|
font.pixelSize: Theme.fontSizeS // Property doesn't exist
|
|
font.pixelSize: Theme.iconSizeS // Property doesn't exist
|
|
```
|
|
|
|
✅ **Correct**:
|
|
```qml
|
|
font.pixelSize: Theme.fontSizeSmall // Use full name
|
|
font.pixelSize: Theme.iconSizeSmall // Use full name
|
|
```
|
|
|
|
## Checking Available Properties
|
|
|
|
To see all available Theme properties, check `Common/Theme.qml` or use:
|
|
|
|
```bash
|
|
grep "property" Common/Theme.qml
|
|
```
|