diff --git a/README.md b/README.md index 0153aa9..383cb1c 100644 --- a/README.md +++ b/README.md @@ -126,6 +126,7 @@ Each hostname is the key of an object, which has following keys: * `background`: The background image in light mode * `backgroundDark`: The background image in dark mode Each of these keys must be an URL to an image file. +If none of the hostnames matches, the special hostname `*` will be used as a fallback. An example `customImages` object looks like this: @@ -143,6 +144,11 @@ Each hostname is the key of an object, which has following keys: "logoLight": "anotherUrl.to/light/logo.png", "icon": "anotherUrl.to/light/icon.svg" }, + "*": { + "logo": "defaultUrl.to/logo.png", + "logoLight": "defaultUrl.to/light/logo.png", + "icon": "defaultUrl.to/light/icon.svg" + } } ``` As you can see, it is not necessary to overwrite every image, but the hostnames need to be accurate. diff --git a/src/App.tsx b/src/App.tsx index ea69d28..a675f66 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -45,6 +45,7 @@ const App = () => { const { Domains, loading } = useAppSelector(state => state.drawer); const serverConfig = useAppSelector(state => state.config); const configError = serverConfig.error; + const customImages = serverConfig.customImages[window.location.hostname] || serverConfig.customImages["*"]; const routesProps: RoutesProps = { authenticated, @@ -71,8 +72,8 @@ const App = () => { className={classes.root} style={{ backgroundImage: darkMode ? - `url(${serverConfig.customImages[window.location.hostname]?.backgroundDark || backgroundDark})` : - `url(${serverConfig.customImages[window.location.hostname]?.background || background})` + `url(${customImages?.backgroundDark || backgroundDark})` : + `url(${customImages?.background || background})` }} > {authenticated && } diff --git a/src/components/NavigationLinks.tsx b/src/components/NavigationLinks.tsx index bed87e2..c12d0b9 100644 --- a/src/components/NavigationLinks.tsx +++ b/src/components/NavigationLinks.tsx @@ -209,11 +209,13 @@ const NavigationLinks = (props: NavigationLinksProps) => { const { filter, adding, snackbar } = state; const isSysAdmin = capabilities.includes(SYSTEM_ADMIN_READ); const pathname = location.pathname; + const customImages = config.customImages[window.location.hostname] || config.customImages["*"]; + return ( (
grommunio { } const { user, pass, loading, langsAnchorEl } = state; - const config = serverConfig.customImages[window.location.hostname]; + const config = serverConfig.customImages[window.location.hostname] || serverConfig.customImages["*"]; return (