Bug/general fixes (#10)

* 🔧 palette arrow navigation

* 🔧 fix browser module error

* 🎨 color scheme

* ⬆️ version upgrade

README.md

@@ -9,7 +9,7 @@
 
 | Angular Version | NPM Version |
 |-----------------|-------------|
-| 13.2.3          | 13.0.3      |
+| 13.2.3          | 13.0.4      |
 | < 13.0.0        | 0.0.77      |
 
 ## Reference

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mprisma/components",
-  "version": "13.0.3",
+  "version": "13.0.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/gabriel-gn/prisma-components.git"

src/services/color-theme/color-theme.service.ts

@@ -85,9 +85,13 @@ export class ColorThemeService {
     if (this.themeConfig && this.themeConfig.cookie) {
       this.cookieService.set(this.themeConfig.cookie, theme);
     }
-    Object.keys(themeObj).forEach(key =>
-      document.documentElement.style.setProperty(`--${key}`, `${themeObj[key]}`, 'important')
-    );
+    Object.keys(themeObj).forEach(key => {
+      if (key !== 'color-scheme') {
+        document.documentElement.style.setProperty(`--${key}`, `${themeObj[key]}`, 'important')
+      } else {
+        document.documentElement.style.setProperty(`${key}`, `${themeObj[key]}`, 'important')
+      }
+    });
     this._theme = theme;
   }
 

src/styles/themes/dark/_variables.scss

@@ -1,3 +1,5 @@
+$color-scheme: dark;
+
 /*******************************
 *   CORES
 ********************************/

src/styles/themes/dark/theme.scss

@@ -30,6 +30,8 @@
 ********************************/
 
 :root {
+  --color-scheme:                               #{$color-scheme};
+
   @each $key, $val in $colors {
     @if type-of($val) == color {
       --#{$key}: #{$val};

src/styles/themes/default/_variables.scss

@@ -1,3 +1,5 @@
+$color-scheme: normal;
+
 /*******************************
 *   CORES
 ********************************/

src/styles/themes/default/theme.scss

@@ -30,6 +30,9 @@
 ********************************/
 
 :root {
+
+  --color-scheme:                               #{$color-scheme};
+
   @each $key, $val in $colors {
     @if type-of($val) == color {
       --#{$key}: #{$val};

src/styles/themes/light/_variables.scss

@@ -2,6 +2,8 @@
 *   CORES
 ********************************/
 
+$color-scheme: light;
+
 // CORES DE TEMA
 $color-primary:                                 #42ADB3 !default;
 $color-secondary:                               #646F7E !default;

src/styles/themes/light/theme.scss

@@ -30,6 +30,9 @@
 ********************************/
 
 :root {
+
+  --color-scheme:                               #{$color-scheme};
+
   @each $key, $val in $colors {
     @if type-of($val) == color {
       --#{$key}: #{$val};