Сделан кастомный переключатель для темы

Теперь переключатель для темы выглядит привлекательнее, а не как квадратик с галочкой

index.html

@@ -50,7 +50,12 @@
 
     <div class="inputs">
         <textarea id="text-input" cols="30" rows="3" placeholder="Текст для генерации"></textarea>
-        <input title="Изменить тему" id="isLightTheme" type="checkbox">
+        <div id="isLightTheme" class="themeSwitch">
+            <div class="block" title="Изменить тему">
+                <input data-index="0" id="cheap-49" type="checkbox" />
+                <label for="cheap-49"></label>
+            </div>
+        </div>
     </div>
 
     <div class="btns btns1">

style.css

@@ -5,7 +5,7 @@
 
 html {
     background-color: #1e1e1e;
-    cursor: url(img/Orange_cursor.png) , default !important
+    cursor: url(img/Orange_cursor.png), default !important
 }
 
 body {
@@ -47,6 +47,64 @@ button {
     font-size: 16px;
 }
 
+/* Начало стилей для переключателя темы */
+.themeSwitch input[type="checkbox"] {
+    display: none;
+    visibility: hidden;
+}
+
+.themeSwitch {
+    --size: 50px;
+}
+
+.themeSwitch .block {
+    position: relative;
+    clear: both;
+    float: left;
+}
+
+.themeSwitch label {
+    width: var(--size);
+    height: calc(var(--size) / 2);
+    box-sizing: border-box;
+    border: 3px solid;
+    float: left;
+    border-radius: 100px;
+    position: relative;
+    cursor: pointer;
+    transition: .3s ease;
+    color: black;
+    background: white;
+    cursor: url(img/Orange_pointer.png), pointer !important;
+    margin-top: 10px;
+}
+
+.themeSwitch input[type=checkbox]:checked+label {
+    background: orangered;
+}
+
+.themeSwitch input[type=checkbox]:checked+label:before {
+    left: calc(var(--size) / 2);
+    background: white;
+}
+
+.themeSwitch label:before {
+    transition: .3s ease;
+    content: '';
+    width: calc((var(--size) / 2) - 10px);
+    height: calc((var(--size) / 2) - 10px);
+    position: absolute;
+    background: orangered;
+    left: 5px;
+    top: 2px;
+    box-sizing: border-box;
+    border: 3px solid;
+    color: black;
+    border-radius: 100px;
+}
+
+/* Конец стилей для переключателя темы */
+
 .btns {
     margin: 7px auto;
     width: 60%;