Switch by ClawHack1

1/* Genel stil */
2.toggle-switch {
3  position: relative;
4  display: inline-block;
5  width: 40px;
6  height: 24px;
7  margin: 10px;
8}
9
10/* Giriş stil */
11.toggle-switch .toggle-input {
12  display: none;
13}
14
15/* Anahtarın stilinin etrafındaki etiketin stil */
16.toggle-switch .toggle-label {
17  position: absolute;
18  top: 0;
19  left: 0;
20  width: 40px;
21  height: 24px;
22  background-color: #2196F3;
23  border-radius: 34px;
24  cursor: pointer;
25  transition: background-color 0.3s;
26}
27
28/* Anahtarın yuvarlak kısmının stil */
29.toggle-switch .toggle-label::before {
30  content: "";
31  position: absolute;
32  width: 20px;
33  height: 20px;
34  border-radius: 50%;
35  top: 2px;
36  left: 2px;
37  background-color: #fff;
38  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
39  transition: transform 0.3s;
40}
41
42/* Anahtarın etkin hale gelmesindeki stil değişiklikleri */
43.toggle-switch .toggle-input:checked + .toggle-label {
44  background-color: #4CAF50;
45}
46
47.toggle-switch .toggle-input:checked + .toggle-label::before {
48  transform: translateX(16px);
49}
50
51/* Light tema */
52.toggle-switch.light .toggle-label {
53  background-color: #BEBEBE;
54}
55
56.toggle-switch.light .toggle-input:checked + .toggle-label {
57  background-color: #9B9B9B;
58}
59
60.toggle-switch.light .toggle-input:checked + .toggle-label::before {
61  transform: translateX(6px);
62}
63
64/* Dark tema */
65.toggle-switch.dark .toggle-label {
66  background-color: #4B4B4B;
67}
68
69.toggle-switch.dark .toggle-input:checked + .toggle-label {
70  background-color: #717171;
71}
72
73.toggle-switch.dark .toggle-input:checked + .toggle-label::before {
74  transform: translateX(16px);
75}
76