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 +11 -11
4 changed files with 11 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6abfd8e44b - Show all commits

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

@ -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 {
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
id: string
displayName: string
previewGradient: string
complementaryColor: string
themeURL: string
themeUrl: string
}
function changeTheme(ID: string, URL: string) {
if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${URL}`) {
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);
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 () => {
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
themeConfigJson.id = theme
themes.push(themeConfigJson)
}

2
public/themes/ash.json
View file

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

2
public/themes/dark.json
View file

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

2
public/themes/light.json
View file

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