feat: added theme setting options - dark mode, pallates

src/Models/BaseChartModel.php

@@ -18,6 +18,7 @@ class BaseChartModel
     use HasSparkline;
     use HasGrid;
     use HasColors;
+    use HasTheme;
 
     public function __construct()
     {
@@ -30,6 +31,7 @@ class BaseChartModel
         $this->initSparkline();
         $this->initGrid();
         $this->initColors();
+        $this->initTheme();
     }
 
     public function reactiveKey()
@@ -48,7 +50,8 @@ class BaseChartModel
             $this->dataLabelsToArray(),
             $this->sparklineToArray(),
             $this->gridToArray(),
-            $this->colorsToArray()
+            $this->colorsToArray(),
+            $this->themeToArray()
         );
     }
 
@@ -63,5 +66,6 @@ class BaseChartModel
         $this->sparklineFromArray($array);
         $this->gridFromArray($array);
         $this->colorsFromArray($array);
+        $this->themeFromArray($array);
     }
 }

src/Models/HasTheme.php

@@ -0,0 +1,125 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasTheme
+{
+    private $theme;
+    private $mode;
+    private $pallete;
+
+    /**
+     * Initialize 
+     */
+    public function initTheme()
+    {
+        $this->theme = $this->defaultTheme();
+    }
+
+    /**
+     * set default theme
+     * 
+     * @return array $theme
+     */
+    private function defaultTheme()
+    {
+        return [
+            'mode' => 'light',
+            'pallete' => 'pallete1'
+        ];
+    }
+
+    /**
+     * set theme mode
+     * 
+     * @param string $mode
+     * 
+     * @return $this
+     */
+    public function setThemeMode(string $mode)
+    {
+        data_set($this->theme, 'mode', $mode);
+
+        return $this;
+    }
+    
+    /**
+     * set theme mode to dark theme
+     * 
+     * @return $this
+     */
+    public function darkMode()
+    {
+        data_set($this->theme, 'mode', 'dark');
+
+        return $this;
+    }
+
+    /**
+     * set theme mode to light theme
+     * 
+     * @return $this
+     */
+    public function lightMode()
+    {
+        data_set($this->theme, 'mode', 'light');
+
+        return $this;
+    }
+    
+    /**
+     * set the dark mode option to on or off
+     * 
+     * @param bool $status = true
+     * 
+     * @return $this
+     */
+    public function setDarkMode(bool $status = true)
+    {
+        data_set($this->theme, 'mode', $status ? 'dark' : 'light');
+
+        return $this;
+    }
+
+    /**
+     * set theme pallete
+     * 
+     * @param string $pallete
+     * 
+     * @return $this
+     */
+    public function setThemePallete(string $pallete)
+    {
+        data_set($this->theme, 'pallete', $pallete);
+
+        return $this;
+    }
+
+    /**
+     * convert the theme to array
+     * 
+     * @param string $mode
+     * 
+     * @return $this
+     */
+    protected function themeToArray()
+    {
+        return [
+            'theme' => $this->theme,
+        ];
+    }
+
+    /**
+     * set theme from array
+     * 
+     * @param string $mode
+     * 
+     * @return $this
+     */
+    protected function themeFromArray($array)
+    {
+        $this->theme = data_get($array, 'theme', $this->defaultTheme());
+    }
+}