docs(shell): documents for self drawn border & shadpw

Author: std-microblock

CONFIG.md

@@ -98,7 +98,16 @@ Breeze Shell 配置文件的 JSON Schema 位于
         "submenu_bg": {
           ...
         }
-      }
+      },
+      // 使用自绘边框、阴影（需关闭 dwm 边框）
+      "use_self_drawn_border": true,
+      // 自定义边框示例配置
+      "border_width": 2.5,
+      // 支持渐变 [linear-gradient(angle, color1, color2) / radial-gradient(radius, color1, color2)]
+      "border_color_dark": "linear-gradient(30, #DE73DF, #E5C07B)",
+      "shadow_size": 20,
+      "shadow_color_dark_from": "#ff000033",
+      "shadow_color_dark_to": "#00ff0000"
     },
     // 启用垂直同步
     "vsync": true,
@@ -144,7 +153,7 @@ Breeze Shell 配置文件的 JSON Schema 位于
 ```json
 {
   "default_animation": {
-        "easing": "mutation"
-    }
+    "easing": "mutation"
+  }
 }
 ```

resources/schema.json

@@ -125,16 +125,70 @@
                     "type": "integer"
                 },
                 "acrylic_color_light": {
-                    "type": "string"
+                    "type": "string",
+                    "description": "Color string supporting formats like #RRGGBBAA, #RRGGBB, rgba(R, G, B, A), rgb(R, G, B), linear-gradient(angle, color1, color2), radial-gradient(radius, color1, color2), solid(color)."
                 },
                 "acrylic_color_dark": {
-                    "type": "string"
+                    "type": "string",
+                    "description": "Color string supporting formats like #RRGGBBAA, #RRGGBB, rgba(R, G, B, A), rgb(R, G, B), linear-gradient(angle, color1, color2), radial-gradient(radius, color1, color2), solid(color)."
                 },
                 "acrylic_opacity": {
                     "type": "number"
                 },
                 "animation": {
                     "$ref": "#/definitions/Animation"
+                },
+                "use_self_drawn_border": {
+                    "type": "boolean",
+                    "description": "Whether to use a self-drawn border instead of the system default."
+                },
+                "border_color_light": {
+                    "type": "string",
+                    "description": "Color of the border in light mode. Supports formats like #RRGGBBAA, #RRGGBB, rgba(R, G, B, A), rgb(R, G, B), linear-gradient(angle, color1, color2), radial-gradient(radius, color1, color2), solid(color)."
+                },
+                "border_color_dark": {
+                    "type": "string",
+                    "description": "Color of the border in dark mode. Supports formats like #RRGGBBAA, #RRGGBB, rgba(R, G, B, A), rgb(R, G, B), linear-gradient(angle, color1, color2), radial-gradient(radius, color1, color2), solid(color)."
+                },
+                "shadow_color_light_from": {
+                    "type": "string"
+                },
+                "shadow_color_light_to": {
+                    "type": "string"
+                },
+                "shadow_color_dark_from": {
+                    "type": "string"
+                },
+                "shadow_color_dark_to": {
+                    "type": "string"
+                },
+                "shadow_blur": {
+                    "type": "number",
+                    "description": "The blur radius of the shadow."
+                },
+                "shadow_offset_x": {
+                    "type": "number",
+                    "description": "The horizontal offset of the shadow."
+                },
+                "shadow_offset_y": {
+                    "type": "number",
+                    "description": "The vertical offset of the shadow."
+                },
+                "shadow_opacity": {
+                    "type": "number",
+                    "description": "The opacity of the shadow (0.0 to 1.0)."
+                },
+                "shadow_size": {
+                    "type": "number",
+                    "description": "The size of the shadow."
+                },
+                "border_width": {
+                    "type": "number",
+                    "description": "The width of the self-drawn border."
+                },
+                "inset_border": {
+                    "type": "boolean",
+                    "description": "Whether the self-drawn border should be inset."
                 }
             },
             "required": [],
@@ -218,4 +272,4 @@
             "title": "Bg"
         }
     }
-}
+}

src/shell/config.h

@@ -98,7 +98,7 @@ struct config {
       std::string acrylic_color_light = "#fefefe00";
       std::string acrylic_color_dark = "#28282800";
 
-      bool use_self_drawn_border = false;
+      bool use_self_drawn_border = true;
       // These values are used when use_self_drawn_border is true
       paint_color border_color_light = paint_color::from_string("#00000022");
       paint_color border_color_dark = paint_color::from_string("#ffffff22");
@@ -111,8 +111,8 @@ struct config {
       float shadow_offset_y = 0;
       float shadow_opacity = 0.2;
       float shadow_size = 10;
-      float border_width = 1;
-      bool inset_border = false;
+      float border_width = 1.5;
+      bool inset_border = true;
 
       // unused, only for backward compatibility
       float acrylic_opacity = 0.1;

src/shell/contextmenu/menu_widget.cc

@@ -328,10 +328,13 @@ void mb_shell::menu_widget::render(ui::nanovg_context ctx) {
       auto &theme = config::current->context_menu.theme;
       bool light = menu_render::current.value()->light_color;
 
-      float boarder_width =
-          theme.use_self_drawn_border ? theme.border_width : 0.0f;
+      bool use_dwm = config::current->context_menu.theme.use_dwm_if_available
+                         ? is_win11_or_later()
+                         : false;
+      bool use_self_drawn_border = theme.use_self_drawn_border && !use_dwm;
 
-      if (theme.use_self_drawn_border) {
+      float boarder_width = use_self_drawn_border ? theme.border_width : 0.0f;
+      if (use_self_drawn_border) {
         float shadow_size = theme.shadow_size,
               shadow_offset_x = theme.shadow_offset_x,
               shadow_offset_y = theme.shadow_offset_y;
@@ -361,7 +364,8 @@ void mb_shell::menu_widget::render(ui::nanovg_context ctx) {
         ctx.beginPath();
 
         if (theme.inset_border) {
-          ctx.roundedRect(*bg->x + boarder_width / 2, *bg->y + boarder_width / 2,
+          ctx.roundedRect(*bg->x + boarder_width / 2,
+                          *bg->y + boarder_width / 2,
                           *bg->width - boarder_width,
                           *bg->height - boarder_width, corner_radius);
         } else {