Fallback for unsupported gallery color (#1508)

* chore: disable thymeleaf view resolution in the application config, including example deployments

* fix: fallback to the neutral color if the specified galleryColor is not supported by mui

Author: netomi

webui/src/pages/extension-detail/extension-detail.tsx

@@ -10,7 +10,10 @@
 
 import * as React from 'react';
 import { ChangeEvent, FunctionComponent, ReactElement, ReactNode, useContext, useEffect, useState, useRef } from 'react';
-import { Typography, Box, Theme, Container, Link, Avatar, Paper, Badge, SxProps, Tabs, Tab, Stack, useTheme, PaletteMode } from '@mui/material';
+import {
+    Typography, Box, Theme, Container, Link, Avatar, Paper, Badge, SxProps, Tabs, Tab, Stack, useTheme, PaletteMode,
+    decomposeColor
+} from '@mui/material';
 import { Link as RouteLink, useNavigate, useParams } from 'react-router-dom';
 import SaveAltIcon from '@mui/icons-material/SaveAlt';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
@@ -217,8 +220,19 @@ export const ExtensionDetail: FunctionComponent = () => {
     const renderExtension = (extension: Extension): ReactNode => {
         const tab = versionPointsToTab(version) ? version as string : 'overview';
         const themeType = (extension.galleryTheme || pageSettings.themeType) ?? 'light';
-        const headerColor = extension.galleryColor || theme.palette.neutral[themeType] as string;
+        const fallbackColor = theme.palette.neutral[themeType] as string;
+        let headerColor = extension.galleryColor || fallbackColor;
+
+        try {
+            // check if the color string can be decomposed, i.e. if mui understands it, otherwise
+            // fall back to the neutral color of the used palette.
+            decomposeColor(headerColor);
+        } catch (error) {
+            headerColor = fallbackColor;
+        }
+
         const headerTextColor = theme.palette.getContrastText(headerColor);
+
         return <>
             <Box
                 sx={{