Skip to content

Album-colored tint background in full view #345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jojo-chaechae wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Album-colored tint background in full view #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9d23da6
feat: album-colored tint background in full view
jojo-chaechae Aug 13, 2026
f3bca67
feat: album-derived gradient option for tint background
jojo-chaechae Aug 13, 2026
12fbc49
fix: group background options as radio choices
jojo-chaechae Sep 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/contents/config/main.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,18 @@
<entry name="fullAlbumCoverAsBackground" type="Bool">
<default>false</default>
</entry>
<entry name="fullAlbumCoverTintBackground" type="Bool">
<default>false</default>
</entry>
<entry name="fullAlbumCoverTintOpacity" type="Double">
<default>0.2</default>
</entry>
<entry name="fullAlbumCoverTintGradient" type="Bool">
<default>false</default>
</entry>
<entry name="fullAlbumCoverTintUseContrastText" type="Bool">
<default>true</default>
</entry>
<entry name="fullViewThumbnailVisible" type="Bool">
<default>true</default>
</entry>
Expand Down
46 changes: 39 additions & 7 deletions src/contents/ui/Full.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,17 @@ Item {
property string albumPlaceholder: plasmoid.configuration.albumPlaceholder
property real volumeStep: plasmoid.configuration.volumeStep
property bool albumCoverBackground: plasmoid.configuration.fullAlbumCoverAsBackground
property bool albumCoverTintBackground: plasmoid.configuration.fullAlbumCoverTintBackground
property real albumCoverTintOpacity: plasmoid.configuration.fullAlbumCoverTintOpacity
property bool albumCoverTintGradient: plasmoid.configuration.fullAlbumCoverTintGradient
property bool albumCoverTintUseContrastText: plasmoid.configuration.fullAlbumCoverTintUseContrastText
// Manually control whether the text uses album-derived contrast colors when the tint is active
readonly property bool useAlbumContrastText: albumCoverBackground || (albumCoverTintBackground && albumCoverTintUseContrastText)

// Applies the configured tint opacity to a color
function tintColor(c) {
return Qt.rgba(c.r, c.g, c.b, albumCoverTintOpacity);
}
property bool thumbnailVisible: plasmoid.configuration.fullViewThumbnailVisible
property bool progressBarVisible: plasmoid.configuration.fullViewProgressBarVisible
property bool volumeControlVisible: plasmoid.configuration.fullViewVolumeControlVisible
Expand Down Expand Up @@ -79,10 +90,9 @@ Item {
id: imageColors
source: albumArtFull
readonly property color bgColor: average
readonly property var bgColorBrightness: Kirigami.ColorUtils.brightnessForColor(bgColor)
readonly property color contrastColor: bgColorBrightness === Kirigami.ColorUtils.Dark ? "white" : "black"
readonly property color fgColor: Kirigami.ColorUtils.tintWithAlpha(bgColor, contrastColor, .6)
readonly property color hlColor: Kirigami.ColorUtils.tintWithAlpha(bgColor, contrastColor, .8)
// Text derived from the album is always bright for readability.
readonly property color fgColor: Kirigami.ColorUtils.tintWithAlpha(bgColor, "white", .8)
readonly property color hlColor: Kirigami.ColorUtils.tintWithAlpha(bgColor, "white", .9)
}

layer.enabled: root.fullAlbumCoverRounded && root.albumCoverRadius > 0
Expand Down Expand Up @@ -113,6 +123,28 @@ Item {
}
}

// A subtle translucent tint derived from the album cover average color.
// Optionally a vertical gradient generated from the album art colors.
Rectangle {
id: tintBackground
visible: albumCoverTintBackground
anchors.fill: parent
gradient: albumCoverTintGradient ? tintGradient : flatGradient
}

Gradient {
id: flatGradient
GradientStop { position: 0.0; color: root.tintColor(imageColors.bgColor) }
GradientStop { position: 1.0; color: root.tintColor(imageColors.bgColor) }
}

Gradient {
id: tintGradient
GradientStop { position: 0.0; color: root.tintColor(Kirigami.ColorUtils.tintWithAlpha(imageColors.bgColor, "white", 0.35)) }
GradientStop { position: 0.5; color: root.tintColor(imageColors.bgColor) }
GradientStop { position: 1.0; color: root.tintColor(Kirigami.ColorUtils.tintWithAlpha(imageColors.bgColor, "black", 0.35)) }
}


