🎨 Styled input checkbox

assets/css/styles.scss

@@ -187,11 +187,32 @@ option {
 }
 
 input[type="checkbox"] {
-  width: initial;
+  display: none;
 
   &,
   & + label {
     vertical-align: middle;
+    cursor: pointer;
+
+    &:before {
+      content: "\2714";
+      border: 2px solid var(--fg-color);
+      border-radius: 4px;
+      display: inline-flex;
+      height: 16px;
+      width: 16px;
+      align-items: center;
+      justify-content: center;
+      margin: 8px 8px 8px 0;
+      color: transparent;
+      transition: .2s;
+    }
+  }
+
+  &:checked + label:before {
+    background-color: var(--ac-color);
+    border-color: var(--ac-color);
+    color: var(--act-color);
   }
 }
 

pages/settings.vue

@@ -19,10 +19,13 @@
               <swatch :color="entry.color" :name="entry.name" :class="{ vibrant: entry.vibrant }" :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
             </span>
           </div>
-          <p>
-            <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
-            <label for="disableFrameColors">Enable multi-colored frames</label>
-          </p>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <h3 class="title">Frames</h3>
+          <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
+          <label for="disableFrameColors">Enable multi-color</label>
         </li>
       </ul>
     </pw-section>