Added custom theme

example/example.scss

@@ -5,6 +5,10 @@
   font-family: Arial, Helvetica, sans-serif;
 }
 
+.testClassRed {
+  background-color: #ff8282;
+}
+
 .body-example {
   background: #000000c4;
 }

example/index.js

@@ -1,5 +1,6 @@
 import { CGSelect } from '../src/cg-select';
 import './example';
+import { newCustomTheme } from './themeTest';
 
 // ------------------------------Обычный селект--------------------
 const dropdown = new CGSelect({
@@ -25,11 +26,12 @@ const dropdown = new CGSelect({
       width: '824px',
     },
   },
+  theme: newCustomTheme,
 });
 
-dropdown.on('clear', function (e) {
+// dropdown.on('clear', function (e) {
-  console.log(`this state: ${e}`);
+//   console.log(`this state: ${e}`);
-});
+// });
 
 // ------------------------------NativeSelect-----------------------
 const dropdownNativeSelect = new CGSelect({

example/themeTest.ts

@@ -0,0 +1,9 @@
+import { CustomTheme } from 'components/theme/theme.interface';
+
+export const newCustomTheme: CustomTheme = {
+  name: 'test',
+  styles: {
+    head: 'testClassRed',
+    list: 'testClassRed',
+  },
+};

src/cg-select.ts

@@ -25,6 +25,7 @@ import { ILanguage } from './interfaces/language.interface';
 
 import './main.scss';
 import { changeTheme } from './components/theme/theme';
+import { CustomTheme } from 'components/theme/theme.interface';
 
 /**
  * @class Class Description ICgSelect
@@ -36,7 +37,7 @@ export class CGSelect implements ICgSelect {
   selected?: string;
   placeholder?: string;
   items?: IItems[] | string[] | any;
-  theme?: string;
+  theme?: string | CustomTheme;
   searchMode?: boolean;
   closeOnSelect?: boolean;
   nativeSelectMode?: boolean;

src/components/theme/theme.interface.ts

@@ -0,0 +1,12 @@
+export interface CustomTheme {
+  name: string;
+  styles: {
+    head?: string;
+    list?: string;
+    placeholder?: string;
+    caret?: string;
+    search?: string;
+    chips?: string;
+    lable?: string;
+  };
+}

src/components/theme/theme.ts

@@ -1,4 +1,6 @@
-export function changeTheme(element: Element, theme: string) {
+import { CustomTheme } from './theme.interface';
+
+export function changeTheme(element: Element, theme: string | CustomTheme) {
   const select = element!.querySelector('.cg-select');
   const caret = element!.querySelector('.caret');
   const list = element!.querySelector('ul.list');
@@ -13,32 +15,37 @@ export function changeTheme(element: Element, theme: string) {
     elem.classList.remove('pathWhite');
   });
 
-  switch (theme.toLowerCase()) {
+  if (typeof theme === 'string') {
-    case 'dark':
+    switch (theme) {
-      select!.classList.add('selectDark');
+      case 'dark':
-      list!.classList.add('listDark');
+        select!.classList.add('selectDark');
-      nativeSelect?.classList.add('listDark');
+        list!.classList.add('listDark');
-      path.forEach((elem) => {
+        nativeSelect?.classList.add('listDark');
-        elem.classList.add('pathWhite');
+        path.forEach((elem) => {
-      });
+          elem.classList.add('pathWhite');
-      break;
+        });
-    case 'white':
+        break;
-      select!.classList.add('selectWhite');
+      case 'white':
-      caret!.classList.add('caretWhite');
+        select!.classList.add('selectWhite');
-      list!.classList.add('listWhite');
+        caret!.classList.add('caretWhite');
-      nativeSelect?.classList.add('listWhite');
+        list!.classList.add('listWhite');
-      path.forEach((elem) => {
+        nativeSelect?.classList.add('listWhite');
-        elem.classList.add('pathBlack');
+        path.forEach((elem) => {
-      });
+          elem.classList.add('pathBlack');
+        });
 
-      if (search!) {
+        if (search!) {
-        search!.classList.add('inputWhite');
+          search!.classList.add('inputWhite');
-      }
+        }
-      break;
+        break;
 
-    default:
+      default:
-      select!.classList.add('classicSelect');
+        select!.classList.add('classicSelect');
-      list!.classList.add('classicList');
+        list!.classList.add('classicList');
-      break;
+        break;
+    }
+  } else {
+    select!.classList.add(`${theme.styles.head}`);
+    list!.classList.add(`${theme.styles.list}`);
   }
 }

src/components/utils/utils.interface.ts

@@ -1,3 +1,4 @@
+import { CustomTheme } from 'components/theme/theme.interface';
 import { IItems } from 'interfaces/items.interface';
 
 /**
@@ -55,5 +56,5 @@ export interface ISelectedItems {
    * An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.
    * @type {boolean}
    */
-  theme?: string;
+  theme?: string | CustomTheme;
 }

src/interfaces/cg-select.interface.ts

@@ -1,3 +1,4 @@
+import { CustomTheme } from 'components/theme/theme.interface';
 import { IItems } from './items.interface';
 
 /**
@@ -29,7 +30,7 @@ export interface ICgSelect {
    * An optional parameter responsible for switching between different themes, the classic theme is set by default.
    * @type {string} values: dark, white
    */
-  theme?: string;
+  theme?: string | CustomTheme;
   /**
    * An optional parameter that adds a live search on the select elements.
    * @type {boolean}