components/Settings/AppSettings/Appearance.vue

@@ -8,7 +8,7 @@
         <span class="theme-preview"
           :title="theme.displayName"
           :style="{background:`linear-gradient(${theme.previewGradient})`}"
-          @click="changeTheme(theme.id, theme.themeUrl)"
+          @click="changeTheme(theme.ID, theme.themeURL)"
         >
           <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
             {{ theme.displayName }}
@@ -34,19 +34,19 @@ let themeLinkElement: HTMLLinkElement | null = null;
 const themes: Array<Theme> = []
 
 interface Theme {
-  id: string
+  ID: string
   displayName: string
   previewGradient: string
   complementaryColor: string
-  themeUrl: string
+  themeURL: string
 }
 
-function changeTheme(id: string, url: string) {
+function changeTheme(ID: string, URL: string) {
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
+  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${URL}`) {
     return;
   }
 
-  localStorage.setItem("selectedTheme", id);
+  localStorage.setItem("selectedTheme", ID);
 
   // if the theme didn't originally load for some reason, create it
   if (!themeLinkElement) {
@@ -55,14 +55,14 @@ function changeTheme(id: string, url: string) {
     document.head.appendChild(themeLinkElement);
   }
 
-  themeLinkElement.href = `${baseURL}themes/${url}`;
+  themeLinkElement.href = `${baseURL}themes/${URL}`;
 }
 
 const fetchThemes = async () => {
   for (const theme of defaultThemes) {
     const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
     const themeConfigJson = await themeConfig.json() as Theme
-    themeConfigJson.id = theme
+    themeConfigJson.ID = theme
 
     themes.push(themeConfigJson)
   }

pages/settings.vue

@@ -40,6 +40,9 @@
 
 
 <script lang="ts" setup>
+import { onMounted } from 'vue';
+import Button from '~/components/Button.vue';
+
 const { logout } = useAuth()
 const appConfig = useRuntimeConfig()
 

public/themes/ash.json

@@ -2,5 +2,5 @@
 	"displayName": "Ash",
 	"previewGradient": "45deg, #2f2e2d, #46423b",
 	"complementaryColor": "white",
-	"themeUrl": "ash.css"
+	"themeURL": "ash.css"
 }

public/themes/dark.json

@@ -2,5 +2,5 @@
 	"displayName": "Dark",
 	"previewGradient": "45deg, #1f1e1d, #36322b",
 	"complementaryColor": "white",
-	"themeUrl": "dark.css"
+	"themeURL": "dark.css"
 }

public/themes/light.json

@@ -2,5 +2,5 @@
 	"displayName": "Light",
 	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
 	"complementaryColor": "black",
-	"themeUrl": "light.css"
+	"themeURL": "light.css"
 }