103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<h1>Appearance</h1>
|
|
|
|
<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})`}"
|
|
@click="changeTheme(theme.ID, theme.themeURL)"
|
|
>
|
|
<span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
|
|
{{ theme.displayName }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="subtitle">ICONS</p>
|
|
<div class="themes">
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const runtimeConfig = useRuntimeConfig()
|
|
const defaultThemes = runtimeConfig.public.defaultThemes
|
|
const baseURL = runtimeConfig.app.baseURL;
|
|
let themeLinkElement: HTMLLinkElement | null = null;
|
|
|
|
const themes: Array<Theme> = []
|
|
|
|
interface Theme {
|
|
ID: string
|
|
displayName: string
|
|
previewGradient: string
|
|
complementaryColor: string
|
|
themeURL: string
|
|
}
|
|
|
|
function changeTheme(ID: string, URL: string) {
|
|
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 () => {
|
|
for (const theme of defaultThemes) {
|
|
const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
|
|
const themeConfigJson = await themeConfig.json() as Theme
|
|
themeConfigJson.ID = theme
|
|
|
|
themes.push(themeConfigJson)
|
|
}
|
|
|
|
console.log(themes)
|
|
}
|
|
|
|
await fetchThemes()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.themes {
|
|
display: flex;
|
|
}
|
|
|
|
.theme-preview-container {
|
|
margin: .5em;
|
|
width: 5em;
|
|
height: 5em;
|
|
}
|
|
|
|
.theme-preview {
|
|
width: 5em;
|
|
height: 5em;
|
|
border-radius: 100%;
|
|
border: .1em solid var(--primary-color);
|
|
|
|
display: inline-block;
|
|
text-align: center;
|
|
align-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.theme-title {
|
|
font-size: .8em;
|
|
line-height: 5em; /* same height as the parent to centre it vertically */
|
|
}
|
|
</style>
|