Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-05 21:15:38 -05:00
Code Packages Releases Activity

Implement basic color theme picker in Control Center. Remove color picker icon & App text from launcher button.

Browse Source
This commit is contained in:
purian23
2025-07-11 01:13:58 -04:00
parent 8e4f578b32
commit c9d40bf7fb
6 changed files with 454 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
Common/Theme.qml
View File

@@ -5,20 +5,209 @@ pragma ComponentBehavior: Bound
QtObject {
id: root
property color primary: "#D0BCFF"
property color primaryText: "#381E72"
property color primaryContainer: "#4F378B"
property color secondary: "#CCC2DC"
property color surface: "#10121E"
property color surfaceText: "#E6E0E9"
property color surfaceVariant: "#49454F"
property color surfaceVariantText: "#CAC4D0"
property color surfaceTint: "#D0BCFF"
property color background: "#10121E"
property color backgroundText: "#E6E0E9"
property color outline: "#938F99"
property color surfaceContainer: "#1D1B20"
property color surfaceContainerHigh: "#2B2930"
// Theme definitions with complete Material 3 expressive color palettes
property var themes: [
{
name: "Blue",
primary: "#42a5f5",
primaryText: "#ffffff",
primaryContainer: "#1976d2",
secondary: "#8ab4f8",
surface: "#1a1c1e",
surfaceText: "#e3e8ef",
surfaceVariant: "#44464f",
surfaceVariantText: "#c4c7c5",
surfaceTint: "#8ab4f8",
background: "#1a1c1e",
backgroundText: "#e3e8ef",
outline: "#8e918f",
surfaceContainer: "#1e2023",
surfaceContainerHigh: "#292b2f"
},
{
name: "Deep Blue",
primary: "#0061a4",
primaryText: "#ffffff",
primaryContainer: "#004881",
secondary: "#42a5f5",
surface: "#1a1c1e",
surfaceText: "#e3e8ef",
surfaceVariant: "#44464f",
surfaceVariantText: "#c4c7c5",
surfaceTint: "#8ab4f8",
background: "#1a1c1e",
backgroundText: "#e3e8ef",
outline: "#8e918f",
surfaceContainer: "#1e2023",
surfaceContainerHigh: "#292b2f"
},
{
name: "Purple",
primary: "#D0BCFF",
primaryText: "#381E72",
primaryContainer: "#4F378B",
secondary: "#CCC2DC",
surface: "#10121E",
surfaceText: "#E6E0E9",
surfaceVariant: "#49454F",
surfaceVariantText: "#CAC4D0",
surfaceTint: "#D0BCFF",
background: "#10121E",
backgroundText: "#E6E0E9",
outline: "#938F99",
surfaceContainer: "#1D1B20",
surfaceContainerHigh: "#2B2930"
},
{
name: "Green",
primary: "#4caf50",
primaryText: "#ffffff",
primaryContainer: "#388e3c",
secondary: "#81c995",
surface: "#0f1411",
surfaceText: "#e1f5e3",
surfaceVariant: "#404943",
surfaceVariantText: "#c1cbc4",
surfaceTint: "#81c995",
background: "#0f1411",
backgroundText: "#e1f5e3",
outline: "#8b938c",
surfaceContainer: "#1a1f1b",
surfaceContainerHigh: "#252a26"
},
{
name: "Orange",
primary: "#ff6d00",
primaryText: "#ffffff",
primaryContainer: "#e65100",
secondary: "#ffb74d",
surface: "#1c1410",
surfaceText: "#f5f1ea",
surfaceVariant: "#4a453a",
surfaceVariantText: "#cbc5b8",
surfaceTint: "#ffb74d",
background: "#1c1410",
backgroundText: "#f5f1ea",
outline: "#958f84",
surfaceContainer: "#211e17",
surfaceContainerHigh: "#2c291f"
},
{
name: "Red",
primary: "#f44336",
primaryText: "#ffffff",
primaryContainer: "#d32f2f",
secondary: "#f28b82",
surface: "#1c1011",
surfaceText: "#f5e8ea",
surfaceVariant: "#4a3f41",
surfaceVariantText: "#cbc2c4",
surfaceTint: "#f28b82",
background: "#1c1011",
backgroundText: "#f5e8ea",
outline: "#958b8d",
surfaceContainer: "#211b1c",
surfaceContainerHigh: "#2c2426"
},
{
name: "Cyan",
primary: "#00bcd4",
primaryText: "#ffffff",
primaryContainer: "#0097a7",
secondary: "#4dd0e1",
surface: "#0f1617",
surfaceText: "#e8f4f5",
surfaceVariant: "#3f474a",
surfaceVariantText: "#c2c9cb",
surfaceTint: "#4dd0e1",
background: "#0f1617",
backgroundText: "#e8f4f5",
outline: "#8c9194",
surfaceContainer: "#1a1f20",
surfaceContainerHigh: "#252b2c"
},
{
name: "Pink",
primary: "#e91e63",
primaryText: "#ffffff",
primaryContainer: "#c2185b",
secondary: "#f8bbd9",
surface: "#1a1014",
surfaceText: "#f3e8ee",
surfaceVariant: "#483f45",
surfaceVariantText: "#c9c2c7",
surfaceTint: "#f8bbd9",
background: "#1a1014",
backgroundText: "#f3e8ee",
outline: "#938a90",
surfaceContainer: "#1f1b1e",
surfaceContainerHigh: "#2a2428"
},
{
name: "Amber",
primary: "#ffc107",
primaryText: "#000000",
primaryContainer: "#ff8f00",
secondary: "#ffd54f",
surface: "#1a1710",
surfaceText: "#f3f0e8",
surfaceVariant: "#49453a",
surfaceVariantText: "#cac5b8",
surfaceTint: "#ffd54f",
background: "#1a1710",
backgroundText: "#f3f0e8",
outline: "#949084",
surfaceContainer: "#1f1e17",
surfaceContainerHigh: "#2a281f"
},
{
name: "Coral",
primary: "#ffb4ab",
primaryText: "#5f1412",
primaryContainer: "#8c1d18",
secondary: "#f9dedc",
surface: "#1a1110",
surfaceText: "#f1e8e7",
surfaceVariant: "#4a4142",
surfaceVariantText: "#cdc2c1",
surfaceTint: "#ffb4ab",
background: "#1a1110",
backgroundText: "#f1e8e7",
outline: "#968b8a",
surfaceContainer: "#201a19",
surfaceContainerHigh: "#2b2221"
}
]
// Current theme index
property int currentThemeIndex: 0
// Function to switch themes
function switchTheme(themeIndex) {
if (themeIndex >= 0 && themeIndex < themes.length) {
currentThemeIndex = themeIndex
// Simple persistence - store in a property
// In a real application, you might use Qt.labs.settings or another persistence mechanism
}
}
// Dynamic color properties that change based on current theme
property color primary: themes[currentThemeIndex].primary
property color primaryText: themes[currentThemeIndex].primaryText
property color primaryContainer: themes[currentThemeIndex].primaryContainer
property color secondary: themes[currentThemeIndex].secondary
property color surface: themes[currentThemeIndex].surface
property color surfaceText: themes[currentThemeIndex].surfaceText
property color surfaceVariant: themes[currentThemeIndex].surfaceVariant
property color surfaceVariantText: themes[currentThemeIndex].surfaceVariantText
property color surfaceTint: themes[currentThemeIndex].surfaceTint
property color background: themes[currentThemeIndex].background
property color backgroundText: themes[currentThemeIndex].backgroundText
property color outline: themes[currentThemeIndex].outline
property color surfaceContainer: themes[currentThemeIndex].surfaceContainer
property color surfaceContainerHigh: themes[currentThemeIndex].surfaceContainerHigh
// Static colors that don't change with themes
property color archBlue: "#1793D1"
property color success: "#4CAF50"
property color warning: "#FF9800"

32
Widgets/AppLauncherButton.qml
View File

@@ -7,35 +7,21 @@ Rectangle {
property var theme
property var root
width: Math.max(120, launcherRow.implicitWidth + theme.spacingM * 2)
width: 40
height: 32
radius: theme.cornerRadius
color: launcherArea.containsMouse ? Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.12) : Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.08)
anchors.verticalCenter: parent.verticalCenter
Row {
id: launcherRow
Text {
anchors.centerIn: parent
spacing: theme.spacingS
Text {
anchors.verticalCenter: parent.verticalCenter
text: root.osLogo || "apps"
font.family: root.osLogo ? "NerdFont" : theme.iconFont
font.pixelSize: root.osLogo ? theme.iconSize - 2 : theme.iconSize - 2
font.weight: theme.iconFontWeight
color: theme.surfaceText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
Text {
anchors.verticalCenter: parent.verticalCenter
text: "Applications"
font.pixelSize: theme.fontSizeMedium
font.weight: Font.Medium
color: theme.surfaceText
}
text: root.osLogo || "apps"
font.family: root.osLogo ? "NerdFont" : theme.iconFont
font.pixelSize: root.osLogo ? theme.iconSize - 2 : theme.iconSize - 2
font.weight: theme.iconFontWeight
color: theme.surfaceText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
MouseArea {

17
Widgets/ControlCenterPopup.qml
View File

@@ -1537,6 +1537,23 @@ PanelWindow {
}
}
}
// Theme Picker
Column {
width: parent.width
spacing: Theme.spacingS
Text {
text: "Theme"
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
}
ThemePicker {
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
}

184
Widgets/ThemePicker.qml Normal file
View File

@@ -0,0 +1,184 @@
import QtQuick
import "../Common"
Column {
id: themePicker
spacing: Theme.spacingS
Text {
text: "Current Theme: " + Theme.themes[Theme.currentThemeIndex].name
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
anchors.horizontalCenter: parent.horizontalCenter
}
// Theme description
Text {
text: {
var descriptions = [
"Material blue inspired by modern interfaces",
"Deep blue inspired by material 3",
"Rich purple tones for BB elegance",
"Natural green for productivity",
"Energetic orange for creativity",
"Bold red for impact",
"Cool cyan for tranquility",
"Vibrant pink for expression",
"Warm amber for comfort",
"Soft coral for gentle warmth"
]
return descriptions[Theme.currentThemeIndex] || "Select a theme"
}
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
anchors.horizontalCenter: parent.horizontalCenter
wrapMode: Text.WordWrap
width: Math.min(parent.width, 200)
horizontalAlignment: Text.AlignHCenter
}
// Grid layout for 10 themes (2 rows of 5)
Column {
spacing: Theme.spacingS
anchors.horizontalCenter: parent.horizontalCenter
// First row - Blue, Deep Blue, Purple, Green, Orange
Row {
spacing: Theme.spacingM
anchors.horizontalCenter: parent.horizontalCenter
Repeater {
model: 5
Rectangle {
width: 32
height: 32
radius: 16
color: Theme.themes[index].primary
border.color: Theme.outline
border.width: Theme.currentThemeIndex === index ? 2 : 1
scale: Theme.currentThemeIndex === index ? 1.1 : 1.0
Behavior on scale {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.emphasizedEasing
}
}
Behavior on border.width {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.emphasizedEasing
}
}
// Theme name tooltip
Rectangle {
width: nameText.contentWidth + Theme.spacingS * 2
height: nameText.contentHeight + Theme.spacingXS * 2
color: Theme.surfaceContainer
border.color: Theme.outline
border.width: 1
radius: Theme.cornerRadiusSmall
anchors.bottom: parent.top
anchors.bottomMargin: Theme.spacingXS
anchors.horizontalCenter: parent.horizontalCenter
visible: mouseArea.containsMouse
Text {
id: nameText
text: Theme.themes[index].name
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
anchors.centerIn: parent
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
Theme.switchTheme(index)
}
}
}
}
}
// Second row - Red, Cyan, Pink, Amber, Coral
Row {
spacing: Theme.spacingM
anchors.horizontalCenter: parent.horizontalCenter
Repeater {
model: 5
Rectangle {
property int themeIndex: index + 5
width: 32
height: 32
radius: 16
color: themeIndex < Theme.themes.length ? Theme.themes[themeIndex].primary : "transparent"
border.color: Theme.outline
border.width: Theme.currentThemeIndex === themeIndex ? 2 : 1
visible: themeIndex < Theme.themes.length
scale: Theme.currentThemeIndex === themeIndex ? 1.1 : 1.0
Behavior on scale {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.emphasizedEasing
}
}
Behavior on border.width {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.emphasizedEasing
}
}
// Theme name tooltip
Rectangle {
width: nameText2.contentWidth + Theme.spacingS * 2
height: nameText2.contentHeight + Theme.spacingXS * 2
color: Theme.surfaceContainer
border.color: Theme.outline
border.width: 1
radius: Theme.cornerRadiusSmall
anchors.bottom: parent.top
anchors.bottomMargin: Theme.spacingXS
anchors.horizontalCenter: parent.horizontalCenter
visible: mouseArea2.containsMouse && themeIndex < Theme.themes.length
Text {
id: nameText2
text: themeIndex < Theme.themes.length ? Theme.themes[themeIndex].name : ""
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
anchors.centerIn: parent
}
}
MouseArea {
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
if (themeIndex < Theme.themes.length) {
Theme.switchTheme(themeIndex)
}
}
}
}
}
}
}
}

