Create block in decription themes

example/example.js

@@ -13,38 +13,36 @@ const codeFourth = document.getElementById('codeFourth');
 const fifthBtn = document.getElementById('fifth');
 const codeFifth = document.getElementById('codeFifth');
 
-const six = document.getElementById('six')
+const six = document.getElementById('six');
 const codeSix = document.getElementById('codeSix');
 
-
+const Native = document.getElementById('Native');
-const Native = document.getElementById('Native')
+const codeNative = document.getElementById('codeNative');
-const codeNative = document.getElementById('codeNative')
-
 
 firstBtn.addEventListener('click', () => {
-    codeFirst.classList.toggle("active")
+  codeFirst.classList.toggle('active');
-})
+});
 
 secondBtn.addEventListener('click', () => {
-    codeSecond.classList.toggle("active")
+  codeSecond.classList.toggle('active');
-})
+});
 
 thirdBtn.addEventListener('click', () => {
-    codeThird.classList.toggle("active")
+  codeThird.classList.toggle('active');
-})
+});
 
 fourthBtn.addEventListener('click', () => {
-    codeFourth.classList.toggle("active")
+  codeFourth.classList.toggle('active');
-})
+});
 
 fifthBtn.addEventListener('click', () => {
-    codeFifth.classList.toggle("active")
+  codeFifth.classList.toggle('active');
-})
+});
 
 six.addEventListener('click', () => {
-    codeSix.classList.toggle("active")
+  codeSix.classList.toggle('active');
-})
+});
 
 Native.addEventListener('click', () => {
-    codeNative.classList.toggle("active")
+  codeNative.classList.toggle('active');
-})
+});

example/example.scss

@@ -3,10 +3,12 @@
 * {
   font-size: 14px;
   font-family: Arial, Helvetica, sans-serif;
+  text-align: justify;
 }
 
-.testClassRed {
+.testClass {
   background-color: #ff8282;
+  color: white;
 }
 
 .body-example {
@@ -144,6 +146,39 @@
   }
 }
 
+.row {
+  display: flex;
+  justify-content: space-around;
+}
+
+.description-theme {
+  color: white;
+  .col {
+    width: 54%;
+  }
+
+  img {
+    border-radius: 15px;
+  }
+
+  .createTheme {
+    display: flex;
+    flex-direction: column;
+  }
+
+  h5 {
+    font-size: 18px;
+    margin: 0;
+  }
+  h6 {
+    font-size: 17px;
+    margin: 0;
+  }
+  p {
+    font-size: 16px;
+  }
+}
+
 code {
   display: none;
 }

example/index.html

@@ -192,6 +192,115 @@
         </code>
       </div>
 
