Dark mode and themes in basic component with slots.

README.md

@@ -195,7 +195,7 @@ $data = app('mermaid')->generateDiagramFromArray($data);
 
 
 ## Configuration
-You can publish the configuration file using the following command:
+You can customize the Mermaid configuration by publishing the `mermaid.php` config file and changing the settings as needed. You can publish the configuration file using the following command:
 
 ```bash
 php artisan vendor:publish --provider="IcehouseVentures\LaravelMermaid\ServiceProvider" --tag="config"
@@ -212,6 +212,47 @@ You can also set the canvas style for the Mermaid diagram by passing in a class
 <x-mermaid::component :data="$data" class="border rounded p-2" />
 ```
 
+## Livewire
+
+This package includes a Livewire compatible component that will re-render a diagram when a property on your Livewire component is updated. Here's an example of using this in a Livewire component when when you increase the 'limit', more users will be loaded and added to the diagram.
+
+```php
+
+// Your Livewire Class:
+<?php
+
+namespace App\Livewire;
+
+use App\Models\User;
+use Livewire\Component;
+
+class Mermaid extends Component
+{
+    public $limit = 2;
+
+    public $mermaid;
+
+    public function render()
+    {
+        $this->mermaid = app('mermaid')->generateDiagramFromCollection(
+            User::with('posts')->limit($this->limit)->get()
+        );
+
+        return view('livewire.mermaid');
+    }
+}
+
+// Your Livewire View:
+<div>
+    <x-mermaid::livewire-component wire:model="mermaid" />
+
+    <div>
+        <label for="limit">Limit:</label>
+        <input wire:model.live="limit" id="limit" type="number">
+    </div>
+</div>
+```
+
 
 ## Background
 Icehouse Ventures is an early-stage venture capital firm based in New Zealand. We have an in-house technology platform built using Laravel and created this package to help streamline the generation of flowcharts, process diagrams and data visualisations inside our application using dynamic data. 

src/Support/Builder.php

@@ -31,23 +31,27 @@ protected static function setDiagramType(?string $type): string
     }
 
     // Set the theme for the diagram
-    public static function setTheme(string $theme): string
+    public static function setTheme(?string $theme = null): ?string
     {
-        $theme = config('mermaid.theme');
+        $theme = $theme ?? config('mermaid.theme');
 
         if (in_array($theme, ['base', 'forest', 'dark', 'neutral', 'default'])) {
             return "%%{\n  
             init: {\"theme\": \"$theme\"}
             }%%\n";
         }
 
-        $themeFile = config('mermaid.themeFile');
+        $themeFile = $theme ?? config('mermaid.themeFile');
+
+        $themeFileExtension = str_ends_with($themeFile, '.json') ? $themeFile : $themeFile.'.json';
+
+        $themeFilePath = __DIR__ . '/../Themes/' . $themeFileExtension;
 
-        if (!file_exists(__DIR__ . '/../Themes/' . $themeFile)) {
+        if (!file_exists($themeFilePath)) {
             return null;
         }
 
-        $themeConfig = json_decode(file_get_contents(__DIR__ . '/../Themes/' . $themeFile), true);
+        $themeConfig = json_decode(file_get_contents($themeFilePath), true);
 
         $themeJson = json_encode($themeConfig);
 

src/Themes/darkmode.json

@@ -0,0 +1,12 @@
+{
+  "theme": "base",
+  "themeName": "Dark Mode",
+  "themeVariables": {
+    "primaryColor": "#212529",
+    "primaryBorderColor": "#343a40",
+    "primaryTextColor": "#f8f9fa",
+    "lineColor": "#000000",
+    "secondaryColor": "#495057",
+    "tertiaryColor": "#212529"
+  } 
+}

src/resources/views/components/component.blade.php

@@ -1,15 +1,18 @@
 <div class="mermaid {{ $class ?? '' }}">
-    {{ isset($data) ? $data : $slot }}
+    @if(isset($data))
+    {{ $data }}
+    @else
+        {{ \IcehouseVentures\LaravelMermaid\Support\Builder::setTheme($theme ?? '') }}
+        {{ $slot }}
+    @endif
 </div>
 
 @once
-
     <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 
     <script>
         mermaid.initialize({
             startOnLoad: true
         });
     </script>
-
-@endonce
+@endonce