soluna-theme-toggle/src/soluna-theme-toggle.html at main · meowdev07/soluna-theme-toggle · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div class="ts-toggle-wrapper">
  <input
    type="checkbox"
    id="ts-switch"
    class="ts-switch"
    aria-label="Toggle Theme"
  />

  <label
    for="ts-switch"
    class="ts-toggle"
    aria-label="Toggle Theme"
  >
    <svg viewBox="0 0 24 24" aria-hidden="true">

      <!-- Sun Dots -->
      <g class="ts-sun-dots">
        <g class="ts-dot-group">
          <circle cx="12" cy="12" r="0.9"></circle>
        </g>

        <g class="ts-dot-group">
          <circle cx="12" cy="12" r="0.9"></circle>
        </g>

        <g class="ts-dot-group">
          <circle cx="12" cy="12" r="0.9"></circle>
        </g>

        <g class="ts-dot-group">
          <circle cx="12" cy="12" r="0.9"></circle>
        </g>

        <g class="ts-dot-group">
          <circle cx="12" cy="12" r="0.9"></circle>
        </g>

        <g class="ts-dot-group">
          <circle cx="12" cy="12" r="0.9"></circle>
        </g>

        <g class="ts-dot-group">
          <circle cx="12" cy="12" r="0.9"></circle>
        </g>
      </g>

      <!-- Base Circle -->
      <path
        class="ts-base-circle"
        d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10"
      ></path>

      <!-- Sun -->
      <path
        class="ts-sun-path ts-visible"
        d="M12,2 A10,10 0 0,1 22,12"
      ></path>

      <!-- Moon -->
      <path
        class="ts-moon-path ts-hidden"
        d="M12,2c-2.8,2.8-2.8,7.2,0,10s7.2,2.8,10,0"
      ></path>

    </svg>
  </label>
</div>