93
Widgets/TopBar.qml
View File

@@ -76,36 +76,21 @@ PanelWindow {
Rectangle {
id: archLauncher
width: Math.max(120, launcherRow.implicitWidth + Theme.spacingM * 2)
width: 40
height: 32
radius: Theme.cornerRadius
color: launcherArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.12) : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08)
anchors.verticalCenter: parent.verticalCenter
Row {
id: launcherRow
Text {
anchors.centerIn: parent
spacing: Theme.spacingS
Text {
anchors.verticalCenter: parent.verticalCenter
text: root.osLogo || "apps" // Use OS logo if detected, fallback to apps icon
font.family: root.osLogo ? "NerdFont" : Theme.iconFont
font.pixelSize: root.osLogo ? Theme.iconSize - 2 : Theme.iconSize - 2
font.weight: Theme.iconFontWeight
color: Theme.surfaceText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
Text {
anchors.verticalCenter: parent.verticalCenter
text: root.isSmallScreen ? "Apps" : "Applications"
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
visible: !root.isSmallScreen || width > 60
}
text: root.osLogo || "apps" // Use OS logo if detected, fallback to apps icon
font.family: root.osLogo ? "NerdFont" : Theme.iconFont
font.pixelSize: root.osLogo ? Theme.iconSize - 2 : Theme.iconSize - 2
font.weight: Theme.iconFontWeight
color: Theme.surfaceText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
MouseArea {
@@ -613,40 +598,40 @@ PanelWindow {
}
// Color Picker Button
Rectangle {
width: 40
height: 32
radius: Theme.cornerRadius
color: colorPickerArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.secondary.r, Theme.secondary.g, Theme.secondary.b, 0.08)
anchors.verticalCenter: parent.verticalCenter
// Rectangle {
// width: 40
// height: 32
// radius: Theme.cornerRadius
// color: colorPickerArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.secondary.r, Theme.secondary.g, Theme.secondary.b, 0.08)
// anchors.verticalCenter: parent.verticalCenter
Text {
anchors.centerIn: parent
text: "colorize" // Material icon for color picker
font.family: Theme.iconFont
font.pixelSize: Theme.iconSize - 6
font.weight: Theme.iconFontWeight
color: Theme.surfaceText
}
// Text {
// anchors.centerIn: parent
// text: "colorize" // Material icon for color picker
// font.family: Theme.iconFont
// font.pixelSize: Theme.iconSize - 6
// font.weight: Theme.iconFontWeight
// color: Theme.surfaceText
// }
MouseArea {
id: colorPickerArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
// MouseArea {
// id: colorPickerArea
// anchors.fill: parent
// hoverEnabled: true
// cursorShape: Qt.PointingHandCursor
onClicked: {
ColorPickerService.pickColor()
}
}
// onClicked: {
// ColorPickerService.pickColor()
// }
// }
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
// Behavior on color {
// ColorAnimation {
// duration: Theme.shortDuration
// easing.type: Theme.standardEasing
// }
// }
// }
// Notification Center Button
Rectangle {

3
Widgets/qmldir
View File

@@ -21,4 +21,5 @@ BatteryWidget 1.0 BatteryWidget.qml
BatteryControlPopup 1.0 BatteryControlPopup.qml
PowerButton 1.0 PowerButton.qml
PowerMenuPopup 1.0 PowerMenuPopup.qml
PowerConfirmDialog 1.0 PowerConfirmDialog.qml
PowerConfirmDialog 1.0 PowerConfirmDialog.qml
ThemePicker 1.0 ThemePicker.qml