diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue index 579ccdd..b946238 100644 --- a/components/Settings/AppSettings/Appearance.vue +++ b/components/Settings/AppSettings/Appearance.vue @@ -2,18 +2,37 @@

Appearance

-

THEMES

+

Themes

-
- - - {{ theme.displayName }} - - +

STYLES

+
+
+
+
+ + + {{ style.displayName }} + +
+
+
+
+

LAYOUTS

+
+
+
+
+ + + {{ layout.displayName }} + +
+
+
@@ -36,35 +55,103 @@ import loadPreferredTheme from '~/utils/loadPreferredTheme'; import settingSave from '~/utils/settingSave'; const runtimeConfig = useRuntimeConfig() -const defaultThemes = runtimeConfig.public.defaultThemes const baseURL = runtimeConfig.app.baseURL; +const styleFolder = `${baseURL}themes/style` +const layoutFolder = `${baseURL}themes/layout` + const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"] -const themes: Array = [] - interface Theme { - id: string displayName: string - previewGradient: string complementaryColor: string - themeUrl: string + cssData: string + previewGradient?: string + previewImageUrl?: string } -function changeTheme(id: string, url: string) { - settingSave("selectedThemeId", id) - loadPreferredTheme() -} +async function parseThemeCss(styleData: string): Promise { + const metadataMatch = styleData.match(/\/\*([\s\S]*?)\*\//); + if (!metadataMatch) { + alert(`Failed to fetch metadata for a theme, panicing`) + return + } -async function fetchThemes() { - for (const theme of defaultThemes) { - const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme - themeConfig.id = theme + const commentContent = metadataMatch[0].trim().split("\n"); + const cssData = styleData.substring(metadataMatch[0].length).trim(); - themes.push(themeConfig) + let displayName: string | undefined + let complementaryColor: string | undefined + let previewGradient: string | undefined + let previewImageUrl: string | undefined + + for (const line of commentContent) { + const line_array = line.split("=") + if (line_array.length === 2) { + switch (line_array[0].trim()) { + case "displayName": + displayName = line_array[1].trim() + break + case "complementaryColor": + complementaryColor = line_array[1].trim() + break + case "previewGradient": + previewGradient = line_array[1].trim() + break + case "previewImageUrl": + previewImageUrl = `${layoutFolder}/${line_array[1].trim()}` + break + } + } + } + + console.log(displayName, complementaryColor, previewGradient, previewImageUrl, cssData) + if (!(displayName && complementaryColor && cssData && (previewGradient || previewImageUrl))) { + return + } + + return { + displayName, + complementaryColor, + cssData, + previewGradient, + previewImageUrl, } } -await fetchThemes() +async function parseThemeData( + folder: string, + incomingThemeList: Array, + outputThemeList: Array) { + for (const theme of incomingThemeList) { + const themeData = await $fetch(`${folder}/${theme}`) + const parsedThemeData = await parseThemeCss(themeData) + + if (parsedThemeData) { + outputThemeList.push(parsedThemeData) + } + } +} + +const styles: Array = []; +const layouts: Array = []; + +const styleList: any = await $fetch(`${styleFolder}/styles.json`) +const layoutList: any = await $fetch(`${layoutFolder}/layouts.json`) + +if (Array.isArray(styleList)) { + await parseThemeData(styleFolder, styleList, styles) +} +if (Array.isArray(layoutList)) { + await parseThemeData(layoutFolder, layoutList, layouts) +} + +console.log(layouts) + + +function changeTheme(id: string, url: string) { + settingSave("selectedThemeStyle", id) + loadPreferredTheme() +} async function onTimeFormatClicked(index: number) { let format: "auto" | "12" | "24" = "auto" @@ -84,29 +171,68 @@ async function onTimeFormatClicked(index: number) { diff --git a/nuxt.config.ts b/nuxt.config.ts index 46890d1..05a40fa 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -30,9 +30,6 @@ export default defineNuxtConfig({ messageGroupingMaxDifference: 300000, buildTimeString: new Date().toISOString(), gitHash: process.env.GIT_SHORT_REV || "N/A", - defaultThemes: [ - "light", "ash", "dark", "rainbow-capitalism" - ] } }, /* nitro: { diff --git a/public/themes/ash.json b/public/themes/ash.json deleted file mode 100644 index d5d2a59..0000000 --- a/public/themes/ash.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "displayName": "Ash", - "previewGradient": "45deg, #2f2e2d, #46423b", - "complementaryColor": "white", - "themeUrl": "ash.css" -} \ No newline at end of file diff --git a/public/themes/dark.json b/public/themes/dark.json deleted file mode 100644 index 4731d43..0000000 --- a/public/themes/dark.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "displayName": "Dark", - "previewGradient": "45deg, #1f1e1d, #36322b", - "complementaryColor": "white", - "themeUrl": "dark.css" -} \ No newline at end of file diff --git a/public/themes/layout/gorb.css b/public/themes/layout/gorb.css new file mode 100644 index 0000000..7b8e88b --- /dev/null +++ b/public/themes/layout/gorb.css @@ -0,0 +1,17 @@ +/* +displayName = Gorb +previewImageUrl = gorb.jpg +complementaryColor = white +*/ + +:root { + --sidebar-icon-width: 2.5em; + --sidebar-icon-gap: .25em; + --sidebar-margin: .5em; + + --standard-radius: .5em; + --button-radius: .6em; + --guild-icon-radius: 15%; + --pfp-radius: 50%; + --preferred-font: Arial; +} \ No newline at end of file diff --git a/public/themes/layout/gorb.jpg b/public/themes/layout/gorb.jpg new file mode 100644 index 0000000..dd2c0a2 Binary files /dev/null and b/public/themes/layout/gorb.jpg differ diff --git a/public/themes/layout/layouts.json b/public/themes/layout/layouts.json new file mode 100644 index 0000000..48c3932 --- /dev/null +++ b/public/themes/layout/layouts.json @@ -0,0 +1,3 @@ +[ + "gorb.css" +] \ No newline at end of file diff --git a/public/themes/light.json b/public/themes/light.json deleted file mode 100644 index b95c78b..0000000 --- a/public/themes/light.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "displayName": "Light", - "previewGradient": "45deg, #f0ebe8, #d4d0ca", - "complementaryColor": "black", - "themeUrl": "light.css" -} \ No newline at end of file diff --git a/public/themes/rainbow-capitalism.json b/public/themes/rainbow-capitalism.json deleted file mode 100644 index e110ea2..0000000 --- a/public/themes/rainbow-capitalism.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "displayName": "Woke", - "previewGradient": "45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e", - "complementaryColor": "white", - "themeUrl": "rainbow-capitalism.css" -} \ No newline at end of file diff --git a/public/themes/ash.css b/public/themes/style/ash.css similarity index 80% rename from public/themes/ash.css rename to public/themes/style/ash.css index d47b51e..826bf19 100644 --- a/public/themes/ash.css +++ b/public/themes/style/ash.css @@ -1,3 +1,9 @@ +/* +displayName = Ash +previewGradient = 45deg, #2f2e2d, #46423b +complementaryColor = white +*/ + :root { --text-color: #f0e5e0; --secondary-text-color: #e8e0db; @@ -19,11 +25,4 @@ --secondary-highlighted-color: #885830; --accent-color: #a04b24; --accent-highlighted-color: #b86038; - - --sidebar-width: 2.5em; - --standard-radius: .5em; - --button-radius: .6em; - --guild-icon-radius: 20%; - --pfp-radius: 50%; - --preferred-font: Arial; } \ No newline at end of file diff --git a/public/themes/dark.css b/public/themes/style/dark.css similarity index 74% rename from public/themes/dark.css rename to public/themes/style/dark.css index efc2bfa..c2561dc 100644 --- a/public/themes/dark.css +++ b/public/themes/style/dark.css @@ -1,3 +1,9 @@ +/* +displayName = Dark +previewGradient = 45deg, #1f1e1d, #36322b +complementaryColor = white +*/ + :root { --text-color: #f7eee8; --secondary-text-color: #f0e8e4; @@ -19,14 +25,4 @@ --secondary-highlighted-color: #8f5b2c; --accent-color: #b35719; --accent-highlighted-color: #c76a2e; - - --sidebar-icon-width: 2.5em; - --sidebar-icon-gap: .25em; - --sidebar-margin: .5em; - - --standard-radius: .5em; - --button-radius: .6em; - --guild-icon-radius: 15%; - --pfp-radius: 50%; - --preferred-font: Arial; } \ No newline at end of file diff --git a/public/themes/description.css b/public/themes/style/description.css similarity index 91% rename from public/themes/description.css rename to public/themes/style/description.css index e30025f..9c3a5d5 100644 --- a/public/themes/description.css +++ b/public/themes/style/description.css @@ -1,4 +1,11 @@ +/* +displayName = Description +previewGradient = 45deg, #ff8f8f, #8f8fff +complementaryColor = black +*/ + /* this is not a real theme, but rather a template for themes */ + :root { --text-color: #161518; --secondary-text-color: #2b2930; @@ -20,12 +27,6 @@ --accent-color: #ff218c80; --accent-highlighted-color: #df1b6f80; - --sidebar-width: 2.5em; - --standard-radius: .5em; - --button-radius: .6em; - --pfp-radius: 50%; - --preferred-font: Arial; - --optional-body-background: ; /* background element for the body */ --optional-chat-background: ; /* background element for the chat box */ --optional-topbar-background: ; /* background element for the topbar */ diff --git a/public/themes/light.css b/public/themes/style/light.css similarity index 83% rename from public/themes/light.css rename to public/themes/style/light.css index 68d6578..98ac4be 100644 --- a/public/themes/light.css +++ b/public/themes/style/light.css @@ -1,3 +1,9 @@ +/* +displayName = Light +previewGradient = 45deg, #f0ebe8, #d4d0ca +complementaryColor = black +*/ + :root { --text-color: #170f08; --secondary-text-color: #2f2b28; @@ -19,10 +25,4 @@ --secondary-highlighted-color: #f8b68a; --accent-color: #e68b4e; --accent-highlighted-color: #f69254; - - --sidebar-width: 2.5em; - --standard-radius: .5em; - --button-radius: .6em; - --pfp-radius: 50%; - --preferred-font: Arial; } \ No newline at end of file diff --git a/public/themes/rainbow-capitalism.css b/public/themes/style/rainbow-capitalism.css similarity index 87% rename from public/themes/rainbow-capitalism.css rename to public/themes/style/rainbow-capitalism.css index a5ec390..d37f905 100644 --- a/public/themes/rainbow-capitalism.css +++ b/public/themes/style/rainbow-capitalism.css @@ -1,3 +1,9 @@ +/* +displayName = Woke +previewGradient = 45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e +complementaryColor = white +*/ + :root { --text-color: #161518; --secondary-text-color: #2b2930; @@ -20,12 +26,6 @@ --accent-color: #ff218c80; --accent-highlighted-color: #df1b6f80; - --sidebar-width: 2.5em; - --standard-radius: .5em; - --button-radius: .6em; - --pfp-radius: 50%; - --preferred-font: Arial; - /* --optional-body-background: background */ --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80); --optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan); diff --git a/public/themes/style/styles.json b/public/themes/style/styles.json new file mode 100644 index 0000000..955102e --- /dev/null +++ b/public/themes/style/styles.json @@ -0,0 +1,6 @@ +[ + "ash.css", + "dark.css", + "light.css", + "rainbow-capitalism.css" +] \ No newline at end of file diff --git a/utils/loadPreferredTheme.ts b/utils/loadPreferredTheme.ts index 6eb8099..c915990 100644 --- a/utils/loadPreferredTheme.ts +++ b/utils/loadPreferredTheme.ts @@ -24,5 +24,5 @@ function getThemeUrl(id: string): string { const baseURL = runtimeConfig.app.baseURL; // this should preferrably use version hash, but that's not implemented yet - return `${baseURL}themes/${id}.css?v=${runtimeConfig.public.buildTimeString}` + return `${baseURL}themes/style/${id}.css?v=${runtimeConfig.public.buildTimeString}` } \ No newline at end of file