gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

Add theme switching!!!! #18

Merged
twig merged 9 commits from settings-appearance into main 2025-07-05 17:29:46 +00:00
Conversation 4 Commits 9 Files changed 10 +31 -4
4 changed files with 31 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 441dc0c15c - Show all commits

29
components/Settings/AppSettings/Appearance.vue
View file

@ -5,7 +5,11 @@
<p class="subtitle">THEMES</p>
<div class="themes">
<div v-for="theme of themes" class="theme-preview-container">
<span class="theme-preview" :title="theme.displayName" :style="{background:`linear-gradient(${theme.previewGradient})`}">
<span class="theme-preview"
:title="theme.displayName"
:style="{background:`linear-gradient(${theme.previewGradient})`}"
@click="changeTheme(theme.ID, theme.themeURL)"
>
<span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
{{ theme.displayName }}
</span>
@ -25,23 +29,45 @@
const runtimeConfig = useRuntimeConfig()
const defaultThemes = runtimeConfig.public.defaultThemes
const baseURL = runtimeConfig.app.baseURL;
let themeLinkElement: HTMLLinkElement | null = null;
const themes: Array<Theme> = []
interface Theme {
sauceyred commented 2025-07-05 16:51:23 +00:00
Copy link

id and themeUrl rather than ID and themeURL, and update theme files to match

`id` and `themeUrl` rather than `ID` and `themeURL`, and update theme files to match
ID: string
displayName: string
previewGradient: string
complementaryColor: string
themeURL: string
}
function changeTheme(ID: string, URL: string) {
sauceyred commented 2025-07-05 16:21:03 +00:00
Outdated
Copy link

id and url rather than ID and URL

`id` and `url` rather than `ID` and `URL`
if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${URL}`) {
return;
}
localStorage.setItem("selectedTheme", ID);
// if the theme didn't originally load for some reason, create it
if (!themeLinkElement) {
themeLinkElement = document.createElement('link');
themeLinkElement.rel = 'stylesheet';
document.head.appendChild(themeLinkElement);
}
themeLinkElement.href = `${baseURL}themes/${URL}`;
}
const fetchThemes = async () => {
sauceyred commented 2025-07-05 17:20:53 +00:00
Outdated
Copy link

Convert to regular function rather than arrow function. (Forgot to comment on this before)

Convert to regular function rather than arrow function. (Forgot to comment on this before)
for (const theme of defaultThemes) {
const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
sauceyred commented 2025-07-05 16:33:58 +00:00
Outdated
Copy link

Use $fetch instead of fetch, which among other things automatically parses the body.

Use `$fetch` instead of `fetch`, which among other things automatically parses the body.
const themeConfigJson = await themeConfig.json() as Theme
themeConfigJson.ID = theme
themes.push(themeConfigJson)
}
console.log(themes)
}
await fetchThemes()
@ -67,6 +93,7 @@ await fetchThemes()
display: inline-block;
text-align: center;
align-content: center;
cursor: pointer;
}
.theme-title {

2
public/themes/ash.json
View file

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

2
public/themes/dark.json
View file

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

2
public/themes/light.json
View file

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