mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-01-29 07:52:50 -05:00
switch hto monorepo structure
This commit is contained in:
132
quickshell/PLUGINS/THEME_REFERENCE.md
Normal file
132
quickshell/PLUGINS/THEME_REFERENCE.md
Normal file
@@ -0,0 +1,132 @@
|
||||
# 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
|
||||
```
|
||||
Reference in New Issue
Block a user