feat: make vibrantColors a localStorage setting

views/settings.tpl.html

@@ -354,6 +354,26 @@
                     </div>
                 </div>
             </div>
+
+            <div class="w-full">
+                <hr class="border-t border-gray-800 my-4">
+            </div>
+
+            <!-- Colors -->
+            <div class="w-full">
+                <div class="flex flex-wrap md:flex-nowrap mb-8 gap-x-4">
+                    <div class="w-full md:w-1/3 mb-4 md:mb-0 inline-block">
+                        <span class="font-semibold text-gray-300 text-lg">Vibrant Colors</span>
+                        <p class="block text-sm text-gray-600">You can view the entire summary in vibrant colors similar to the "Languages" chart. Note that this setting is saved in your web browser only.</p>
+                    </div>
+
+                    <div class="w-full md:w-2/3 inline-block">
+                        <div class="flex-col items-center w-full text-gray-500 text-sm">
+                            <input class="flex cursor-pointer h-4 w-4" type="checkbox" id="vibrant-color-toggle" @click="toggleVibrantColor" v-model="vibrantColorEnabled">
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <div v-cloak id="permissions" class="tab flex flex-col space-y-4" v-if="isActive('permissions')">
@@ -666,4 +686,3 @@
 </body>
 
 </html>
-

views/summary.tpl.html

@@ -209,7 +209,6 @@
 {{ template "foot.tpl.html" . }}
 
 <script>
-    const vibrantColor = {{ .VibrantColor }}
     const editorColors = {{ .EditorColors | json }}
     const languageColors = {{ .LanguageColors | json }}
     const osColors = {{ .OSColors | json }}