#35 BG strips color config (#36)

Author: MarcinOrlowski

CHANGES.md

@@ -1,8 +1,12 @@
 # Changelog
 
-## 1.5.2 (2025-12-12)
+## 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)
+
 - [#027] Devbar template now includes its own CSS for self-contained styling
 - [#029] Normalized uses CSS styles in both views
 

README.md

@@ -208,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

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;
 }

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">

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'
     ) {
     }
 }

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
         );
     }