Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-23 15:19:41 +02:00
Code Issues Releases Activity

fix: dynamically load theme from API endpoint (#2688)

Browse source 
* dynamically load theme from API endpoint

* add documentation
This commit is contained in:
Hayden 2023-10-26 22:09:22 -05:00 • committed by GitHub
parent 18b7e3ac9a
commit 75e95817a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 132 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

59
frontend/plugins/theme.ts
View file

@ -1,7 +1,60 @@
import { Plugin } from "@nuxt/types"
import { Plugin } from "@nuxt/types";
const themePlugin: Plugin = ({ $vuetify, $config }) => {
$vuetify.theme.themes = $config.themes as typeof $vuetify.theme.themes
export interface ThemeConfig {
lightPrimary: string;
lightAccent: string;
lightSecondary: string;
lightSuccess: string;
lightInfo: string;
lightWarning: string;
lightError: string;
darkPrimary: string;
darkAccent: string;
darkSecondary: string;
darkSuccess: string;
darkInfo: string;
darkWarning: string;
darkError: string;
}
let __cachedTheme: ThemeConfig | undefined;
async function fetchTheme(): Promise<ThemeConfig | undefined> {
const route = "/api/app/about/theme";
try {
const response = await fetch(route);
const data = await response.json();
return data as ThemeConfig;
} catch (error) {
return undefined;
}
}
const themePlugin: Plugin = async ({ $vuetify, $config }) => {
let theme = __cachedTheme;
if (!theme) {
theme = await fetchTheme();
__cachedTheme = theme;
}
if (theme) {
$vuetify.theme.themes.light.primary = theme.lightPrimary;
$vuetify.theme.themes.light.accent = theme.lightAccent;
$vuetify.theme.themes.light.secondary = theme.lightSecondary;
$vuetify.theme.themes.light.success = theme.lightSuccess;
$vuetify.theme.themes.light.info = theme.lightInfo;
$vuetify.theme.themes.light.warning = theme.lightWarning;
$vuetify.theme.themes.light.error = theme.lightError;
$vuetify.theme.themes.dark.primary = theme.darkPrimary;
$vuetify.theme.themes.dark.accent = theme.darkAccent;
$vuetify.theme.themes.dark.secondary = theme.darkSecondary;
$vuetify.theme.themes.dark.success = theme.darkSuccess;
$vuetify.theme.themes.dark.info = theme.darkInfo;
$vuetify.theme.themes.dark.warning = theme.darkWarning;
$vuetify.theme.themes.dark.error = theme.darkError;
}
if ($config.useDark) {
$vuetify.theme.dark = true;