MarcinOrlowski · MarcinOrlowski · Dec 30, 2025 · Dec 30, 2025 · Dec 30, 2025 · Dec 30, 2025
diff --git a/.gitignore b/.gitignore
@@ -62,3 +62,5 @@ node_modules/
 .local
 
 composer.lock
+
+.claude/
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,7 +1,13 @@
 # Changelog
 
+## 1.6.0 (TBD)
+
+- [#035] Added customizable background colors for breathing stripes
+- [#033] Added close widget type to dismiss devbar
+
 ## 1.5.2 (2025-12-12)
 
+- [#033] Added close widget type to dismiss devbar
 - [#027] Devbar template now includes its own CSS for self-contained styling
 - [#029] Normalized uses CSS styles in both views
 

diff --git a/README.md b/README.md
@@ -88,6 +88,7 @@ Example configuration that produces devbar shown in the screenshot above:
 ```yaml
 widgets:
    left:
+     - type: close
      - icon: "fa-bug"
        text: "1.47"
        url: "https://github.com/<FOO>/issues?q=is%3Aissue%20state%3Aopen%20milestone%3A1.47"
@@ -122,6 +123,7 @@ widgets:
 
 | Property    |   Type   | Required | Description                                                                    |
 |-------------|:--------:|:--------:|--------------------------------------------------------------------------------|
+| `type`      | `string` |          | Widget type: `link` (default) or `close` (dismisses devbar).                   |
 | `icon`*     | `string` |          | Optional icon to display. Can be Font Awesome class or emoji/text.             |
 | `icon_type` | `string` |          | Icon type: `fa` (Font Awesome, default) or `text` (emoji/plain text).          |
 | `text`*     | `string` |          | Optional widget label to display alongside icon.                               |
@@ -206,6 +208,15 @@ Include the devbar template in your base layout:
 
 ## Customization
 
+### Background Colors
+
+Customize the breathing stripes background colors in your `.disco-devbar.yaml`:
+
+```yaml
+bg_color_light: '#b71c1c'
+bg_color_dark: '#8e0000'
+```
+
 ### Custom CSS
 
 The bundle includes default styling. To customize, override the CSS after importing bundle assets or

diff --git a/Resources/public/devbar.css b/Resources/public/devbar.css
@@ -5,7 +5,7 @@
     left: 0;
     right: 0;
     z-index: 1001; /* Higher than top-nav (1000) to ensure it's above */
-    background: #8e0000;
+    background: var(--bg-color-dark, #8e0000);
     color: white;
     font-size: 15px;
     overflow: hidden;
@@ -17,10 +17,10 @@
     inset: 0;
     background: repeating-linear-gradient(
         45deg,
-        #b71c1c,
-        #b71c1c 10px,
-        #8e0000 10px,
-        #8e0000 20px
+        var(--bg-color-light, #b71c1c),
+        var(--bg-color-light, #b71c1c) 10px,
+        var(--bg-color-dark, #8e0000) 10px,
+        var(--bg-color-dark, #8e0000) 20px
     );
     animation: breathe 6s ease-in-out infinite;
 }
@@ -199,3 +199,4 @@ body:has(.disco-devbar) #flash-messages {
 body.page-login:has(.disco-devbar) #flash-messages {
     top: 40px; /* Height of DiscoDevBar */
 }
+
diff --git a/Resources/views/devbar.html.twig b/Resources/views/devbar.html.twig
@@ -10,7 +10,7 @@
   crossorigin="anonymous"
   referrerpolicy="no-referrer" />
 
-<div class="disco-devbar{% if banner_data.hasError %} disco-devbar-error{% endif %}">
+<div class="disco-devbar{% if banner_data.hasError %} disco-devbar-error{% endif %}" style="--bg-color-light: {{ banner_data.bgColorLight }}; --bg-color-dark: {{ banner_data.bgColorDark }}">
     <div class="disco-devbar-content">
         {% if banner_data.hasError %}
             <div class="disco-devbar-container-left">
@@ -30,47 +30,63 @@
                     {% if not loop.first %}
                         <span class="disco-devbar-separator">&middot;</span>
                     {% endif %}
-                    <span class="disco-devbar-widget {% if widget.expand %}disco-devbar-widget-expand{% endif %}">
-                        <a href="{{ widget.url }}"
-                           class="disco-devbar-link"
-                           {% if widget.target %}target="{{ widget.target }}"{% endif %}
-                           {% if widget.title %}title="{{ widget.title }}"{% endif %}>
-                            <span class="disco-devbar-link-content">
-                                {% if widget.icon %}
-                                    {% if widget.iconType.value == 'fa' %}
-                                        <i class="fa-solid {{ widget.icon }}"></i>
-                                    {% else %}
-                                        {{ widget.icon }}
+                    {% if widget.type == 'close' %}
+                        <span class="disco-devbar-widget">
+                            <a href="#" class="disco-devbar-link" onclick="document.querySelector('.disco-devbar').remove(); return false;" title="Close DevBar">
+                                <span class="disco-devbar-link-content">✕</span>
+                            </a>
+                        </span>
+                    {% else %}
+                        <span class="disco-devbar-widget {% if widget.expand %}disco-devbar-widget-expand{% endif %}">
+                            <a href="{{ widget.url }}"
+                               class="disco-devbar-link"
+                               {% if widget.target %}target="{{ widget.target }}"{% endif %}
+                               {% if widget.title %}title="{{ widget.title }}"{% endif %}>
+                                <span class="disco-devbar-link-content">
+                                    {% if widget.icon %}
+                                        {% if widget.iconType.value == 'fa' %}
+                                            <i class="fa-solid {{ widget.icon }}"></i>
+                                        {% else %}
+                                            {{ widget.icon }}
+                                        {% endif %}
                                     {% endif %}
-                                {% endif %}
-                                {% if widget.text %}{{ widget.text }}{% endif %}
-                            </span>
-                        </a>
-                    </span>
+                                    {% if widget.text %}{{ widget.text }}{% endif %}
+                                </span>
+                            </a>
+                        </span>
+                    {% endif %}
                 {% endfor %}
             </div>
             <div class="disco-devbar-container-right {% if banner_data.rightExpand %}disco-devbar-container-expand{% endif %}">
                 {% for widget in banner_data.right %}
                     {% if not loop.first %}
                         <span class="disco-devbar-separator">&middot;</span>
                     {% endif %}
-                    <span class="disco-devbar-widget {% if widget.expand %}disco-devbar-widget-expand{% endif %}">
-                        <a href="{{ widget.url }}"
-                           class="disco-devbar-link"
-                           {% if widget.target %}target="{{ widget.target }}"{% endif %}
-                           {% if widget.title %}title="{{ widget.title }}"{% endif %}>
-                            <span class="disco-devbar-link-content">
-                                {% if widget.icon %}
-                                    {% if widget.iconType.value == 'fa' %}
-                                        <i class="fa-solid {{ widget.icon }}"></i>
-                                    {% else %}
-                                        {{ widget.icon }}
+                    {% if widget.type == 'close' %}
+                        <span class="disco-devbar-widget">
+                            <a href="#" class="disco-devbar-link" onclick="document.querySelector('.disco-devbar').remove(); return false;" title="Close DevBar">
+                                <span class="disco-devbar-link-content">✕</span>
+                            </a>
+                        </span>
+                    {% else %}
+                        <span class="disco-devbar-widget {% if widget.expand %}disco-devbar-widget-expand{% endif %}">
+                            <a href="{{ widget.url }}"
+                               class="disco-devbar-link"
+                               {% if widget.target %}target="{{ widget.target }}"{% endif %}
+                               {% if widget.title %}title="{{ widget.title }}"{% endif %}>
+                                <span class="disco-devbar-link-content">
+                                    {% if widget.icon %}
+                                        {% if widget.iconType.value == 'fa' %}
+                                            <i class="fa-solid {{ widget.icon }}"></i>
+                                        {% else %}
+                                            {{ widget.icon }}
+                                        {% endif %}
                                     {% endif %}
-                                {% endif %}
-                                {% if widget.text %}{{ widget.text }}{% endif %}
-                            </span>
-                        </a>
-                    </span>
+                                    {% if widget.text %}{{ widget.text }}{% endif %}
+                                </span>
+                            </a>
+                        </span>
+                    {% endif %}
                 {% endfor %}
             </div>
         {% endif %}

diff --git a/src/Dto/DiscoDevBarData.php b/src/Dto/DiscoDevBarData.php
@@ -32,6 +32,8 @@ class DiscoDevBarData
      * @param string|null   $version             Bundle version (null shows as N/A)
      * @param bool          $fontAwesomeEnabled  Whether to auto-include Font Awesome
      * @param string        $fontAwesomeVersion  Font Awesome version to use
+     * @param string        $bgColorLight        Light stripe color for background gradient
+     * @param string        $bgColorDark         Dark stripe color for background gradient
      */
     public function __construct(
         public readonly array $left,
@@ -42,7 +44,9 @@ public function __construct(
         public readonly string $errorMessage = '',
         public readonly ?string $version = null,
         public readonly bool $fontAwesomeEnabled = false,
-        public readonly string $fontAwesomeVersion = '6.5.1'
+        public readonly string $fontAwesomeVersion = '6.5.1',
+        public readonly string $bgColorLight = '#b71c1c',
+        public readonly string $bgColorDark = '#8e0000'
     ) {
     }
 }
diff --git a/src/Dto/Widget.php b/src/Dto/Widget.php
@@ -29,7 +29,8 @@ public function __construct(
         public readonly string $target,
         public readonly string $title,
         public readonly bool $expand,
-        public readonly IconType $iconType = IconType::FONT_AWESOME
+        public readonly IconType $iconType = IconType::FONT_AWESOME,
+        public readonly string $type = 'link'
     ) {
     }
 
@@ -47,6 +48,7 @@ public static function fromArray(array $data): self
         $title = $data['title'] ?? '';
         $expand = $data['expand'] ?? false;
         $iconType = $data['icon_type'] ?? 'fa';
+        $type = $data['type'] ?? 'link';
 
         return new self(
             icon:     \is_string($icon) ? $icon : '',
@@ -55,7 +57,8 @@ public static function fromArray(array $data): self
             target:   \is_string($target) ? $target : '',
             title:    \is_string($title) ? $title : '',
             expand:   \is_bool($expand) ? $expand : false,
-            iconType: IconType::tryFrom(\is_string($iconType) ? $iconType : 'fa') ?? IconType::FONT_AWESOME
+            iconType: IconType::tryFrom(\is_string($iconType) ? $iconType : 'fa') ?? IconType::FONT_AWESOME,
+            type:     \is_string($type) ? $type : 'link'
         );
     }
 }
diff --git a/src/Service/DiscoDevBarService.php b/src/Service/DiscoDevBarService.php
@@ -41,6 +41,12 @@ class DiscoDevBarService
      */
     private const DEFAULT_FONT_AWESOME_VERSION = '6.5.1';
 
+    /**
+     * Default background colors for breathing stripes
+     */
+    private const DEFAULT_BG_COLOR_LIGHT = '#b71c1c';
+    private const DEFAULT_BG_COLOR_DARK = '#8e0000';
+
     public function __construct(
         private readonly string $projectDir
     ) {
@@ -63,7 +69,9 @@ public function getDiscoDevBarData(): DiscoDevBarData
                 errorMessage:        $errorMessage,
                 version:             $version,
                 fontAwesomeEnabled:  false,
-                fontAwesomeVersion:  self::DEFAULT_FONT_AWESOME_VERSION
+                fontAwesomeVersion:  self::DEFAULT_FONT_AWESOME_VERSION,
+                bgColorLight:        self::DEFAULT_BG_COLOR_LIGHT,
+                bgColorDark:         self::DEFAULT_BG_COLOR_DARK
             );
         }
 
@@ -99,6 +107,9 @@ public function getDiscoDevBarData(): DiscoDevBarData
         $leftWidgets = $this->loadWidgets(\is_array($left) ? $left : []);
         $rightWidgets = $this->loadWidgets(\is_array($right) ? $right : []);
 
+        $bgColorLight = $config['bg_color_light'] ?? self::DEFAULT_BG_COLOR_LIGHT;
+        $bgColorDark = $config['bg_color_dark'] ?? self::DEFAULT_BG_COLOR_DARK;
+
         return new DiscoDevBarData(
             left:                $leftWidgets,
             right:               $rightWidgets,
@@ -108,7 +119,9 @@ public function getDiscoDevBarData(): DiscoDevBarData
             errorMessage:        '',
             version:             $version,
             fontAwesomeEnabled:  \is_bool($fontAwesomeEnabled) ? $fontAwesomeEnabled : false,
-            fontAwesomeVersion:  $fontAwesomeVersion
+            fontAwesomeVersion:  $fontAwesomeVersion,
+            bgColorLight:        \is_string($bgColorLight) ? $bgColorLight : self::DEFAULT_BG_COLOR_LIGHT,
+            bgColorDark:         \is_string($bgColorDark) ? $bgColorDark : self::DEFAULT_BG_COLOR_DARK
         );
     }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -62,3 +62,5 @@ node_modules/
		.local

		composer.lock

		.claude/