+      <div class="example-select description-theme">
+        <h1 class="example-select_title">Setting up and adding a theme.</h1>
+
+        <div class="layout-select">
+          <div class="row">
+            <div class="col">
+              <h5>Default theme:</h5>
+              <p style="margin-right: 50px">
+                To change the theme of the select, you need to specify this parameter in the select
+                settings. The default theme is the classic theme, you can choose a white or dark
+                theme.
+              </p>
+              <code style="display: block; margin-top: 32px">
+                <pre>
+                  <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
+                    selector: <span class="code__string">'.cg-dropdown_one',</span> 
+                    placeholder: <span class="code__string">'Choose a car',</span> 
+                    lable: <span class="code__string">'EXAMPLE',</span> 
+                    items: [
+                      ...
+                    ],
+                    <span class="code__keyword">theme</span>:  <span class="code__string">'dark / white'</span>
+                  });
+                </pre>
+              </code>
+            </div>
+
+            <div class="col">
+              <h5>Create custom theme:</h5>
+              <div class="createTheme">
+                <p style="margin-right: 25px">
+                  To create your own theme, you need to create an object with the following fields.
+                  In these fields you need to insert the previously created css class. After
+                  creating the object, just pass it to the select settings.
+                </p>
+                <code style="display: block">
+                  <pre>
+            <span class="code__keyword">interface</span> <span class="code__var">CustomTheme</span> {
+              name: <span class="code__class">'string',</span> 
+              styles: {
+                head?:  <span class="code__class">'string',</span> 
+                list?: <span class="code__class">'testClass',</span> ,
+                placeholder?: <span class="code__class">'string',</span> ,
+                caret?: <span class="code__class">'string',</span> ,
+                search?: <span class="code__class">'string',</span> ,
+                chips?: <span class="code__class">'string',</span> ,
+                lable?: <span class="code__class">'string',</span> ,
+              },
+            });
+                  </pre>
+                </code>
+              </div>
+            </div>
+          </div>
+
+          <h5 style="margin: 20px 0 5px; text-align: center">Example:</h5>
+
+          <div class="row">
+            <h6>For JS</h6>
+            <h6>For TS</h6>
+          </div>
+
+          <div class="row">
+            <code style="display: block">
+              <pre>
+        <span class="code__keyword">const</span> <span class="code__var">newTheme</span> = {
+          name: <span class="code__string">'test',</span> 
+          styles: {
+            head:  <span class="code__string">'testClass',</span> 
+            list: <span class="code__string">'testClass',</span> ,
+            placeholder: <span class="code__string">'testClass',</span> ,
+            caret: <span class="code__string">'testClass',</span> ,
+            search: <span class="code__string">'testClass',</span> ,
+            chips: <span class="code__string">'testClass',</span> ,
+            lable: <span class="code__string">'testClass',</span> ,
+          },
+        });
+              </pre>
+            </code>
+
+            <code style="display: block">
+              <pre>
+        <span class="code__keyword">const</span> <span class="code__var">newCustomTheme</span>:<span class="code__class"> CustomTheme</span>  = {
+          name: <span class="code__string">'test',</span> 
+          styles: {
+            head:  <span class="code__string">'testClass',</span> 
+            list: <span class="code__string">'testClass',</span> ,
+            placeholder: <span class="code__string">'testClass',</span> ,
+            caret: <span class="code__string">'testClass',</span> ,
+            search: <span class="code__string">'testClass',</span> ,
+            chips: <span class="code__string">'testClass',</span> ,
+            lable: <span class="code__string">'testClass',</span> ,
+          },
+        });
+              </pre>
+            </code>
+          </div>
+          <h6>CSS</h6>
+          <code style="display: block; width: 44%">
+            <pre>
+              .testClass {
+                background-color: #ff8282;
+                color: white;
+              }
+            </pre>
+          </code>
+        </div>
+      </div>
+
       <div class="example-select">
         <h1 class="example-select_title">Categories</h1>
 

example/index.js

@@ -1,6 +1,19 @@
 import { CGSelect } from '../src/cg-select';
 import './example';
-import { newCustomTheme } from './themeTest';
+// import { newCustomTheme } from './themeTest';
+
+const newTheme = {
+  name: 'test',
+  styles: {
+    head: 'testClass',
+    list: 'testClass',
+    placeholder: 'testClass',
+    caret: 'testClass',
+    search: 'testClass',
+    chips: 'testClass',
+    lable: 'testClass',
+  },
+};
 
 // ------------------------------Обычный селект--------------------
 const dropdown = new CGSelect({
@@ -26,7 +39,6 @@ const dropdown = new CGSelect({
       width: '824px',
     },
   },
-  theme: newCustomTheme,
 });
 
 // dropdown.on('clear', function (e) {

example/themeTest.ts

@@ -3,7 +3,12 @@ import { CustomTheme } from 'components/theme/theme.interface';
 export const newCustomTheme: CustomTheme = {
   name: 'test',
   styles: {
-    head: 'testClassRed',
+    head: 'testClass',
-    list: 'testClassRed',
+    list: 'testClass',
+    placeholder: 'testClass',
+    caret: 'testClass',
+    search: 'testClass',
+    chips: 'testClass',
+    lable: 'testClass',
   },
 };