Changed the theme selection function

src/components/theme/theme.json

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

src/components/theme/theme.ts

@@ -0,0 +1,40 @@
+export function changeTheme(element: Element, theme: string) {
+  const select = element!.querySelector('.cg-select');
+  const caret = element!.querySelector('.caret');
+  const list = element!.querySelector('ul.list');
+  const search = element!.querySelector('.inputSearch');
+  const path = element.querySelectorAll('.pathWhite');
+
+  switch (theme) {
+    case 'dark':
+      select!.classList.remove('classicSelect');
+      select!.classList.add('selectDark');
+      list!.classList.add('listDark');
+      list!.classList.remove('classicList');
+      path.forEach((elem) => {
+        elem.classList.remove('pathBlack');
+        elem.classList.add('pathWhite');
+      });
+      break;
+    case 'white':
+      select!.classList.remove('classicSelect');
+      select!.classList.add('selectWhite');
+      caret!.classList.add('caretWhite');
+      list!.classList.add('listWhite');
+      list!.classList.remove('classicList');
+      path.forEach((elem) => {
+        elem.classList.add('pathBlack');
+        elem.classList.remove('pathWhite');
+      });
+
+      if (search!) {
+        search!.classList.add('inputWhite');
+      }
+      break;
+
+    default:
+      select!.classList.add('classicSelect');
+      list!.classList.add('classicList');
+      break;
+  }
+}

src/components/utils/urils.interface.ts

@@ -55,5 +55,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}
    */
-  darkTheme?: boolean;
+  theme?: string;
 }

src/components/utils/utils.ts

@@ -77,6 +77,7 @@ export function createSelected(element: Element, content?: string, styles?: ISty
   const caret = document.createElement('div');
 
   select.classList.add('cg-select');
+  select.classList.add('classicSelect');
   selected.classList.add('selected');
   caret.classList.add('caret');
 
@@ -103,7 +104,7 @@ export function createSelected(element: Element, content?: string, styles?: ISty
  * @param {ISelectedItems} dataSelectText the text that is rendered in the select.
  */
 export function clearSelect(select: HTMLElement, element: Element, dataSelectText: ISelectedItems) {
-  const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText;
+  const { selectedItems, indexes, theme, multiselectTag } = dataSelectText;
 
   const options = element.querySelectorAll('.list__item');
   const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption');
@@ -122,14 +123,19 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
     return;
   }
 
-  if (darkTheme === true || !darkTheme) {
-    path1.classList.add('pathWhite');
-    path2.classList.add('pathWhite');
-  }
-
-  if (darkTheme === false) {
-    path1.classList.add('pathBlack');
-    path2.classList.add('pathBlack');
+  switch (theme) {
+    case 'dark':
+      path1.classList.add('pathWhite');
+      path2.classList.add('pathWhite');
+      break;
+    case 'white':
+      path1.classList.add('pathBlack');
+      path2.classList.add('pathBlack');
+      break;
+    default:
+      path1.classList.add('pathWhite');
+      path2.classList.add('pathWhite');
+      break;
   }
 
   svgIcon.classList.add('svg-icon');