ColumnLayout {
id: column
Expand All @@ -122,8 +154,8 @@ Item {

// Override theme ONLY for this layout and its children
Kirigami.Theme.inherit: false
Kirigami.Theme.textColor: albumCoverBackground ? imageColors.fgColor : root._originalTextColor
Kirigami.Theme.highlightColor: albumCoverBackground ? imageColors.hlColor : root._originalHighlightColor
Kirigami.Theme.textColor: root.useAlbumContrastText ? imageColors.fgColor : root._originalTextColor
Kirigami.Theme.highlightColor: root.useAlbumContrastText ? imageColors.hlColor : root._originalHighlightColor

// Media Player Selector
Rectangle {
Expand All @@ -133,7 +165,7 @@ Item {
&& playerList.count > 2
&& player.sourceIdentities == null

color: albumCoverBackground
color: root.useAlbumContrastText
? "transparent"
: Kirigami.Theme.backgroundColor

Expand Down
85 changes: 58 additions & 27 deletions src/contents/ui/config/Full.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ KCM.SimpleKCM {
property alias cfg_fullTitlePosition: fullTitlePosition.value
property alias cfg_fullAlbumPosition: fullAlbumPosition.value
property alias cfg_fullAlbumCoverAsBackground: fullAlbumCoverAsBackground.checked
property alias cfg_fullAlbumCoverTintBackground: fullAlbumCoverTintBackground.checked
property alias cfg_fullAlbumCoverTintOpacity: fullAlbumCoverTintOpacity.value
property alias cfg_fullAlbumCoverTintGradient: fullAlbumCoverTintGradient.checked
property alias cfg_fullAlbumCoverTintUseContrastText: fullAlbumCoverTintUseContrastText.checked
property alias cfg_fullHideAlbumForSingles: fullHideAlbumForSingles.checked
property alias cfg_fullViewThumbnailVisible: fullViewThumbnailVisible.checked
property alias cfg_fullViewProgressBarVisible: fullViewProgressBarVisible.checked
Expand Down Expand Up @@ -420,55 +424,82 @@ KCM.SimpleKCM {
}

RowLayout {
Kirigami.FormData.label: i18n("Background (desktop widget only):")
Kirigami.FormData.label: i18n("Background:")
RadioButton {
text: i18n("Standard")
checked: desktopWidgetBackgroundRadio.value == PlasmaCore.Types.StandardBackground
onCheckedChanged: () => {
if (checked) {
desktopWidgetBackgroundRadio.value = PlasmaCore.Types.StandardBackground
}
checked: !fullAlbumCoverAsBackground.checked
&& !fullAlbumCoverTintBackground.checked
&& desktopWidgetBackgroundRadio.value == PlasmaCore.Types.StandardBackground
onCheckedChanged: {
if (checked) desktopWidgetBackgroundRadio.value = PlasmaCore.Types.StandardBackground
}
ButtonGroup.group: desktopWidgetBackgroundRadio
}
Kirigami.ContextualHelpButton {
toolTipText: (
"The standard background from the theme."
)
toolTipText: i18n("The standard background from the theme.")
}
}
RadioButton {
text: i18n("Transparent")
checked: desktopWidgetBackgroundRadio.value == PlasmaCore.Types.NoBackground
onCheckedChanged: () => {
if (checked) {
desktopWidgetBackgroundRadio.value = PlasmaCore.Types.NoBackground
}
text: i18n("Transparent (desktop only)")
checked: !fullAlbumCoverAsBackground.checked
&& !fullAlbumCoverTintBackground.checked
&& desktopWidgetBackgroundRadio.value == PlasmaCore.Types.NoBackground
onCheckedChanged: {
if (checked) desktopWidgetBackgroundRadio.value = PlasmaCore.Types.NoBackground
}
ButtonGroup.group: desktopWidgetBackgroundRadio
}
RowLayout {
RadioButton {
text: i18n("Transparent (Shadow content)")
checked: desktopWidgetBackgroundRadio.value == PlasmaCore.Types.ShadowBackground
onCheckedChanged: () => {
if (checked) {
desktopWidgetBackgroundRadio.value = PlasmaCore.Types.ShadowBackground
}
text: i18n("Transparent - shadow (desktop only)")
checked: !fullAlbumCoverAsBackground.checked
&& !fullAlbumCoverTintBackground.checked
&& desktopWidgetBackgroundRadio.value == PlasmaCore.Types.ShadowBackground
onCheckedChanged: {
if (checked) desktopWidgetBackgroundRadio.value = PlasmaCore.Types.ShadowBackground
}
ButtonGroup.group: desktopWidgetBackgroundRadio
}
Kirigami.ContextualHelpButton {
toolTipText: (
"The applet won't have a background but a drop shadow of its content done via a shader. The text color will also invert."
)
toolTipText: i18n("The applet has no background, but a drop shadow is applied to its content.")
}
}

CheckBox {
Kirigami.FormData.label: i18n("Use album cover as background")
RadioButton {
id: fullAlbumCoverAsBackground
text: i18n("(Experimental feature)")
text: i18n("Use album cover as background")
ButtonGroup.group: desktopWidgetBackgroundRadio
onClicked: desktopWidgetBackgroundRadio.value = PlasmaCore.Types.StandardBackground
}

RadioButton {
id: fullAlbumCoverTintBackground
text: i18n("Use album cover color as tinted background")
ButtonGroup.group: desktopWidgetBackgroundRadio
onClicked: desktopWidgetBackgroundRadio.value = PlasmaCore.Types.StandardBackground
}

Slider {
Layout.preferredWidth: 10 * Kirigami.Units.gridUnit
enabled: fullAlbumCoverTintBackground.checked
id: fullAlbumCoverTintOpacity
from: 0.05
to: 0.8
stepSize: 0.05
value: 0.2
Kirigami.FormData.label: i18n("Background tint opacity:")
}

CheckBox {
Kirigami.FormData.label: i18n("Use album-derived gradient")
enabled: fullAlbumCoverTintBackground.checked
id: fullAlbumCoverTintGradient
}

CheckBox {
Kirigami.FormData.label: i18n("Use album-derived text color")
enabled: fullAlbumCoverTintBackground.checked
id: fullAlbumCoverTintUseContrastText
}

Kirigami.Separator {
Expand Down
Loading