1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-08-01 19:18:28 -04:00

feat(settings): add explicit border toggle and updated layouts

- Defaults On with blur enabled to clean up the border edges
- Darken Modal moves to Launcher settings

Closes #2446
port 1.5

(cherry picked from commit 92ba2bb57d)
This commit is contained in:
purian23
2026-07-17 12:55:02 -04:00
committed by dms-ci[bot]
parent 840a448b4a
commit dac08b34c6
6 changed files with 139 additions and 103 deletions
+2
View File
@@ -240,6 +240,8 @@ Singleton {
onBlurForegroundLayersChanged: saveSettings()
property real blurLayerOutlineOpacity: 0.12
onBlurLayerOutlineOpacityChanged: saveSettings()
property bool blurBorderEnabled: true
onBlurBorderEnabledChanged: saveSettings()
property string blurBorderColor: "outline"
onBlurBorderColorChanged: saveSettings()
property string blurBorderCustomColor: "#ffffff"
@@ -70,6 +70,7 @@ var SPEC = {
blurEnabled: { def: false },
blurForegroundLayers: { def: true },
blurLayerOutlineOpacity: { def: 0.12, coerce: percentToUnit },
blurBorderEnabled: { def: true },
blurBorderColor: { def: "outline" },
blurBorderCustomColor: { def: "#ffffff" },
blurBorderOpacity: { def: 0.35, coerce: percentToUnit },
@@ -747,6 +747,31 @@ Item {
}
}
SettingsCard {
width: parent.width
iconName: "layers"
title: I18n.tr("Modal Background")
settingKey: "modalBackground"
tags: ["modal", "darken", "background", "overlay", "launcher"]
SettingsControlledByFrame {
visible: SettingsData.frameEnabled
parentModal: root.parentModal
settingLabel: I18n.tr("Darken Modal Background")
reason: I18n.tr("Disabled by Frame Mode")
}
SettingsToggleRow {
settingKey: "modalDarkenBackground"
tags: ["modal", "darken", "background", "overlay", "launcher"]
text: I18n.tr("Darken Modal Background")
description: I18n.tr("Show darkened overlay behind modal dialogs")
visible: !SettingsData.frameEnabled
checked: SettingsData.modalDarkenBackground
onToggled: checked => SettingsData.set("modalDarkenBackground", checked)
}
}
SettingsCard {
width: parent.width
iconName: "open_in_new"
+36 -50
View File
@@ -1734,16 +1734,6 @@ Item {
}
}
}
SettingsToggleRow {
tab: "theme"
tags: ["foreground", "layers", "contrast", "surface", "blur", "glass", "frosted"]
settingKey: "blurForegroundLayers"
text: I18n.tr("Foreground Layers")
description: I18n.tr("Show foreground surfaces on panels for stronger contrast")
checked: SettingsData.blurForegroundLayers ?? true
onToggled: checked => SettingsData.set("blurForegroundLayers", checked)
}
SettingsSliderRow {
tab: "theme"
tags: ["surface", "popup", "transparency", "opacity", "modal"]
@@ -1759,12 +1749,47 @@ Item {
onSliderValueChanged: newValue => SettingsData.set("popupTransparency", newValue / 100)
}
SettingsToggleRow {
tab: "theme"
tags: ["foreground", "layers", "contrast", "surface", "blur", "glass", "frosted"]
settingKey: "blurForegroundLayers"
text: I18n.tr("Foreground Layers")
description: I18n.tr("Show foreground surfaces on panels for stronger contrast")
checked: SettingsData.blurForegroundLayers ?? true
onToggled: checked => SettingsData.set("blurForegroundLayers", checked)
}
SettingsSliderRow {
tab: "theme"
tags: ["foreground", "layers", "outline", "border", "cards", "widgets", "notifications", "control center"]
settingKey: "blurLayerOutlineOpacity"
text: I18n.tr("Layer Outline Opacity")
description: I18n.tr("Controls outlines around foreground cards, pills, and notification cards")
value: Math.round((SettingsData.blurLayerOutlineOpacity ?? 0.12) * 100)
minimum: 0
maximum: 40
unit: "%"
defaultValue: 12
onSliderValueChanged: newValue => SettingsData.set("blurLayerOutlineOpacity", newValue / 100)
}
SettingsToggleRow {
tab: "theme"
tags: ["surface", "popup", "modal", "border", "outline", "edge"]
settingKey: "blurBorderEnabled"
text: I18n.tr("Surface Border Outline")
description: I18n.tr("Outline around shell surfaces")
checked: SettingsData.blurBorderEnabled ?? true
onToggled: checked => SettingsData.set("blurBorderEnabled", checked)
}
SettingsDropdownRow {
tab: "theme"
tags: ["surface", "popup", "modal", "border", "outline", "edge"]
settingKey: "blurBorderColor"
text: I18n.tr("Surface Border Color")
description: I18n.tr("Border color around popouts, modals, and other shell surfaces")
visible: SettingsData.blurBorderEnabled ?? true
options: [I18n.tr("Outline", "surface border color"), I18n.tr("Primary", "surface border color"), I18n.tr("Secondary", "surface border color"), I18n.tr("Text Color", "surface border color"), I18n.tr("Custom", "surface border color")]
optionColorMap: ({
[I18n.tr("Outline", "surface border color")]: Theme.outline,
@@ -1809,6 +1834,7 @@ Item {
settingKey: "blurBorderOpacity"
text: I18n.tr("Surface Border Opacity")
description: I18n.tr("Controls the outline of popouts, modals, and other shell surfaces")
visible: SettingsData.blurBorderEnabled ?? true
value: Math.round((SettingsData.blurBorderOpacity ?? 0.35) * 100)
minimum: 0
maximum: 100
@@ -1817,20 +1843,6 @@ Item {
onSliderValueChanged: newValue => SettingsData.set("blurBorderOpacity", newValue / 100)
}
SettingsSliderRow {
tab: "theme"
tags: ["foreground", "layers", "outline", "border", "cards", "widgets", "notifications", "control center"]
settingKey: "blurLayerOutlineOpacity"
text: I18n.tr("Layer Outline Opacity")
description: I18n.tr("Controls outlines around foreground cards, pills, and notification cards")
value: Math.round((SettingsData.blurLayerOutlineOpacity ?? 0.12) * 100)
minimum: 0
maximum: 40
unit: "%"
defaultValue: 12
onSliderValueChanged: newValue => SettingsData.set("blurLayerOutlineOpacity", newValue / 100)
}
SettingsSliderRow {
tab: "theme"
tags: ["corner", "radius", "rounded", "square"]
@@ -2104,32 +2116,6 @@ Item {
}
}
SettingsCard {
tab: "theme"
tags: ["modal", "darken", "background", "overlay"]
title: I18n.tr("Modal Background")
settingKey: "modalBackground"
iconName: "layers"
SettingsControlledByFrame {
visible: themeColorsTab.frameModeActive
parentModal: themeColorsTab.parentModal
settingLabel: I18n.tr("Darken Modal Background")
reason: I18n.tr("Disabled by Frame Mode")
}
SettingsToggleRow {
tab: "theme"
tags: ["modal", "darken", "background", "overlay"]
settingKey: "modalDarkenBackground"
text: I18n.tr("Darken Modal Background")
description: I18n.tr("Show darkened overlay behind modal dialogs")
visible: !themeColorsTab.frameModeActive
checked: SettingsData.modalDarkenBackground
onToggled: checked => SettingsData.set("modalDarkenBackground", checked)
}
}
SettingsCard {
tab: "theme"
tags: ["applications", "portal", "dark", "terminal"]
+4 -2
View File
@@ -17,6 +17,8 @@ Singleton {
// These settings predate non-blurred surface borders, so keep their keys for compatibility.
readonly property color borderColor: {
if (!(SettingsData.blurBorderEnabled ?? true))
return "transparent";
const opacity = SettingsData.blurBorderOpacity ?? 0.35;
switch (SettingsData.blurBorderColor ?? "outline") {
case "primary":
@@ -26,12 +28,12 @@ Singleton {
case "surfaceText":
return Theme.withAlpha(Theme.surfaceText, opacity);
case "custom":
return Theme.withAlpha(SettingsData.blurBorderCustomColor ?? "#ffffff", opacity);
return Theme.withAlpha(Qt.color(SettingsData.blurBorderCustomColor ?? "#ffffff"), opacity);
default:
return Theme.withAlpha(Theme.outline, opacity);
}
}
readonly property int borderWidth: 1
readonly property int borderWidth: (SettingsData.blurBorderEnabled ?? true) ? 1 : 0
function hoverColor(baseColor, hoverAlpha) {
if (!enabled)
@@ -2374,6 +2374,29 @@
],
"icon": "extension"
},
{
"section": "modalDarkenBackground",
"label": "Darken Modal Background",
"tabIndex": 9,
"category": "Launcher",
"keywords": [
"background",
"behind",
"dark mode",
"darken",
"darkened",
"dialogs",
"drawer",
"launcher",
"menu",
"modal",
"night",
"overlay",
"show",
"start"
],
"description": "Show darkened overlay behind modal dialogs"
},
{
"section": "launcherStyle",
"label": "Default Launcher",
@@ -2614,6 +2637,30 @@
],
"icon": "apps"
},
{
"section": "modalBackground",
"label": "Modal Background",
"tabIndex": 9,
"category": "Launcher",
"keywords": [
"background",
"behind",
"dark mode",
"darken",
"darkened",
"dialogs",
"drawer",
"launcher",
"menu",
"modal",
"night",
"overlay",
"show",
"start"
],
"icon": "layers",
"description": "Show darkened overlay behind modal dialogs"
},
{
"section": "spotlightCloseNiriOverview",
"label": "Niri Integration",
@@ -3383,31 +3430,6 @@
],
"description": "Base to derive dark theme from"
},
{
"section": "modalDarkenBackground",
"label": "Darken Modal Background",
"tabIndex": 10,
"category": "Theme & Colors",
"keywords": [
"appearance",
"background",
"behind",
"colors",
"dark mode",
"darken",
"darkened",
"dialogs",
"look",
"modal",
"night",
"overlay",
"scheme",
"show",
"style",
"theme"
],
"description": "Show darkened overlay behind modal dialogs"
},
{
"section": "matugenTemplateEmacs",
"label": "Emacs",
@@ -3827,32 +3849,6 @@
"icon": "auto_awesome",
"conditionKey": "matugenAvailable"
},
{
"section": "modalBackground",
"label": "Modal Background",
"tabIndex": 10,
"category": "Theme & Colors",
"keywords": [
"appearance",
"background",
"behind",
"colors",
"dark mode",
"darken",
"darkened",
"dialogs",
"look",
"modal",
"night",
"overlay",
"scheme",
"show",
"style",
"theme"
],
"icon": "layers",
"description": "Show darkened overlay behind modal dialogs"
},
{
"section": "modalElevationEnabled",
"label": "Modal Shadows",
@@ -4142,6 +4138,30 @@
],
"description": "Controls the outline of popouts, modals, and other shell surfaces"
},
{
"section": "blurBorderEnabled",
"label": "Surface Border Outline",
"tabIndex": 10,
"category": "Theme & Colors",
"keywords": [
"appearance",
"around",
"border",
"colors",
"edge",
"look",
"modal",
"outline",
"popup",
"scheme",
"shell",
"style",
"surface",
"surfaces",
"theme"
],
"description": "Outline around shell surfaces"
},
{
"section": "popupTransparency",
"label": "Surface Opacity",