From 4cbe766cbd016fc6dade29d014772232744f9bb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hu=E1=BB=B3nh=20Thi=E1=BB=87n=20L=E1=BB=99c?= Date: Sun, 21 Jun 2026 14:57:08 +0700 Subject: [PATCH] feat(wallpaper): support configurable background color (#2671) * feat(wallpaper): support configurable background color * chore(translations): update settings search index * revert(wallpaper): keep Pad naming instead of Center --- quickshell/Common/SettingsData.qml | 18 +++++++++++++++ quickshell/Common/settings/SettingsSpec.js | 2 ++ .../Modules/BlurredWallpaperBackground.qml | 11 ++++++++++ quickshell/Modules/Greetd/GreetdSettings.qml | 20 +++++++++++++++++ quickshell/Modules/Greetd/GreeterContent.qml | 5 +++++ quickshell/Modules/Lock/LockScreenContent.qml | 5 +++++ quickshell/Modules/Settings/WallpaperTab.qml | 22 +++++++++++++++++++ quickshell/Modules/WallpaperBackground.qml | 11 ++++++++++ .../translations/settings_search_index.json | 20 ++++++++--------- 9 files changed, 103 insertions(+), 11 deletions(-) diff --git a/quickshell/Common/SettingsData.qml b/quickshell/Common/SettingsData.qml index a308c430..8834e329 100644 --- a/quickshell/Common/SettingsData.qml +++ b/quickshell/Common/SettingsData.qml @@ -242,6 +242,24 @@ Singleton { property string wallpaperFillMode: "Fill" property bool blurredWallpaperLayer: false property bool blurWallpaperOnOverview: false + property string wallpaperBackgroundColorMode: "black" + property string wallpaperBackgroundCustomColor: "#000000" + readonly property color effectiveWallpaperBackgroundColor: { + switch (wallpaperBackgroundColorMode) { + case "black": + return "#000000"; + case "white": + return "#ffffff"; + case "primary": + return Theme.primary; + case "surface": + return Theme.surfaceContainer; + case "custom": + return wallpaperBackgroundCustomColor; + default: + return "#000000"; + } + } property bool frameEnabled: false onFrameEnabledChanged: saveSettings() diff --git a/quickshell/Common/settings/SettingsSpec.js b/quickshell/Common/settings/SettingsSpec.js index 312c6cad..b4732712 100644 --- a/quickshell/Common/settings/SettingsSpec.js +++ b/quickshell/Common/settings/SettingsSpec.js @@ -74,6 +74,8 @@ var SPEC = { wallpaperFillMode: { def: "Fill" }, blurredWallpaperLayer: { def: false }, blurWallpaperOnOverview: { def: false }, + wallpaperBackgroundColorMode: { def: "black" }, + wallpaperBackgroundCustomColor: { def: "#000000" }, showLauncherButton: { def: true }, showWorkspaceSwitcher: { def: true }, diff --git a/quickshell/Modules/BlurredWallpaperBackground.qml b/quickshell/Modules/BlurredWallpaperBackground.qml index 261e08c4..8d179996 100644 --- a/quickshell/Modules/BlurredWallpaperBackground.qml +++ b/quickshell/Modules/BlurredWallpaperBackground.qml @@ -43,6 +43,11 @@ Variants { id: root anchors.fill: parent + Rectangle { + anchors.fill: parent + color: SettingsData.effectiveWallpaperBackgroundColor + } + function encodeFileUrl(path) { if (!path) return ""; @@ -137,6 +142,12 @@ Variants { function onWallpaperFillModeChanged() { root.invalidate(); } + function onWallpaperBackgroundColorModeChanged() { + root.invalidate(); + } + function onWallpaperBackgroundCustomColorChanged() { + root.invalidate(); + } } Connections { diff --git a/quickshell/Modules/Greetd/GreetdSettings.qml b/quickshell/Modules/Greetd/GreetdSettings.qml index 49e6cb71..66003eb5 100644 --- a/quickshell/Modules/Greetd/GreetdSettings.qml +++ b/quickshell/Modules/Greetd/GreetdSettings.qml @@ -79,6 +79,24 @@ Singleton { property var screenPreferences: ({}) property int animationSpeed: 2 property string wallpaperFillMode: "Fill" + property string wallpaperBackgroundColorMode: "black" + property string wallpaperBackgroundCustomColor: "#000000" + readonly property color effectiveWallpaperBackgroundColor: { + switch (wallpaperBackgroundColorMode) { + case "black": + return "#000000"; + case "white": + return "#ffffff"; + case "primary": + return (typeof Theme !== "undefined") ? Theme.primary : "#000000"; + case "surface": + return (typeof Theme !== "undefined") ? Theme.surfaceContainer : "#000000"; + case "custom": + return wallpaperBackgroundCustomColor; + default: + return "#000000"; + } + } function parseSettings(content) { try { @@ -147,6 +165,8 @@ Singleton { screenPreferences = settings.screenPreferences !== undefined ? settings.screenPreferences : ({}); animationSpeed = settings.animationSpeed !== undefined ? settings.animationSpeed : 2; wallpaperFillMode = settings.wallpaperFillMode !== undefined ? settings.wallpaperFillMode : "Fill"; + wallpaperBackgroundColorMode = settings.wallpaperBackgroundColorMode !== undefined ? settings.wallpaperBackgroundColorMode : "black"; + wallpaperBackgroundCustomColor = settings.wallpaperBackgroundCustomColor !== undefined ? settings.wallpaperBackgroundCustomColor : "#000000"; if (typeof Theme !== "undefined") { if (currentThemeName === "custom" && customThemeFile) { diff --git a/quickshell/Modules/Greetd/GreeterContent.qml b/quickshell/Modules/Greetd/GreeterContent.qml index 7d3c6bbf..8af25d0b 100644 --- a/quickshell/Modules/Greetd/GreeterContent.qml +++ b/quickshell/Modules/Greetd/GreeterContent.qml @@ -794,6 +794,11 @@ Item { } } + Rectangle { + anchors.fill: parent + color: GreetdSettings.effectiveWallpaperBackgroundColor + } + DankBackdrop { anchors.fill: parent screenName: root.screenName diff --git a/quickshell/Modules/Lock/LockScreenContent.qml b/quickshell/Modules/Lock/LockScreenContent.qml index e49ec2e6..6649a585 100644 --- a/quickshell/Modules/Lock/LockScreenContent.qml +++ b/quickshell/Modules/Lock/LockScreenContent.qml @@ -182,6 +182,11 @@ Item { } } + Rectangle { + anchors.fill: parent + color: SettingsData.effectiveWallpaperBackgroundColor + } + Loader { anchors.fill: parent active: { diff --git a/quickshell/Modules/Settings/WallpaperTab.qml b/quickshell/Modules/Settings/WallpaperTab.qml index 996640fd..67824456 100644 --- a/quickshell/Modules/Settings/WallpaperTab.qml +++ b/quickshell/Modules/Settings/WallpaperTab.qml @@ -354,6 +354,28 @@ Item { } } + ColorDropdownRow { + tab: "wallpaper" + tags: ["background", "color", "fill", "fit", "custom"] + settingKey: "wallpaperBackgroundColorMode" + text: I18n.tr("Background Color") + description: I18n.tr("Color shown for areas not covered by wallpaper (e.g. Fit or Pad modes)") + visible: root.currentWallpaper !== "" && !root.currentWallpaper.startsWith("#") + dropdownWidth: 220 + options: [ + { "value": "black", "label": I18n.tr("Black") }, + { "value": "white", "label": I18n.tr("White") }, + { "value": "primary", "label": I18n.tr("Primary Theme Color") }, + { "value": "surface", "label": I18n.tr("Surface Container") }, + { "value": "custom", "label": I18n.tr("Custom") } + ] + currentMode: SettingsData.wallpaperBackgroundColorMode + customColor: SettingsData.wallpaperBackgroundCustomColor || "#000000" + pickerTitle: I18n.tr("Wallpaper Background Color") + onModeSelected: mode => SettingsData.set("wallpaperBackgroundColorMode", mode) + onCustomColorSelected: selectedColor => SettingsData.set("wallpaperBackgroundCustomColor", selectedColor.toString()) + } + Rectangle { width: parent.width height: 1 diff --git a/quickshell/Modules/WallpaperBackground.qml b/quickshell/Modules/WallpaperBackground.qml index 8ac22b16..43dd00bd 100644 --- a/quickshell/Modules/WallpaperBackground.qml +++ b/quickshell/Modules/WallpaperBackground.qml @@ -42,6 +42,11 @@ Variants { id: root anchors.fill: parent + Rectangle { + anchors.fill: parent + color: SettingsData.effectiveWallpaperBackgroundColor + } + function encodeFileUrl(path) { if (!path) return ""; @@ -131,6 +136,12 @@ Variants { function onWallpaperFillModeChanged() { root.invalidate(); } + function onWallpaperBackgroundColorModeChanged() { + root.invalidate(); + } + function onWallpaperBackgroundCustomColorChanged() { + root.invalidate(); + } } Connections { diff --git a/quickshell/translations/settings_search_index.json b/quickshell/translations/settings_search_index.json index cd2d1c6f..98797ba9 100644 --- a/quickshell/translations/settings_search_index.json +++ b/quickshell/translations/settings_search_index.json @@ -343,28 +343,26 @@ "category": "Personalization", "keywords": [ "appearance", + "areas", "background", "bg", + "color", + "colour", + "covered", "custom", "customize", - "dark", - "dark mode", - "day", "desktop", - "different", + "hue", "image", - "light", - "light mode", - "mode", - "night", "personal", "personalization", "picture", - "wallpaper", - "wallpapers" + "shown", + "tint", + "wallpaper" ], "icon": "wallpaper", - "description": "Set different wallpapers for light and dark mode" + "description": "Color shown for areas not covered by wallpaper (e.g. Fit or Pad modes)" }, { "section": "selectedMonitor",