WIP: Allow plugins to register themes

frontend/src/components/App/Settings/Settings.tsx

@@ -10,7 +10,7 @@ import { ActionButton, NameValueTable, SectionBox } from '../../common';
 import TimezoneSelect from '../../common/TimezoneSelect';
 import { useSettings } from './hook';
 import NumRowsInput from './NumRowsInput';
-import ThemeChangeButton from './ThemeChangeButton';
+import ThemeSettings from './ThemeSettings';
 
 export default function Settings() {
   const { t } = useTranslation(['translation']);
@@ -53,10 +53,6 @@ export default function Settings() {
             name: t('translation|Language'),
             value: <LocaleSelect showFullNames formControlProps={{ className: '' }} />,
           },
-          {
-            name: t('translation|Theme'),
-            value: <ThemeChangeButton showBothIcons />,
-          },
           {
             name: t('translation|Number of rows for tables'),
             value: (
@@ -76,6 +72,10 @@ export default function Settings() {
               </Box>
             ),
           },
+          {
+            name: t('translation|Theme'),
+            value: <ThemeSettings />,
+          },
         ]}
       />
     </SectionBox>

frontend/src/components/App/themeSlice.ts

@@ -1,5 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { setTheme as setAppTheme } from '../../lib/themes';
+import {
+  addTheme as addThemeToConf,
+  removeTheme as removeThemeFromConf,
+  setTheme as setAppTheme,
+  Theme,
+} from '../../lib/themes';
 import { AppLogoType } from './AppLogo';
 
 export interface ThemeState {
@@ -11,11 +16,16 @@ export interface ThemeState {
    * The name of the active theme.
    */
   name: string;
+  /**
+   * The available themes.
+   */
+  availableThemes: string[];
 }
 
 export const initialState: ThemeState = {
   logo: null,
   name: '',
+  availableThemes: [],
 };
 
 const themeSlice = createSlice({
@@ -35,9 +45,25 @@ const themeSlice = createSlice({
       state.name = action.payload;
       setAppTheme(state.name);
     },
+    /**
+     * Adds a new theme to the list of available themes.
+     */
+    addTheme(state, action: PayloadAction<{ name: string; theme: Theme }>) {
+      const { name, theme } = action.payload;
+      addThemeToConf(name, theme);
+      state.availableThemes.push(name);
+    },
+    /**
+     * Removes a theme from the list of available themes.
+     */
+    removeTheme(state, action: PayloadAction<string>) {
+      const themeName = action.payload;
+      removeThemeFromConf(themeName);
+      state.availableThemes = state.availableThemes.filter(name => name !== themeName);
+    },
   },
 });
 
-export const { setBrandingAppLogoComponent, setTheme } = themeSlice.actions;
+export const { setBrandingAppLogoComponent, setTheme, addTheme, removeTheme } = themeSlice.actions;
 export { themeSlice };
 export default themeSlice.reducer;

frontend/src/components/common/Label.tsx

@@ -74,12 +74,15 @@ export function StatusLabel(props: StatusLabelProps) {
   const theme = useTheme();
 
   const statuses = ['success', 'warning', 'error'];
+  const properStatus = !!status ? status : 'error';
 
   // Assign to a status color if it exists.
   const bgColor = statuses.includes(status)
-    ? theme.palette[status].light
+    ? theme.palette[properStatus].light
     : theme.palette.normalEventBg;
-  const color = statuses.includes(status) ? theme.palette[status].main : theme.palette.text.primary;
+  const color = statuses.includes(status)
+    ? theme.palette[properStatus].main
+    : theme.palette.text.primary;
 
   return (
     <Typography

frontend/src/components/common/SimpleTable.tsx

@@ -375,7 +375,7 @@ export default function SimpleTable(props: SimpleTableProps) {
             overflow: 'hidden',
             textOverflow: 'unset',
             whiteSpace: 'nowrap',
-            color: theme.palette.tables.head.text,
+            color: theme.palette.tables.head.color,
             background: theme.palette.tables.head.background,
             width: '100%',
             minWidth: 'max-content',