Added new theme fn

example/index.js

@@ -25,6 +25,7 @@ const dropdown = new CGSelect({
       width: '824px',
     },
   },
+  theme: 'dark'
 });
 
 // ------------------------------NativeSelect-----------------------

src/cg-select.ts

@@ -37,6 +37,7 @@ export class CGSelect implements ICgSelect {
   placeholder?: string;
   items?: IItems[] | string[] | any;
   darkTheme?: boolean;
+  theme?: string;
   searchMode?: boolean;
   closeOnSelect?: boolean;
   nativeSelectMode?: boolean;
@@ -195,7 +196,7 @@ export class CGSelect implements ICgSelect {
       lable,
       event,
       selected,
-      placeholder,
+      placeholder, theme
     } = setting;
 
     this.options = setting;
@@ -215,6 +216,7 @@ export class CGSelect implements ICgSelect {
     this.event = event;
     this.selected = selected;
     this.placeholder = placeholder;
+    this.theme = theme;
 
     const elem = document.querySelector(this.selector!);
     this.element = elem;
@@ -358,6 +360,7 @@ export class CGSelect implements ICgSelect {
     if (this.darkTheme == false) {
       this.checkTheme();
     }
+    this.themeCheck();
 
     if (this.nativeSelectMode === true) {
       this.selectMode(this.nativeSelectMode);
@@ -680,6 +683,28 @@ export class CGSelect implements ICgSelect {
     }
   }
 
+  private themeCheck(): void{
+    const select = this.element!.querySelector('.cg-select');
+    const caret = this.element!.querySelector('.caret');
+    const list = this.element!.querySelector('ul.list');
+    const search = this.element!.querySelector('.inputSearch');
+ 
+    switch (this.theme) {
+      case 'classic':
+        console.log('sss');
+        break;
+      case 'dark':
+        console.log('dark');
+        break;
+      case 'white':
+        console.log('white');
+        break;
+        
+      default:
+        break;
+    }
+  }
+
   /**
    * @private
    * @param {boolean} nativeSelectMode parameter responsible for adding native select.

src/components/theme/theme.json

@@ -0,0 +1,11 @@
+[
+    {
+        "type": "classic"
+    },
+    {
+        "type": "dark"
+    },
+    {
+        "type": "white"
+    }
+]

src/interfaces/cg-select.interface.ts

@@ -30,6 +30,7 @@ export interface ICgSelect {
    * @type {boolean}
    */
   darkTheme?: boolean;
+  theme?: string;
   /**
    * An optional parameter that adds a live search on the select elements.
    * @type {boolean}

src/main.scss

@@ -3,6 +3,8 @@
 @import './style/svgStyle.scss';
 @import './style/whiteTheme.scss';
 @import './style/displayMode.scss';
+@import './style/classicTheme.scss';
+@import './style/darkTheme.scss';
 
 // ----Layout----
 .cg-dropdown {
@@ -26,7 +28,6 @@
   flex-grow: 1;
 
   min-height: 50px;
-  color: #fff;
   padding: 5px;
 
   display: -webkit-box;
@@ -42,7 +43,6 @@
   align-items: center;
 
   text-overflow: ellipsis;
-  background: #2a2f3b;
 
   border: none;
   cursor: pointer;
@@ -70,8 +70,6 @@
     -moz-transition: 0.5s;
     -ms-transition: 0.5s;
     -o-transition: 0.5s;
-
-    background: #394050;
   }
 }
 
@@ -114,10 +112,6 @@
   margin-top: -0.2px;
   list-style: none;
 
-  color: white;
-  background: #2a2f3b;
-  border: 1px #0a0b0e solid;
-
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;

src/style/classicTheme.scss

@@ -0,0 +1,14 @@
+.cg-select{
+    color: #fff;
+    background: #2a2f3b;
+
+    &:hover {   
+        background: #394050;
+      }
+}
+
+.list {
+    color: white;
+    background: #2a2f3b;
+    border: 1px #0a0b0e solid;
+}

src/style/darkTheme.scss

@@ -0,0 +1,32 @@
+.selectDark {
+    background: rgb(29, 29, 29) !important;
+  }
+  
+//   .selectDark,
+//   .listDark,
+//   .inputWhite,
+//   .pathBlack,
+//   .selectWhite {
+//     color: black !important;
+//   }
+  
+  .caretWhite {
+    border-top: 6px solid black !important;
+  }
+  
+  .listWhite {
+    background-color: white !important;
+  }
+  
+  .inputWhite {
+    border-bottom: 1px solid black !important;
+  }
+  
+  .pathWhite {
+    color: white !important;
+  }
+  
+  .pathBlack {
+    color: black !important;
+  }
+